Nginx 支持單域名多 Vue 服務配置備忘

zhichangterry 發布于2019-07-25 14:49 / 2240人閱讀

摘要：最近開發時，遇到需要使用同一域名承載多個前端項目的場景，具體需求如下訪問新版本前端項目訪問后端接口服務訪問默認前端項目配置內容注意的配置。此時，可以通過對新版前端文件中的進行配置，以規避這一問題注該方法僅適用于構建的項目參考鏈接

最近開發時，遇到需要使用同一域名承載多個前端項目的場景，具體需求如下：

/v2 訪問新版本前端項目

/api 訪問后端 Spring Boot 接口服務

/ 訪問默認前端項目

1. Nginx 配置內容

server {
    listen       80;
    listen       [::]:80;
    server_name  _;

    server_name_in_redirect off;
    proxy_set_header Host $host;

    location /api {
        proxy_pass http://0.0.0.0:0000;
    }

    location / {
        index  index.html;
        root /path/to/main/web/app;
    }

    location /v2 {
        index  index.html;
        alias /path/to/v2/web/app;
    }
}

注意 Nginx 的 alias 配置。此時，新前端項目需要被放在 /path/to/v2/web/app 路徑下。

2. 修改 publicPath 配置

僅僅通過上述配置，在訪問新版前端時，會遇到資源文件無法找到的問題。

此時，可以通過對新版前端 vue.config.js 文件中的 publicPath 進行配置，以規避這一問題（注：該方法僅適用于 Vue-Cli 3.x 構建的項目）：

module.exports = {
    ...
    
    publicPath: "/v2/",
    
    ...
};

參考鏈接

Understanding the difference between the root and alias directives in Nginx；

Can"t get two single page applications to run together on one server using nginx；

GPU云服務器云服務器 vue.js多頁面單云端服務器多客戶端單云服務器多客戶端單文檔多窗口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/40491.html

Nginx基本配置備忘

摘要：基本配置備忘從屬于筆者的服務端應用程序入門與實踐，更多知識體系參閱我的技術體系結構圖。有每個進程的最大連接數，選取哪種事件驅動模型處理連接請求，是否允許同時接受多個網路連接，開啟多個網絡連接序列化等。配置用戶或者組，默認為。 [Nginx基本配置備忘]()從屬于筆者的服務端應用程序入門與實踐，更多知識體系參閱2016:我的技術體系結構圖:Web/ServerSideApplicatio...

scq000 2019-07-25 13:50 評論0 收藏0
單頁應用的部署方案

摘要：所以單頁應用的部署，需要將所有的頁面請求都返回，瀏覽器下載了后會自動解析并導航到對應頁面。總結單頁應用與以前的常規多頁面應用還是有區別的，開發過程與后端解耦了，同時會出現跨域鑒權以及應用部署的問題。本文同步發布于我的個人博客上 - 單頁應用的部署方案本文主要簡單講一下單頁應用的開發及部署方法，默認你懂一些服務端知識及nginx知識，如果有任何可以在下方評論留言。單頁應用 SPA（...

yanbingyun1990 2019-07-25 14:45 評論0 收藏0
關于Vue/axios下跨域cookie的處理

摘要：凡事有例外，以下分別對待不同情況服務器端配置即可客戶端配置，這樣大部分瀏覽器都支持跨域了，反正新版本下無問題。但放在默認設置下依然出現無法獲取的問題，至此，查資料查到解決存取的跨域問題，依照文中記載，在追加的響應頭，解決了下的問題。一般在生產環境下盡量可以通過nginx等反向代理，把vue前端和api接口處理成同一端口和域名。在開發和測試時，也可以使用兼容性比較好的瀏覽器進行。凡...

Mike617 2019-07-25 13:54 評論0 收藏0
Nginx

摘要：此外，其也能夠提供強大的反向代理功能。是由為俄羅斯訪問量第二的站點開發的，第一個公開版本發布于年月日。 keepalived+nginx 實現高可用雙機熱備 + 負載均衡架構 1 準備4個ubuntu16.04虛擬機（啟用網卡二并使用橋接模式）:A服務器：192.168.0.103 主B服務器：192.168.0.104 主（備）前端工程師學習 Nginx ...

syoya 2019-07-25 14:06 評論0 收藏0