一個域名下部署多個項目

背景

目前有一個產品：會議室；主要功能是用戶線上預定會議室（h5端）和后台管理會議室（pc端）

前台和后台部署在同一個域名上，通過子目錄訪問不同項目

前台：https://roomadmin.avicnet.cn/myMeeting      后台：https://roomadmin.avicnet.cn/pc

知識點

•  webpack 配置 publicPath
•  vue-router 配置 model、base
•  nginx 解決history模式url刷新404問題
•  nginx 解決訪問域名 加 子目錄  不加 “/” 不能正常訪問

注意：我們這里不介紹一個域名部署一個應用，且默認你已經了解

 

一：修改nginx配置文件，監聽某個端口（我的項目是部署在8096端口）

server {
        listen       8096; root /usr/share/nginx/html/; 省略....... }

root指定文件的根路徑，也就是nginx放置靜態資源的地址，如下左圖，前台項目的包在myMeeting文件夾里，后台項目的包在pc文件夾里

包的內容是我們npm run build 打出來的dist包，以pc項目為例，如下右圖

      

 

此時訪問 http://10.88.180.62:8096/pc/ 發現靜態資源404，（10.88.180.62是前端服務器，8096是我們監聽的端口）

 

細心的你一定發現，靜態資源的地址不對，應該是http://10.88.180.62:8096/pc/assets/js/xxx，少了/pc，

那是因為我們打的包，index.html里引用的地址就是沒有/pc的

 

二：vue.config.js修改publicPath配置

修改pc后台：publicPath: '/pc'   修改myMeeting前台：publicPath：'/myMeeting'

此時觀察本地起服務與打包后的靜態地址都已變化，下圖以pc后台為例：

   

再次訪問http://10.88.180.62:8096/pc/已能正常加載靜態資源

但訪問前台http://10.88.180.62:8096/myMeeting/ 發現到了路由404，本地起serve訪問也是

 

 三、 修改vue-router路由配置表的基路徑base

現象：訪問前台http://10.88.180.62:8096/myMeeting/ 發現到了路由404，是因為我們的路由配置的是history模式

且路由是從 “/” 進行配置，並沒有考慮myMeeting路徑，因此沒有匹配路由，被 path：‘*’ 捕獲，顯示404組件

添加base: '/myMeeting'后，重啟項目，發現路由已能正常匹配

 

四、配置域名與ip+端口的映射

域名 roomadmin.avicnet.cn => 10.88.180.62:8096  

 

五、nginx服務器添加命令解決history模式下url刷新或者返回404的問題

在我們訪問項目的路由頁面，在點擊瀏覽器的刷新和回退按鈕時，頁面顯示nginx 404，如下圖：

 

 

 

 

 

 

 

 

 

 

 

 

由圖可知，訪問前台項目 https://roomadmin.avicnet.cn/myMeeting下的record路由頁面刷新，查看開發者工具里的network請求：

record是404，也沒有請求靜態資源，說明此時還沒訪問到前端項目，且nginx服務器里的myMeeting文件里也沒有record文件或者文件夾

vue-router官方文檔給出的解決方案是：https://router.vuejs.org/zh/guide/essentials/history-mode.html

如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你項目的入口頁面。

我們這里是部署到子目錄，故ngxin配置文件添加命令如下：

        location ^~ /myMeeting {
            try_files $uri $uri/index.html /myMeeting/index.html;
        }

上述命令的意思是：訪問文件時，當前面的文件不存在時逐個往后查找，直到找到為止，如果找到則直接返回找到的文件，而不是重定向

即：訪問/myMeeting/record時，找不到，則查找/myMeeting/record/index.html，找不到，則查找/myMeeting/index.html，返回前端項目入口文件index.html。進入項目，被路由捕獲，正常顯示頁面

 

五、 nginx 解決訪問域名 加 子目錄  不加 “/” 不能正常訪問

  現象：訪問 https://roomadmin.avicnet.cn/pc 重定向到 https://roomadmin.avicnet.cn:8096/pc/

  經查找發現，在訪問url時，ngxin會先在根目錄查找pc文件，如果沒找到會重定向到/pc/去找pc目錄，nginx重定向有一套規則,如下：

Nginx 服務中配置指令 absolute_redirect 用來配置重定向的方式。默認開啟，為絕對重定向；否則為相對重定向。（假裝很明白的樣子）

當我們訪問URI時；如果訪問資源為一個目錄，並且URI沒有以正斜杠（/）結尾;Nginx 服務就會返回一個301跳轉，目標地址就是要加一個正斜杠。

在跳轉過程中 server_name_in_redirect 指令設置跳轉目標的域名，默認配置為on ,從請求的 header 中獲取。否則從配置文件中的 server_name 中獲取。

在跳轉過程中 port_in_redirect 指令設置跳轉目錄的端口，默認值為on,從 nginx 配置文件中的Listen 端口獲取。否則從接受到的請求頭信息（header）中獲取。

Nginx 官方指令列表 ：http://nginx.org/en/docs/dirindex.html

 三種解決方案：

1、重定向去掉端口號     port_in_redirect off;

2、取消絕對重定向，使用相對重定向   absolute_redirect off; 

3、讓其重定向到其他地方   try_files $uri $uri/index.html;

location ^~ /pc {
          #  port_in_redirect off;
          #  absolute_redirect   off; 
          #  try_files $uri $uri/index.html;
}