使用nginx實現用在同域名下部署多個前后端分離項目

背景

　　現在我們有幾個前后端分離的項目，前后台使用的分別是Vue和Springboot框架開發，部署方式的話前端使用webpack進行打包用nginx作為靜態服務器訪問，部署在前端服務器上，后台由springboot打成jar包直接啟動運行，部署在另一台后台服務器上。

　　不同的項目分別使用不同的端口進行代理，大概配置如下：

　　

　　這種方式我們代理了8084端口來映射前端目錄，訪問 http://前端服務器ip:8084的話會自動去找nginx服務器根目錄下的leanpm文件夾。同時還代理了后端的上下文路徑 leanpm，這樣的話我們前端只要調用前端服務器的ip + leanpm 即可自動代理到后台服務器，這種做法不但隱藏了后端服務器的真實ip，還可以處理跨域問題，可謂一舉兩得。

　　例：訪問 http://前端服務器ip:8084/leanpm/xxx 會自動代理到后台服務器 http://后端服務器ip:后台端口/leanpm/xxxx

　　不知道你有沒有這樣想過，如果這是幾個獨立互不干擾的項目，我們通過不同的端口來代理不同的項目，這是可以理解的。但是，如果這幾個項目互為子系統的話，我們這樣的做法就顯得不太妥當，雖然當然這種做法本質上也不會產生什么問題。

　　不過要是我們不用端口而是用不同的名稱來區分不同的子系統是不是就會更加合理一些呢，比如：父系統 http://cnblogs.com  子系統一： http://cnblogs.com/admin 子系統二：http://cnblogs.com/article 。使用這種方式進行代理的話，我們可以更加直觀的看出不同系統的關系，而且名稱相較於端口號也會更利於理解記住。

實踐

1.上傳資源文件，目錄如下

.
├─conf
│ ├─... # 其他文件
│ └─nginx.conf
│
├─html # 資源存放目錄 
│ ├─home # 父系統
│ │ └─static
│ │   ├─css
│ │   ├─fonts
│ │   └─js
│ │     ├─g
│ │     └─V
│ ├─article # 子系統一
│ │  └─static
│ │    ├─css
│ │    ├─fonts
│ │    └─js
│ │      ├─g
│ │      └─V
│ ├─index.html
│ └─50x.html
└─... # 其他文件

2.修改nginx的配置

    server {
        listen       80;
        server_name  localhost;
        
        // 父系統 使用 http://ip:80/home 訪問
        location /home {
            root   home;　　   //父系統資源目錄   
            index  index.html index.htm;
        }

        location /home-back/ { //父系統后台context-Path
            proxy_pass http:   http://父系統后台服務器ip:端口號/home-back/;
            proxy_read_timeout 150;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        // 子系統一地址 使用 http://前端服務器ip:80/article 訪問         
        location /article{    
            alias article;       //子系統一資源目錄     
            index index.html;

        }

        location /article-back/ {  //子系統的后端 contex-Path
            proxy_pass http://子系統一后台服務器ip:端口號/article-back/;
            proxy_pass_header Server;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Scheme $scheme;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_read_timeout 150;
           }

    }

　　注意：當指定目錄的時候，要注意虛擬目錄alias和root目錄的區別。

　　上面的配置中如果配置子系統資源目錄的時候 使用的是root而不是alias，那么訪問 http://前端服務器ip:80/article/a.html 實際指的是 /html/article/article/a.html，這樣會報404錯誤。

　　關於兩者的詳細解釋可以看這篇文章 Nginx虛擬目錄alias和root目錄     

3.修改前端配置文件

　　前端項目打包時修改 publicPath，配置資源的訪問路徑，這里我們就要將父系統設為 home，子系統一設置為 article，如果不進行配置的話訪問css等靜態資源時，使用的會是如下路徑  http://前端服務器ip:80/css/aaa.css，因為配置了代理，所以這里會找不到資源文件，報404錯誤。

4.測試

　　父系統訪問 http://前端服務器ip:80/home

　　子系統一訪問 http:///前端服務器ip:80/article

總結

　　這篇文章主要講解如何使用nginx在同一個端口下，使用不同的名稱來代理部署不同的項目。主要需要注意nginx.conf中關於location的配置，以及虛擬目錄alias和root目錄的區別。

　　如果有什么見解或指正，歡迎在下方評論。

 

EOF