Nginx浏览器缓存优化，页面重新加载时没有CSS

Question

我正在尝试遵循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;

        }
    }
}

- carl

---

你在浏览器的开发者控制台中收到了哪些错误信息？例如，你是否收到 404 或类似的错误提示？ - ajtrichards

我在上面包含了错误信息和完整的nginx.conf文件。 - carl

Answer 1

查看 Fiddler 跟 Chrome 开发工具。

如果服务器响应“未修改、使用本地缓存”，则返回 304。 如果清除浏览器缓存或按 Shift + 刷新，则将获得带有文件主体的 200。相反，304 没有主体长度。

- Rahul Soni

---

我在上面包含了错误信息和完整的nginx.conf文件。 - carl

我已经测试了你想要实现的配置 http://paste.fedoraproject.org/278182/46116681/，并且它运行良好。 - Rahul Soni

顺便提一下，您设置了gzip的最小大小为500，因此请确保您的CSS文件大于500字节。这只是供参考，并与404状态代码无关。目前，由于配置问题，Nginx无法找到您的文件。 - Rahul Soni

Answer 2

我遇到了同样的问题。

通过放置以下内容解决了它：

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

内部

位置 /static/

因此，最终配置如下

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

- Shashank