爲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

回答

相關問題