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

阳光穿透心脏的1/2处 2023-01-14 06:59 261阅读 0赞

### 文章目录 ###

*  一、前言
 *  二、上传dist文件
 *  三、配置nginx.cnf

# 一、前言 #

*  一个服务器需要部署多个前端项目
    
     *  比如需要一个企业官网
     *  比如需要一个管理系统
 *  这时候一个Nginx要怎么配置多个前端项目呢
 *  本文详细讲解： **`通过不同域名的方式来部署多个项目`**
    
     *  访问`www.xxx.com`到企业官网
     *  访问`iot.xxx.com`到管理系统

# 二、上传dist文件 #

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

![在这里插入图片描述][20210420120841526.png]

# 三、配置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;
            }
        }

***觉得好，就一键三连呗（点赞+收藏+关注）***

[20210420120841526.png]: /images/20221022/b5be94eca0cd4747922f54d935d7e84a.png