如何在nginx同一端口下部署多個vue項目

時間 2020-06-15

標籤如何 nginx 同一端口部署多個 vue 項目欄目 Nginx 简体版

原文原文鏈接

本文已在個人公衆號上發佈，更多原創技術文章，請關注個人公衆號「字節逆旅」html

如題，項目部署咱們都經歷過，這個過程也是十面埋坑。其實部署vue應用比較簡單瞭如今，特別是cli3出來後，比之前要容易多了。這裏記錄一次在nginx同一端口下部署多個vue應用的過程。nginx用來作代理很好用，能夠解決跨域問題。前端

那麼，如何在一個端口號下部署多個應用呢？這個需求有什麼用？好比你的一個服務器上部署了不少應用，各個項目的，每一個都佔用一個端口，那可能如今還要映射到外網去，方便給客戶演示。這個資源老是有限的，因此若是能省一個端口最好就省一個。特別是像一個項目裏有多個子系統，各系統又是獨立開發的，這種狀況就更有必要了。vue

開發及部署環境

工具包括vue+vuecli3+nginxnginx

部署步驟

1、前端配置

其實這個順序應該是從nginx講起，若是沒經驗的能夠先看第二步nginx配置web

前端配置其實就是爲了約定一個路由，這樣在nginx配置好了以後能夠訪問到本身的資源。vuex

能夠這麼想，本來我一個端口下只有一個項目，那個人資源就跟我開發時同樣就好了，隨便訪問。如今這個端口下多了一個項目，那我訪問資源時是否是得區別標記一下，這個區分要先後端約定好才行。後端

vue的前端路由其實就是在前端匹配url地址變化來找到想要的頁面，那咱們如今要在服務器上加上一個項目，咱們把新項目的url進行一些特定配置就行了。所謂配置，就是加一個url路徑'/newProject/'(你本身定義）就能夠了。api

一、靜態資源地址配置

這裏要分vuecli2和vuecli3兩種環境，只講vuecli3的，與vuecli2不一樣的地方我提下位置你就能夠本身找了。跨域

在vue.config.js文件下找到publicPath配置，添加以下配置（vuecli2就是config文件夾下的assetsPublicPath配置）服務器

process.env.NODE_ENV === 'production' ? '/newProject/' : '/',
複製代碼

這個配置在官方文檔上有說明，就是要注意區分開發環境與生產部署環境。生產環境上咱們跑起項目時是不須要在url上加上這個newProject的，加上這個，是由於後面部署的時候nginx會根據這個來區分不一樣的項目。

二、在模板文件下添加base

在部署環境下， a、img、link、form這些標籤要找到對應資源，也要先匹配nginx環境，因此要在head節點下加上base配置。

<meta base=/newProject/ >
複製代碼

base標籤爲頁面上的全部連接規定默認地址或默認目標。

打包以後，你的html頁面看起來就是這樣：

<!DOCTYPE html>
<html>  <head>  <script src="/newProject/js/runtime~index.0604ac2d.js"></script>  <meta charset="utf-8">  <meta base="/newProject/">  <meta http-equiv="X-UA-Compatible" content="IE=edge,edge">  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  <link rel="icon" href="/newProject/images/favicon.ico">  <script src="/newProject/xxx.js"></script>  <title></title> </head> 複製代碼

三、將'/newProject/'應用到vue項目路由中

這一步就是將vue項目中的頁面路由切換加上這個添加的url路徑，在router的初始化步驟下添加：

const router = new VueRouter({
 mode: 'history',  base: process.env.NODE_ENV === 'production' ? '/newProject/index/' : '/index/',  routes }) 複製代碼

若是你的項目單頁面服務在/index/下，通常默認狀況下vuex的基路徑base配置默認是'/index/'。這裏的配置一樣是根據環境來區分，部署環境一樣要加上'/newProject'。

2、nginx配置

這個沒寫步驟，直接看完整配置吧。'location /' 和'location /newProject'這兩塊就是我說的兩個應用，大概意思就是這兩個應用要共用20000這個端口（'location ^~ /api/ '這個是接口api映射配置點，本文不討論，你能夠忽略）。

server {
 listen 20000;  server_name localhost;   # root D:/deploy/web  location ^~ /api/ {  proxy_pass http://ip:端口/;  }   location / {  root D:/deploy/web/a;  try_files $uri $uri/ @router;  index index.html;  }   location /newProject {  alias D:/deploy/web/newProject;  try_files $uri $uri/ /newProject/index.html;  index index.html;  }  location @router {  rewrite ^.*$ /index.html last;  }  } 複製代碼

配置基本就是這樣，能夠結合本身項目參考下，直接copy修改下就行。

我簡單介紹下要點：

a、D:/deploy/web下的a、newProject項目分別在不一樣的文件夾裏，它們所在位置不重要，重要的是nginx能夠找到而且發佈出來。

b、a文件夾的地址前綴是root，newProject文件夾的地址前綴是alias。

c、try_files後面的內容也不同，本身注意看，我不細說了。

下面我講一下nginx配置基礎知識。

敲黑板，劃重點

一、root、alias

root與alias主要做用就是解釋location後面的uri，root意思就是根據root路徑+locationn路徑找到資源；alias意思就是用alias路徑替換對應的location路徑內容。

二、try_files uri uri/

可能不懂nginx的人有點懵，有人會問try_files uri uri/ @router; 這句話是什麼意思？我簡單解釋下：

try_files字面意思就是嘗試文件，再結合語境就是「嘗試讀取文件」，這裏就是要讀取靜態文件

$uri 這個是nginx的一個變量，存放着用戶訪問的地址,

好比：http://www.aa.com/index.html, 那麼$uri就是 /index.html

uri/就是 /nginx/test/

完整的解釋就是：try_files 去嘗試到網站目錄讀取用戶訪問的文件，若是第一個變量存在，就直接返回當前值；若是第一個不存在繼續讀取第二個變量，若是存在，返回當前值；若是不存在就跳轉到第三個參數上。

如今來看看第三個參數：@router，這個參數叫location，配置的是rewrite，重寫規則。好比上面的rewrite ^.*$ /index.html last; ，這句意思就是一個重定向。好比你是這個地址http://www.baidu.com/xxx.html，它會跳轉到http://www.baidu.com/index.html/xxx.html

好了，在nginx下配置多個vue項目已經講完了，但願對你有用，也能夠點個在看，幫助更多人。

本文發表在個人公衆號字節逆旅，若是對大前端技術感興趣，歡迎掃碼關注