利用浏览器缓存 - 带有 CDN 的 nginx答案

【问题标题】：Leverage browser caching - nginx with CDN利用浏览器缓存 - 带有 CDN 的 nginx
【发布时间】：2018-08-16 09:17:45
【问题描述】：

我正在使用pingdom 测试我的网站： https://tools.pingdom.com/#!/dCLQGc/https://stagingreport.daytwo.com

并在利用浏览器缓存方面获得低分：

所有静态文件都从具有以下配置的 nginx 服务器提供

server {
   listen 80;

    gzip on;
    gzip_vary on;
    gzip_types    text/plain application/javascript application/x-javascript text/javascript text/xml text/css;


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

    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
        if ($http_x_forwarded_proto = "http") {
            return 301 https://$host$request_uri;
        }

        try_files $uri $uri/ /index.html;
    }


}

因为我是使用谷歌云CDN我没有在服务器上设置任何缓存配置。

为了获得更高的性能分数我应该更改 nginx 配置中的某些内容吗？

【问题讨论】：

标签： angular performance nginx google-cloud-platform cdn

【解决方案1】：

根据下面提到的caching details，您可能需要相应地配置nginx：

只有在所有以下是正确的：

它由具有 Cloud CDN 的后端服务或后端存储桶提供服务已启用。

这是对 GET 请求的响应。

其状态码为 200、203、206、300、301、302、307 或 410。

它有一个 Content-Length 标头或一个 Transfer-Encoding 标头。

它有一个 Cache-Control: public 标头。

它有一个 Cache-Control: s-maxage、Cache-Control: max-age 或 Expires 标题。

它有一个 Content-Length、Content-Range 或 Transfer-Encoding 标头。

它的大小小于或等于最大大小。

对于后端存储分区，您可以通过标记公开共享的对象。

还有阻止缓存响应的检查。一个响应是如果以下任何一项为真，则不会缓存：

它有一个 Set-Cookie 标头。

它有一个 Vary 标头，其值不是 Accept、Accept-Encoding、或起源。

它有一个 Cache-Control：no-store、no-cache 或 private 指令。

相应的请求有一个 Cache-Control: no-store 指令。

【讨论】：