Nginx – CSS and JS files not being updated, supposedly because of Nginx Caching

cachenginx

I have my web app working with AppCache and I would like that when I modify my html/css/js files, and then update my Cache Manifest, that when the user accesses my web app, they will have an updated version of those files. If I change an HTML file, it works perfectly, but when I change CSS and JS files, the old version is still being used.

I've been checking everything out and I think it's related to my nginx configuration. I have a cache.conf file that contains the following:

gzip on;
gzip_types text/css application/x-javascript text/x-component text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon;
location ~ \.(css|js|htc)$ {
expires 31536000s;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public, must-revalidate, proxy-revalidate";
}
location ~ \.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$ {
expires 3600s;
add_header Pragma "public";
add_header Cache-Control "max-age=3600, public, must-revalidate, proxy-revalidate";
}

And in default.conf I have my locations. I would like to have this caching working on all locations except one, how could I configure this? I've tried the following and it isn't working:

location /dir1/dir2/ {
  root /var/www/dir1;
  add_header Pragma "no-cache";
  add_header Cache-Control "private";
  expires off;
}

Thanks

Update:

My cache.conf now look like this:

location ^~ /desk/ {
  add_header Pragma "no-cache";
  add_header Cache-Control "private";
  expires off;
}

location ^~ /dev/desk/ {
  add_header Pragma "no-cache";
  add_header Cache-Control "private";
  expires off;
}

gzip on;
gzip_types text/css application/x-javascript text/x-component text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon;
location ~ \.(css|js|htc)$ {
expires 31536000s;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public, must-revalidate, proxy-revalidate";
}

Best Answer

Locations in nginx define exclusive configurations, that is, with two location

location /dir1/dir2/ {
    # configuration A
}

location ~ \.(css|js|htc)$ {
    # configuration B
}

only one configuration will be used for a request. With the above locations (as in your config), for a request to /dir1/dir2/file.css will be selected location ~ \.(css|js|htc)$ as per location selection rules.

If you want nginx to don't search for locations given by regular expressions if request starts with /dir1/dir2/, use ^~ modifier:

location ^~ /dir1/dir2/ {
    # configuration A
}

location ~ \.(css|js|htc)$ {
    # configuration B
}

This way, the location ^~ /dir1/dir2/ location will be used for a /dir1/dir2/file.css request.

Alternatively, you may isolate your regexp locations under another prefix location, e.g. location /, like this:

location / {
    # configuration for normal files under /

    location ~ \.(css|js|htc)$ {
        # configuration for css/js/htc files under /
    }
}

location /dir1/dir2/ {
    # configuration for all files under /dir1/dir2/
}

See http://nginx.org/r/location for additional details. The How nginx processes a request article might be helpful, too.

Related Topic