利用 Nginx 的浏览器缓存，重新加载页面时没有 css答案

【问题标题】：Leverage browser caching for Nginx, no css when reloading the page利用 Nginx 的浏览器缓存，重新加载页面时没有 css
【发布时间】：2015-10-11 07:03:32
【问题描述】：

我正在尝试遵循 google pagespeed 建议和利用浏览器缓存。为此，我将以下代码放入我的 nginx.conf 文件的服务器块中。

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

location ~*  \.(pdf)$ {
    expires 30d;
}

看起来效果不错，页面速度将我的分数从 87/100 提高到 95/100。但是，当我单击站点的刷新按钮时，它似乎不再加载 css 文件了吗？缓存没有用吗？

我得到的错误信息是

Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的整个 nginx.conf 文件

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;

        }
    }
}

【问题讨论】：

您在浏览器的开发者控制台中收到了哪些错误消息？例如，您是否收到 404 或类似的问题？
我在上面包含了错误信息和整个 nginx.conf 文件

标签： html css nginx browser-cache google-pagespeed

【解决方案1】：

查看 Fiddler 跟踪或 Chrome 开发工具。

304 表示服务器响应“未修改，使用本地缓存”。如果您清除浏览器缓存或执行 Shift + Refresh，您将获得 200 以及文件正文。 304 反之，体长为零。

【讨论】：

我在上面包含了错误消息和整个 nginx.conf 文件
我已经测试了paste.fedoraproject.org/278182/46116681的配置你想要达到的效果，效果很好。
顺便说一句，只是想强调一下您已将 gzip 最小大小设置为 500，因此请确保您的 CSS 文件大于 500 字节。它是 JFYI，与 404 状态码无关。目前 Nginx 由于配置原因无法找到您的文件。

【解决方案2】：

我遇到了同样的问题。

通过放置解决它：

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

里面

位置/静态/

所以最终的配置看起来像

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;
        }
    }

参考：https://developers.google.com/speed/pagespeed/module/filter-cache-extend

【讨论】：