Vue 前端配置多級目錄實踐（基於Nginx配置方式）

東北小狐狸發表於2021-12-08
Vue前端Nginx

前情提要

有陣子沒更新部落格了，因為快年結了工作比較多，這不，最近公司的對外演示環境出現問題這個活兒也落到了我的頭上……

事情是這樣的，原來演示環境有很多服務，每個服務都是對外單獨開一個埠，比如 http://a.com.cn:8080、http://a.com.cn:8081 這種，通過外網域名埠對映到內網的伺服器上。最近有個變化是 為了降低安全風險，公司決定啟用https，並且對外演示環境只開設一個埠。

之前的樣子：

現在想要的效果：

看著應該會很好實現，只需要用個Nginx就可以了嘛~

看著也沒什麼問題嘛，而現實狠狠地給我上了一課：

Vue 前端預設是以 / 下載資原始檔的！哪怕我的html的確是從服務b返回的，但html到達使用者瀏覽器後，獲取靜態資源請求仍是向http://a.com.cn:8080/ 發起的！

解決思路

想解決這個問題常見有兩種方案：

  • 修改 Vue 構建原始碼，使用自定義路徑或./作為獲取靜態資源的基礎路徑
  • 使用 Nginx 獲取 Referer 請求頭，根據請求頭的目錄轉發到對應的服務

方案對比

  • 方案1需要修改代理的所有前端服務，改動量雖然不是很大，除了修改還需要再次構建部署。
  • 方案2只需要修改 Nginx

綜合考慮現在演示環境的程式是由不同產品線提供的穩定版本，最好不對程式進行大的修改，最後選擇了方案2。

方案2的配置方式

#演示環境Hellxz
server {
  listen 8080;
  server_name a.com.cn;
  charset utf-8;

  location /b/ {
    proxy_pass  http://server-b/;
  }

  location / {
    #根據Referer區分靜態資源來源
    if ($http_referer ~ "/b/") {
       add_header referer-review $http_referer; #顯示靜態資源來源
       proxy_pass http://server-b; # 轉發到服務b，末尾不能加/
    }
    proxy_pass  http://server-a/; #門戶a
  }
}

upstream server-a {
  server   192.168.0.1:8080;
}

upstream server-b {
  server   192.168.0.1:8081;
}

就這樣了，雖然前端仍是向/發起請求，但請求已經轉到了正確的服務上，新增的 referer-review 請求頭可以清楚地看到前端靜態資源是從哪級目錄過來的。本文內容就這些了，如果文章內容有錯誤希望讀者評論與我溝通，我們一起進步！

本文同步於本人部落格園(hellxz.cnblogs.com) 與 CSDN(https://blog.csdn.net/u012586326)

相關文章