为Nginx利用浏览器缓存，重新加载页面时无需css

我试图遵循google页面速度建议并利用浏览器缓存。为此，我将以下代码放入我的nginx.conf文件的服务器块中。为Nginx利用浏览器缓存，重新加载页面时无需css

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; 

     } 
    } 
}

来源

2015-10-11 carl

您在浏览器的开发人员控制台中收到哪些错误消息？例如你是否得到了404或类似的东西？ – ajtrichards

我收到了错误消息和 – carl

看看提琴手痕迹或Chrome开发工具。

304意味着服务器回应“未修改，使用本地缓存”。如果您清除浏览器缓存或执行Shift + Refresh，则会得到一个200以及文件正文。相反，304具有零体长度。

来源

2015-10-11 14:45:24

上面的错误消息和整个nginx.conf文件我在错误消息和整个 – carl

以上的nginx.conf文件中包含了我测试过的配置http://paste.fedoraproject.org/278182/46116681/你想实现，并且它运作良好。 –

顺便说一句，只是想强调，你已经设置你的gzip最小尺寸有500，所以请确保你的CSS文件大于500字节。它是JFYI，与404状态码无关。目前由于配置，Nginx无法找到您的文件。 –

我得到同样的问题。

通过将解决它：

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

Refe rence：https://developers.google.com/speed/pagespeed/module/filter-cache-extend

来源

2016-11-05 19:07:08 Shashank

为Nginx利用浏览器缓存，重新加载页面时无需css

回答

相关问题