Nginx--同一端口同時代理vue項目和web項目

 

 

環境：只有一臺服務器，一個web系統使用了兩臺tomcat在運行，一個vue系統，

需要的結果：需要同時用到https的443端口，並且訪問http時，自動跳到https中去

思路：

[1]代理web項目很簡單，按照之前的操作即可。

[2]代理vue項目時，爲了和web項目的路徑區分，在vue項目中添加前綴

路由配置index.js添加
const router = new Router({
  base: 'vmobile',   // 路由添加前綴，打包時區分不同的項目
  mode: 'history',  // history打包時，注意nginx的配置問題 
});

在config的index.js裏面修改，dev和build模式都修改。

// 路徑增加前綴，區分不同的項目
assetsPublicPath: '/vmobile/',

以後vue的路由就在增加vmobile。 http://127.0.0.0.1/vmobile/login

 

    #本地tomcat運行的項目	
    upstream server_pool {
        ip_hash;        #使用其他負載模式，會有session的問題。暫時未解決
        server 127.0.0.1:81;
        server 127.0.0.1:82;
    }
	       
    server {
        listen 443 ssl;
        #填寫綁定證書的域名
        server_name www.demo.cn;
        #證書文件名稱
        ssl_certificate 1_www.demo.cn_bundle.crt;
        #私鑰文件名稱
        ssl_certificate_key 2_www.demo.cn.key; 
        ssl_session_timeout 5m;
        #請按照以下協議配置
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
        #請按照以下套件配置，配置加密套件，寫法遵循 openssl 標準。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
        ssl_prefer_server_ciphers on;

	   charset gbk,utf-8;

	   # 負載均衡
        location /zlw/ {
          proxy_pass http://server_pool;
        }
   
        #配置的靜態資源
        location /zlw/commodity/ {
	      alias /usr/media/commodity/;	
        }
    
        #配置的靜態資源
        location /zlw/picture/ {
          alias /usr/media/picture/;
        }

        #配置的靜態資源
        location /zlw/music/ {
          alias /usr/media/music/;
	      autoindex on;
        }
  
        #配置的靜態資源
        location /zlw/movie/ {
          alias /usr/media/movie/;
	      autoindex on;
        }

	    #vue項目 採用的是histroy模式，添加前綴vmobile，爲了區分其他的項目
	    location /vmobile {
	      alias /usr/local/vueProject/zhoulw;    #vue項目存放的位置
	      try_files $uri $uri/ /vmobile/index.html;		
	    }	

    }


    #http 轉發到 https	
    server {
	    listen 80;
	    #填寫綁定證書的域名
	    server_name www.demo.cn; 
	    #把http的域名請求轉成https
	    return 301 https://$host$request_uri;
    }

[3]配置靜態資源時，由於項目裏面引用資源都帶了項目名的，所以在配置資源時，把項目名也加上了。

[4]按照上面的配置

web項目訪問的就是https://127.0.0.1/zlw/login.do

vue項目訪問的就是https://127.0.0.1/vmobile/login

實現了共用一個端口，代理了多個項目的目的