快捷導(dǎo)航

Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目完整步驟

更新時(shí)間：2023年10月19日 16:39:32 作者：抹香鯨之海

最近做項(xiàng)目結(jié)構(gòu)優(yōu)化,前端項(xiàng)目都是部署在nginx上,想實(shí)現(xiàn)同一個(gè)端口可以訪問(wèn)多個(gè)前端項(xiàng)目,所以就有了本文,這篇文章主要給大家介紹了關(guān)于Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下

前言

要用nginx容器部署多個(gè)前端項(xiàng)目可以采用監(jiān)聽(tīng)端口，和基于location配置兩種方法，

我的nginx是使用docker部署的，啟動(dòng)的時(shí)候沒(méi)有開(kāi)多余的端口，所以采用location配置

一個(gè)server下根據(jù)根路徑不同分別代理訪問(wèn)不同項(xiàng)目。

下面操練起來(lái)，問(wèn)：把大象放冰箱？總共需要幾步：三步！

第一步：Nginx 相關(guān)位置代碼

worker_processes  1;

events {
    worker_connections  1024;
}

http {
	client_max_body_size 100m;
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

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

		#項(xiàng)目一，同過(guò)ip:80直接訪問(wèn)
		location / {
            root   /home/ruoyi-ui/dist; #dist文件的位置(根據(jù)自己dist包放置的位置決定) 
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		#項(xiàng)目二，同過(guò)ip:80/project直接訪問(wèn)
		location /project {
            alias  /home/zero/dist/;#注意第二個(gè)項(xiàng)目路徑是alias不是root，通常最佳實(shí)際是配置一個(gè)項(xiàng)目的根root，其他的文件夾則使用alias，畢竟alias更加靈活
            try_files $uri $uri/ /project/index.html;
	        index  index.html;
        }

		#第一個(gè)項(xiàng)目（前后端分離）反向代理來(lái)解決跨域問(wèn)題
		location /prod-api/ {
			proxy_set_header Host $http_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;
			#后端服務(wù)端口地址：
			proxy_pass http://10.10.11.79:8080/;
		}

		#第二個(gè)項(xiàng)目（前后端分離）反向代理來(lái)解決跨域問(wèn)題，要與第二個(gè)項(xiàng)目vue里面跨域的配置一致，沒(méi)有跨域問(wèn)題可以不配置		
		location /zero-api/ {
			proxy_set_header Host $http_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;
			#后端服務(wù)端口地址：
			proxy_pass http://10.10.11.79:8083/;
		}
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

訪問(wèn)的時(shí)候是ip:端口號(hào)/+你配置的路徑：第一個(gè)路徑時(shí)候/，第二個(gè)路徑是/project

主要是兩個(gè)地方：

1.第二個(gè)local 后面/project 這個(gè)名字要與vue項(xiàng)目中index.js ，vue.config.js配置里面的名稱要一樣

2.跨域的問(wèn)題第四個(gè)local中l(wèi)ocation /zero-api/ 這個(gè)名字要與vue項(xiàng)目中vue.config.js文件中的跨域那個(gè)地方的配置要一致。

第二步：Vue 項(xiàng)目配置文件設(shè)置

1.修改index.js

修改路由，在src目錄下找到reouter目錄，添加base屬性：

base: '/project',

這個(gè)地方的名字需要與 nginx.conf 中第二個(gè)項(xiàng)目location的/后面的路徑名稱一致。

2. 修改vue.config.js

修改根目錄下的vue.config.js的publicPath路徑：

module.exports = {
  publicPath: "/project'",  
}

這個(gè)地方的名字需要與 nginx.conf 中第二個(gè)項(xiàng)目location的/后面的路徑名稱一致。

3. 處理前后端分離跨域問(wèn)題

沒(méi)有跨域需求可以不配，現(xiàn)在都是前后端分離了，用nginx分別代理前端和后端微服務(wù)，解決跨越問(wèn)題。修改vue.config.js：

devServer: {
  port: 80, //本地項(xiàng)目端口
  proxy: {
     "/zero-api": { // 這個(gè)意思是：原先以 /zero-api 開(kāi)頭的請(qǐng)求
      target: 'http://10.10.11.79:8083', // 凡是以 /zero-api 開(kāi)頭的請(qǐng)求，通通請(qǐng)求這個(gè)服務(wù)器
      changeOrigin: true, // 允許跨域
    }
  }
},

/zero-api 要與nginx 里面那個(gè)反向代理里面那個(gè)zero-api一致。

第三步：部署

修改nginx配置文件nginx.conf，把第二個(gè)vue項(xiàng)目打包放到目錄中/home/zero/dist，重啟nginx。

總結(jié)

到此這篇關(guān)于Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目的文章就介紹到這了,更多相關(guān)Nginx部署多個(gè)前后端分離vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: