使用 nginx 同域名下部署多個 vue 項目，並使用反向代理

文章從個人思否上直接轉載過來，原文地址在末尾

花了 3 天時間，趁着我尚未忘記，先記錄下來

效果

目前有 2 個項目（project1, project2），還有一個 nginx 自帶的 index.html，我添加了對應的連接代碼（稍後粘貼出來），爲了統一管理子項目的路由。

我指望實現下面的效果（假設 ip: localhost，port: 8080）：

http://localhost:8080/ 進入最外層的 index.html
http://localhost:8080/project1 進入項目一
http://localhost:8080/project2 進入項目二
複製代碼

廢話很少說，開始配置

Vue 的配置

本人使用的是 vue-cli2 搭建的項目，因此對應的須要修改一些 vue 的配置參數。

• config 文件夾下的 index.js，由於是打包，因此咱們須要在 build.assetsPublicPath 更改對應項目名，譬如

// project1
module.exports = {
  dev: {},
  build: {
    assetsPublicPath: '/project1/' // 注意先後的 ‘/’
  }
}

// project2
module.exports = {
  dev: {},
  build: {
    assetsPublicPath: '/project2/' // 注意先後的 ‘/’
  }
}
複製代碼

• config 文件夾下的 prod.env.js 修改爲這樣：

// project1
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"/api/pro1"' // 這裏待會與 nginx 配置對應
}

// project2
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"/api/pro2"' // 這裏待會與 nginx 配置對應
}
複製代碼

[注意] 由於我在項目中使用到了 BASE_API 做爲代理的前綴，若是你的不在這邊，你須要找到你本身的代理配置

• 由於每一個人的 vue-router 文件配置不同，你須要找到你的 router 配置文件，內部修改成：

// 我採用了 history 模式，hash 模式我沒有測試，感受應該是同樣的效果
// project1
export default new Router({
  base: '/project1/', // 注意更改你子項目名，這個對應你的 build.assetsPublicPath
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: []
})

// project2
export default new Router({
  base: '/project2/', // 注意更改你子項目名，這個對應你的 build.assetsPublicPath
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: []
})
複製代碼

[注意] 在 npm run build 可能會報錯：.tap(*) 之類的，那是由於打包中的 html-webpack-plugin 版本出現了問題，能夠執行下面的語句

# 這個版本就是你的 package.json 中的版本，只不過你須要從新再指定這個版本

$ npm i html-webpack-plugin@4.0.0-alpha -D
複製代碼

Nginx 的配置

• 首先個人目錄是這樣的，無關文件所有以 ... 展現

.
├─conf
│  ├─... # 其餘文件
│  └─nginx.conf
│
├─html # 只看這裏，其餘暫時我沒用到 
│  ├─project1
│  │  └─static
│  │      ├─css
│  │      ├─fonts
│  │      └─js
│  │          ├─g
│  │          └─V
│  ├─project2
│  │   └─static
│  │       ├─css
│  │       ├─fonts
│  │       └─js
│  │           ├─g
│  │           └─V
│  ├─index.html
│  └─50x.html
└─... # 其餘文件
複製代碼

[解釋] 個人 nginx 目錄就是原生的，內部包含了一個 html 文件夾，爲了省事，我直接使用這個，固然你也能夠指定其餘的目錄，可是目前還請和我同樣的配置，後面能夠本身定製化。

• 如今咱們開始配置在 conf 文件夾下的 nginx.conf 文件

我是直接在原始文件上修改的，而修改的配置都是在 http 模塊中，因此其餘的不須要的代碼我直接用 ... 代替。

# ...
# 反向代理
http {
    include mime.types;
    default_type application/octet-stream;

    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    # '$status $body_bytes_sent "$http_referer" '
    # '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile        on;
    keepalive_timeout  65;

    client_max_body_size 20M;
    client_body_buffer_size 10M;
    large_client_header_buffers 4 128k;
	
    # 這裏能夠作集羣
	upstream p1_server {
		server localhost:8081;
	}

	# 這裏能夠作集羣
	upstream p2_server {
		server localhost:8082;
	}

    server {
        listen 8080;
        server_name localhost;
		charset utf-8;

        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;

        root html; # 這裏指定剛剛咱們的文件夾
		
        # 總的項目路由，我偷懶直接寫在了同一個文件
        # 若是有不少能夠在配置多個 conf 文件，使用 include 關聯進來
		location / {
            try_files $uri $uri/ /index.html; # 這裏能夠理解指定到 html 文件夾下的 index.html
		}
		
        # project1
        # 這裏就是剛剛咱們在 vue 項目中 config/index.js 的配置 build.assetsPublicPath，
        # 也是 vue 項目中配置的 router 中的 base
		location ^~ /project1 {
            try_files $uri $uri/ /project1/index.html; # 這裏能夠理解指定到 html 文件夾下 project1 文件夾 的 index.html
		}
		
        # project2
        # 這裏是項目二的配置
		location ^~ /project2 { # 
            try_files $uri $uri/ /project2/index.html; # 這裏能夠理解指定到 html 文件夾下 project2 文件夾 的 index.html
		}
		
        # 這裏是 project1 配置須要調用的接口
		location /api/pro1 { # 這裏就是在 vue 項目中 prod.env.js 的配置 BASE_API 
			proxy_redirect off;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://p1_server; # 此處的 p1_server 對應的上面的配置 upstream p1_server {}，這裏能夠作集羣，我用不到，就簡單配置了
        }
        
         # 這裏是 project1 配置須要調用的接口
        location /api/pro2 { # 這裏就是在 vue 項目中 prod.env.js 的配置 BASE_API
			proxy_redirect off;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://p2_server;  # 此處的 p2_server 對應的上面的配置 upstream p2_server {}，這裏能夠作集羣，我用不到，就簡單配置了
        }

        # ...
    }

    # ...
}
複製代碼

• 最後貼出我修改的 index.html 的代碼

由於我是追加的，因此直接貼出我追加的代碼，其餘的採用 ...

...
<p><em>Thank you for using nginx.</em></p> <!-- 爲了展現位置 -->

<!-- start: 追加-->
<hr>
<a href="/project1">項目一</a> | <a href="/project2">項目二</a>
<!-- end: 追加-->

</body> <!-- 爲了展現位置 -->
複製代碼

最後的調試

全部的配置完成，咱們就能夠啓動 nginx 了，這個不會的請自行解決了。

啓動成功，咱們在瀏覽器輸入 http://localhost:8080 咱們就能夠看到，

點擊項目一，咱們能夠看到連接變爲 http://localhost:8080/project1

點擊項目二，連接變爲 http://localhost:8080/project2，徹底符合咱們的指望，那就成功了。

[強行解釋一下玄學] 那天配置好了，一啓動就報錯，弄的我最後放棄了。可是次日，準備在檢查下，一啓動居然全好了，我都一臉懵逼啊！ 若是你也遇到和我同樣的問題，先放放，說不定隔天就行了。

原文地址