Nginx同一端口部署多个前后端分离Vue项目配置教程

前言

若需使用Nginx容器部署多个前端项目，通常有两种实现方式：一是监听不同的端口，二是基于location路径进行配置。

本例中Nginx通过Docker部署，且启动时未开放额外端口，因此选择使用location配置方案。

在同一个server块中，根据根路径的不同，分别代理访问不同的项目。

接下来开始具体操作，核心步骤可概括为三部分。

第一步：Nginx 相关位置代码

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;

		#项目一，同过ip:80直接访问
		location / {
            root   /home/ruoyi-ui/dist; #dist文件的位置(根据自己dist包放置的位置决定) 
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		#项目二，同过ip:80/project直接访问
		location /project {
            alias  /home/zero/dist/;#注意第二个项目路径是alias不是root，通常最佳实际是配置一个项目的根root，其他的文件夹则使用alias，毕竟alias更加灵活
            try_files $uri $uri/ /project/index.html;
	        index  index.html;
        }

		#第一个项目（前后端分离）反向代理来解决跨域问题
		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;
			#后端服务端口地址：
			proxy_pass http://10.10.11.79:8080/;
		}

		#第二个项目（前后端分离）反向代理来解决跨域问题，要与第二个项目vue里面跨域的配置一致，没有跨域问题可以不配置		
		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;
			#后端服务端口地址：
			proxy_pass http://10.10.11.79:8083/;
		}
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

访问时通过 ip:端口号/配置的路径进行访问，例如第一个路径为根路径 /，第二个项目路径为 /project。

主要涉及以下两个配置点：

1. 第二个location后的 /project 名称，必须与Vue项目中 index.js 或 vue.config.js 配置的名称保持一致。

2. 解决跨域问题，在第四个location中，location /zero-api/ 的名称需与Vue项目 vue.config.js 文件中配置的跨域代理路径一致。

第二步：Vue 项目配置文件设置

1. 修改 index.js

修改路由配置，在 src 目录下找到 router 目录，添加 base 属性：

base: '/project',

该处的名称需与 nginx.conf 中第二个项目 location 后 / 的路径名称保持一致。

2. 修改 vue.config.js

修改根目录下的 vue.config.js，调整 publicPath 路径：

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

该处的名称需与 nginx.conf 中第二个项目 location 后 / 的路径名称保持一致。

3. 处理前后端分离跨域问题

若无跨域需求可不配置。鉴于当前多为前后端分离架构，通常由Nginx分别代理前端和后端微服务以解决跨域。修改 vue.config.js 如下：

devServer: {
  port: 80, //本地项目端口
  proxy: {
     "/zero-api": { // 这个意思是：原先以 /zero-api 开头的请求
      target: 'http://10.10.11.79:8083', // 凡是以 /zero-api 开头的请求，通通请求这个服务器
      changeOrigin: true, // 允许跨域
    }
  }
},

/zero-api 需与Nginx反向代理中配置的 zero-api 保持一致。

第三步：部署

修改Nginx配置文件 nginx.conf，将第二个Vue项目打包后的文件放入 /home/zero/dist 目录，随后重启Nginx服务。

总结

至此，关于Nginx同一端口部署多个前后端分离Vue项目的步骤介绍完毕。如需了解更多Nginx部署多个前后端分离Vue项目的内容，可搜索本站往期文章或继续浏览相关文章，感谢支持！

Nginx同一端口部署多个Vue项目完整步骤

前言