nginx 部署前端資源的最佳方案

快樂的開發者發表於2022-06-08
Nginx前端

前言

最近剛來一個運維小夥伴，做線上環境的部署的時候，前端更新資源後，總是需要清快取才能看到個更新後的結果。客戶那邊也反饋更新了功能，看不到。

方案

前端小夥伴應該都知道瀏覽器的快取策略，協商快取和強快取，如有不清楚的地方，可以看看這篇文章[聊聊瀏覽器快取] (https://juejin.cn/post/7055224159642583047)。

現在比較流行的是單頁應用。瞭解了瀏覽器的快取之後，在常見的web開發中我們應該怎麼設定呢。現在大多數的應用是通過webpack打包的，打包生成的資源名稱會帶上hash值。下面是打包後的檔案

image.png

我們可以遵循之下規則

  • index.html入口檔案不加強制快取，設定成協商快取
  • js 資源線上上環境可以設定成強快取。

因為我們每次打包之後，入口檔案會有變化，所以協商快取會失效，會重新從伺服器獲取新的資源。而對應的js資源有hash的變化，所以有變化，會從伺服器中獲取。

nginx配置

nginx 非根目錄部署（root要換成alias）。

要設定html，htm型別的檔案走協商快取，其它js檔案走強快取，我們可以這樣配置。

  #設定某個型別的檔案走協商快取
  if ($request_filename ~* .*\.(?:htm|html)$) {
    add_header Cache-Control 'no-cache';
  }

整體配置

location /page/appAnalyze {
   try_files $uri $uri/ /index.html last;
   alias /usr/*******/dist;
   index    index.html index.htm;
   #設定某個檔案不快取讀取本地，永遠走200，拿到最新的
    if ($request_filename ~* .*\.(?:htm|html)$) {
        add_header Access-Control-Allow-Credentials false;
        add_header Access-Control-Allow-Origin $http_origin;
        # header上新增協商快取
        add_header Cache-Control 'no-cache';
        # 表示請求頭的欄位 動態獲取
        add_header Access-Control-Allow-Headers
        $http_access_control_request_headers;
 }

結束語

小夥伴可以看看你們的專案快取是不是這樣部署的呢，如果不是，可以加上這些配置。你的網站效能也會提升一點點哈。

如果你覺得該文章不錯，不妨

1、點贊，讓更多的人也能看到這篇內容

2、關注我，讓我們成為長期關係

3、關注公眾號「前端有話說」，裡面已有多篇原創文章，和開發工具，歡迎各位的關注，第一時間閱讀我的文章

相關文章