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

評論中