nginx同一端口代理多個vue項目（每個vue項目佔據一個端口--jar包啓動）

1. 需求：

現在有兩個vue項目（hash模式，即默認模式：路由中配 mode:'hash'或者不配） ，都用端口8084訪問：

 http://localhost:8081/#/      和      http://localhost:8082/#/    

http://localhost:8081/#/aView      訪問的是8081中的頁面

http://localhost:8082/#/bView      訪問的是8082中的頁面

 

配置nginx代理後，需要實現：

http://localhost:8084/#/  訪問的是   http://localhost:8081/#/    或    http://localhost:8082/#/    （隨機）

http://localhost:8084/#/aView   和   http://localhost:8084/aServer/#/aView            訪問的是8081中的頁面

http://localhost:8084/#/bView   和   http://localhost:8084/bServer/#/bView            訪問的是8082中的頁面

 

兩個項目相互訪問則直接訪問8084，然後加前綴aServer 或 bServer。即：

a項目中請求b項目中頁面，則訪問 http://localhost:8084/bServer/#/bView    

b項目中請求a項目中頁面，則訪問 http://localhost:8084/aServer/#/aView   

 

2.nginx代理配置：

以下爲nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
	#純前端
	upstream frameServer{
	    # weight 權重：誰的的權重多，訪問到哪個服務的機率就大
		server localhost:8081 weight=5;
		server localhost:8082 weight=2;
	}
	 
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8084;
        server_name  localhost;
        charset utf-8;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		
		location /aServer/ {
           proxy_pass http://localhost:8081/;
        }
		location /bServer/ {
           proxy_pass http://localhost:8082/;
        }
		
		location / {
					proxy_pass_header Server;
					proxy_headers_hash_max_size 5120;
					proxy_headers_hash_bucket_size 640;
					proxy_set_header Host $http_host;
					proxy_set_header X-Forwarded-For $remote_addr;
					proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
					proxy_set_header X-Real-IP $remote_addr;
					proxy_set_header X-Scheme $scheme;
					 
					#proxy_pass http://localhost:8082; 
					proxy_pass http://frameServer; 
					 
					
        }
		 
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
	 
	
}

重要的就是以下幾行：

 

      upstream frameServer{
           # weight 權重：誰的的權重多，訪問到哪個服務的機率就大
           server localhost:8081 weight=5;
           server localhost:8082 weight=2;
      }

       location /aServer/ {
           proxy_pass http://localhost:8081/;
        }
        location /bServer/ {
           proxy_pass http://localhost:8082/;          # 注意proxy_pass 是帶url方式， 有/
        }
        
        location / {
                    proxy_pass_header Server;
                    proxy_headers_hash_max_size 5120;
                    proxy_headers_hash_bucket_size 640;
                    proxy_set_header Host $http_host;
                    proxy_set_header X-Forwarded-For $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header X-Scheme $scheme;
                    proxy_pass http://frameServer; 
        }