Adding "expires" directive in Nginx conf for assets causes "404 not found" errors

Question

I have a live Django site running gunicorn, nginx, supervisord. I am trying to implement the suggestions found here to increase my page speed score by using gzip in nginx. The resulting config file is as follows:

upstream app_server_wsgiapp {
   server 127.0.0.1:8000 fail_timeout=0;
}

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

server {
    server_name           www.example.com;
    listen                443 ssl;

    if ($host = 'example.com') {
      return 301 https://www.example.com$request_uri;
    }

    ssl_certificate       /etc/nginx/example/example.crt;
    ssl_certificate_key   /etc/nginx/example/example.key;
    ssl_session_timeout   1d;
    ssl_session_cache     shared:SSL:50m;
    ssl_protocols         TLSv1.1 TLSv1.2;
    ssl_ciphers           'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
    ssl_prefer_server_ciphers   on;
    access_log            /var/log/nginx/www.example.com.access.log;
    error_log             /var/log/nginx/www.example.com.error.log info;
    keepalive_timeout     5;
    proxy_read_timeout    120s;

    # nginx serve up static and media files and never send to the WSGI server
    location /static {
        autoindex on;
        alias /path/to/static/files;
    }

    location /media {
        autoindex on;
        alias /path/to/media/files;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        if (!-f $request_filename) {
            proxy_pass http://app_server_wsgiapp;
            break;
        }
    }

    gzip on;
    gzip_comp_level    5;
    gzip_min_length    256;
    gzip_proxied       any;
    gzip_vary          on;

    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        expires 7d;
    }
}

After restarting nginx and opening my site in a browser, everything appears to be fine. I then check the page speed here and my score has indeed increased.

The problem is that if I go back to my site and press Ctrl+F5 for a full refresh of the page and re-download the static files (just to really make sure everything is working correctly), the static files do not download. I get the following browser console errors:

GET https://www.example.com/path/to/static/files 404 (Not Found)
etc...
etc...

None of the static files are found or downloaded. If I edit the nginx config file and comment out the last 3 lines and restart nginx then it works (even when pressing CTRL+F5), ie:

# location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
#     expires 7d;
# }

So it seems as though the issue is something related to those 3 lines. However with those 3 lines commented out, I do not get any page speed increase which defeats the point of trying to use gzip.

Answer 1

location blocks are not additive. nginx selects a location block to process a request. By adding a new location block, you prevent your existing location blocks from processing the request. See this document for details.

As you have multiple location blocks with multiple alias directives, it may be simpler to use a global expires directive to be inherited by your existing location blocks.

For example:

map $request_uri $expires {
    default off;
    ~*\.(jpg|jpeg|png|gif|ico|css|js|pdf)(\?|$) 7d;
}
server {
    ...
    expires $expires;
    ...
    location ... {
        ...
    }
    ...
}

See this document for more.