Leverage browser caching for Nginx, no css when reloading the page - html

Question

I amtrying to follow the google pagespeed advice and Leverage browser caching. For that I place the following code into the server block of my nginx.conf file.
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf)$ {
expires 30d;
}
It seems to work nicely, page speed increases my score to from 87/100 to 95/100. However, when I click the refresh button for my site it doesn't seem to load the css files anymore?
Did the caching not work?
The error message I get is
Failed to load resource: the server responded with a status of 404 (Not Found)
Here is my entire nginx.conf file
worker_processes 1;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
sendfile on;
gzip on;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 500;
gzip_disable "MSIE [1-6]\.";
gzip_types text/plain text/xml text/css
text/comma-separated-values
text/javascript
application/x-javascript
application/atom+xml;
# Configuration containing list of application servers
upstream app_servers {
server 127.0.0.1:8080;
}
# Configuration for Nginx
server {
# Running port
listen 80;
# Settings to serve static files
location /static/ {
# Example:
# root /full/path/to/application/static/file/dir;
root /var/www/benty-fields/app/;
}
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf)$ {
expires 30d;
}
# Serve a static file (ex. favico)
# outside /static directory
location = /favico.ico {
root /app/favico.ico;
}
# Proxy connections to the application servers
# app_servers
location / {
proxy_pass http://app_servers;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
}

Answer 1

Take a look at Fiddler traces or Chrome dev tools.
A 304 would mean that the server responded with "not modified, use your local cache". If you clear your browser cache or do Shift + Refresh, you will get a 200 along with the body of the file. 304 on the contrary have zero body length.

Answer 2

I was getting the same issue.
Resolved it by placing:
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf)$ {
expires 30d;
}
inside
location /static/
So the final config looks like
location / {
proxy_pass http://app_servers;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf)$ {
expires 30d;
}
}
Reference: https://developers.google.com/speed/pagespeed/module/filter-cache-extend