Nginx部署多个Vue项目，配置不同域名

文章目录

• 一、前言
• 二、上传dist文件
• 三、配置nginx.cnf
• 四、域名解析

一、前言

• 一个服务器需要部署多个前端项目

• 比如需要一个企业官网
• 比如需要一个管理系统

• 这时候一个Nginx要怎么配置多个前端项目呢
• 本文详细讲解： 通过不同域名的方式来部署多个项目

• 访问www.xxx.com到企业官网
• 访问iot.xxx.com到管理系统

二、上传dist文件

• dist是Vue生成的部署文件，上传到云端

三、配置nginx.cnf

• 企业官网部署view_dist
• 管理系统部署iot_dist
• 通过两个server，通过server_name来区分

vim /usr/local/nginx/conf/nginx.conf
cd /usr/local/nginx/sbin/
./nginx -s reload

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        
		location / {
			root   /root/software/view_dist;
			try_files $uri $uri/ /index.html;
			index  index.html index.htm;
		}
		
		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://localhost:8080/;
		}
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
	
	server {
        listen       80;
        server_name  iot.xxx.com;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        
		location / {
			root   /root/software/iot_dist;
			try_files $uri $uri/ /index.html;
			index  index.html index.htm;
		}
		
		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://localhost:8080/;
		}
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

四、域名解析

域名解析别忘了搞，否则会访问不了，ping不通。

添加A记录。