How do I force NGINX to load new static files?

Question

I recently pushed a major update to a site and I'm having an issue where some people can't log in because their browser is loading old javascript files. Some of the things I have done include:

• Cache busting all javascript files
• Set sendfile off in nginx.conf
• Set expires 1s in mysite.conf
• Explicitly set Cache-Control header: add_header Cache-Control no-cache;

Bellow are my conf files for nginx. Any help would be much appreciated.

/etc/nginx/sites-enabled/mysite.conf

proxy_cache_path  /var/cache/nginx levels=1:2 keys_zone=one:8m max_size=3000m inactive=600m;

server {
    listen 80;
    server_name mysite.com;
    return 301 https://www.mysite.com$request_uri;
}

server {

        # listen for connections on all hostname/IP and at TCP port 80
        listen *:80;

        # name-based virtual hosting
        server_name www.mysite.com;

        # location of the web root for all static files (this should be changed for local development)
        root /var/mysite.com/static;

        # redirect http requests to https
        if ($http_x_forwarded_proto = "http") {
            rewrite  ^/(.*)$  https://www.mysite.com/$1 permanent;
        }

        # error pages
        error_page 403 /errors/403.html;
        error_page 404 /errors/404.html;
        error_page 408 /errors/408.html;
        error_page 500 502 503 504 /errors/500.html;  

        # error and access out
        error_log /var/log/nginx/error.mysite.log;
        access_log /var/log/nginx/access.mysite.log;

        # use Nginx's gzip static module
        gzip_static on;
        gzip_types application/x-javascript text/css;

        location / {

            # redefine and add some request header lines which will be passed along to the node server
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_set_header X-Forwarded-Proto $scheme;

            # set the address of the node proxied server
            proxy_pass http://127.0.0.1:9001;

            # forbid all proxy_redirect directives at this level
            proxy_redirect off;
        }

        # do a regular expression match for any files ending in the list of extensions

        location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|xml|html|htm)$ {

            # clear all access_log directives for the current level
            access_log off;
            add_header Cache-Control no-cache;
            # set the Expires header to 31 December 2037 23:59:59 GMT, and the Cache-Control max-age to 10 years
            expires 1s;
        }

}

/etc/nginx/nginx.conf

user www-data;
worker_processes 4;
pid /var/run/nginx.pid;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##

    sendfile off;
    tcp_nopush off;
    tcp_nodelay off;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

Answer 1

Have you tried manually deleting everything that is in your cache? This is typically /var/cache/nginx.

I believe that having add_header Cache-Control no-cache; set should keep things from being cached, but perhaps you have something that was cached in there before you set that?

Answer 2

Setting expires -1; inside of a location block will actually disable caching completely.

Answer 3

You are ignoring the cache of your readers browser. Unless you change the name of your objects (eg. add a version number to the .js), or the objects were sent with an ETag or Modification-Date, the browser may consider his version of the object is still valid for a couple of decennia, and never consult your server.

Answer 4

Faced the same problem. If you are using cloudflare for DDOS protection (if not then please do) then enable

• developer mode for a while.
• Always check your static file results in an incognito(in google chrome that is what is called as) window.
• stop nginx > delete cache > start nginx service.

Answer 5

To disabling caching for all CSS and JS files, I used this snippet:

location ~* /.(css|js)$ {
  expires -1;
}

Answer 6

It's not very relevant to the question itself, but may save you a few hours.

I had the same problem and after trying every solution mentioned in this question, the answers and other similar questions, I've checked my Cloudfare control panel and found the "caching" section there. It turned out that Cloudfare had cached my main css file and no matter what was returning the cached version instead the new one (even by wget).

So if you serve your site with Cloudfare and are experiencing this problem:

1. Go to your control panel, to the Caching section
2. Press Purge everything

Answer 7

Most likely your clients have a cached version and they dont check if they are modified on your server. So you'd need to fix your cache settings, then you can move them to a different folder. Eg. if you move /styles/*.css to /css/ instead, and all js files from scripts to /js/ their browsers would have to refetch resources.