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;

        }
    }
}

Answer 1

查看Fiddler曲目或Chrome开发工具。

304表示服务器响应＆＃34;未修改，使用本地缓存＆＃34;。如果清除浏览器缓存或执行Shift + Refresh，则会获得200以及文件正文。相反，304的体长为零。

Answer 2

我遇到了同样的问题。

通过放置：

解决了这个问题

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

内

location / 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

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

2 个答案: