Nginx deploys multiple vue projects with separate front-end and back-end on the same port

To deploy multiple front-end projects using nginx containers, you can use two methods: listening port and location-based configuration.
My nginx is deployed using docker. There are no extra ports opened when starting, so I use location to configure
a server according to the root path. Different agents access different projects.
Now let’s practice and ask: Put the elephant in the refrigerator? How many steps are needed in total: three steps!

Step one: Nginx related location code

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;
        }
    }
}

When accessing, it is ip:port number/+the path you configured: the first path is/, and the second path is/project

Mainly in two places:
1. The name /project behind the second local must be
the same as the name in the index.js and vue.config.js configuration of the vue project
. 2. Cross-domain issues. The location / in the fourth local The name zero-api/ should be consistent with the cross-domain configuration in the vue.config.js file in the vue project.

Step 2: Vue project configuration file settings

1. Modify index.js

Modify the route, find the reouter directory in the src directory, and add the base attribute:

base: '/project',

The name of this place needs to be consistent with the path name after / in the second project location in nginx.conf.

2. Modify vue.config.js

Modify the publicPath path of vue.config.js in the root directory:

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

The name of this place needs to be consistent with the path name after / in the second project location in nginx.conf.

3. Handle cross-domain issues of front-end and back-end separation

If there is no cross-domain requirement, it doesn’t matter. Now the front-end and back-end are separated, and nginx is used to proxy the front-end and back-end microservices respectively to solve the cross-over problem. Modify vue.config.js:

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

/zero-api should be consistent with the zero-api in the reverse proxy in nginx.

Step 3: Deployment

Modify the nginx configuration file nginx.conf,
package the second vue project into the directory /home/zero/dist, and restart nginx.