單頁應用部署時緩存策略

問題描述

前端網站採用Vue + Nginx的方式進行生產環境部署。

系統在發佈更新第二天，收到客戶的投訴，發現登陸系統以後，出現頁面空白問題，刷新幾回後顯示正常。查看日誌發現：

2019/01/07 10:26:01 [error] 19#0: *833 open() "/.../static/js/0.4a66cb25e7f24262c3f6.js" failed (2: No such file or directory), client: XX.XX.XX.XX, server: localhost, request: "GET /static/js/0.4a66cb25e7f24262c3f6.js HTTP/1.1"

問題分析

因爲vue在build以後，會從新生成index.html + static資源。從日誌判斷，【/static/js/0.4a66cb25e7f24262c3f6.js】是上一版本的靜態資源。而index.html中get請求獲取，跟瀏覽器緩存有關。

可是查看nginx配置，發現沒有配置緩存策略。

server {
        listen       80 default_server;
        server_name  localhost;
        root         /www/;
        index        index.html index.htm;
        location / {
             try_files $uri $uri/  index.html;
        }
    }

當http頭中無緩存配置，那麼將使用瀏覽器默認緩存策略，以下：

先放上結論吧，Chrome和Firefox對js、css之類的文件，在內存中的緩存時長，是： （訪問時間 - 該文件的最後修改時間） ÷ 10

• 假設文件 a.js 最後編輯時間是 2018年12月1號 10點0分0秒；
• Chrome的第一次訪問時間是 2018年12月1號 12點0分0秒；
• 第一次訪問與文件編輯時間相差2小時，即7200秒，那麼緩存時長就是720秒

解決方案

http請求頭中，經過cache-control聲明緩存策略。

• 對於index.html採用no-cache策略，客戶端使用緩存，可是使用前須要與服務器確認版本狀態。
• 對於static資源，採用客戶端緩存。

nginx配置參考：

location /index.html {
    add_header "Cache-Control" "no-cache";
  }

  location /static/ {
    access_log none;
    expires 14d;
  }

  location / {
    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_pass http://127.0.0.1:8081;
    client_max_body_size  500m;
  }

  location = / {
  }

參考資料

1. https://blog.csdn.net/youbl/article/details/84879670
2. https://www.cnblogs.com/feng9exe/p/8083237.html