nginx 一个端口部署多个vue项目（反向代理）

1、目前我有俩个vue项目，分别是app和pc

 

 

2、实现内容

 　　1）、通过一个端口分别访问这俩个前端项目

　　　http://localhost:8080/app     ==>  app项目

　　　http://localhost:8080/pc       ==> pc项目

3、nginx配置文件配置　　

#HTTP服务器
    server {
        #监听8080端口，8080端口是知名端口号，用于HTTP协议
        listen       8080;
        
        server_name  localhost;
        
        
        #编码格式
        charset utf-8;
        
        location / {
            root   html;
            index  index.html index.htm;
        }
        
        #参数配置
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
        
　　　　#对应下面app的
        location /app{
            proxy_pass http://127.0.0.1:8066;            
        }
        location /app/ {
            proxy_pass http://127.0.0.1:8066;             
        }
        
　　　　　#对应下面pc的
        location /pc{
            proxy_pass http://127.0.0.1:8067; 
        }
        location /pc/ {
            proxy_pass http://127.0.0.1:8067; 
        }    

    }
    
　　#app项目
    server {
        listen 8066;
        location / {
            root html\app;
        }
    }
    
　　#pc项目的
    server {
        listen 8067;
        location / {
            root html\pc;
        }
    }

 

4、注意事项

　　1）、如上配置，我们需要在相应的目录下创建相应的app/pc 目录

　　

 

 

　　2）、为什么呢？

　　　　　这就要熟悉nginx的反向代理是如何进行的了？

　　　　　用例子大概说明一下：

　　　　　如上面例子需要将http:localhost:8080/app  跳转到 http://localhost:8066中的变化其实就是

　　　　　　　　http:localhost:8080/app ---> http://localhost:8066/app 这样的一个过程

　　　　　　所以我们需要在建一个目录，目录名对应的就是 的app  也可以是 bpp、cpp

 

 

　　　　　　　　　　　　　　　　　

 

 

 

 参考至：https://segmentfault.com/q/1010000017065655

评论中