Nginx多個前端服務設定方式詳解

2022-03-23 19:01:17

需求

有多個前端服務需要通過Nginx部署。

Nginx多個前端服務設定方式

可以通過多個server設定或者多個location設定來設定多個前端服務。

多個location設定

location中root和alias的區別：location後面的路徑是真實路徑用root，虛擬路徑用alias
真實路徑就是本地存取地址裡面有的路徑
例如vue前端服務設定了publicPath='/allow-cost-calc'，
前端存取路徑為：http://localhost:8005/allow-cost-calc/#/login，/allow-cost-calc就是真實路徑，則使用 location /allow-cost-calc設定時裡面使用root 來指定前端服務路徑（如下服務3設定）。

若前端存取路徑為：http://localhost:8005/#/login，如果此時我們使用root來設定，那麼location後面的路徑只能使用真實路徑，只能使用 /，但是多個服務設定時/有可能已被使用（例如下面被服務1設定了），所以需要使用虛擬路徑來設定，如下服務2設定：使用/s2 來作為虛擬路徑，使用alias來指定服務位置，部署後的存取方式要帶上虛擬路徑http://localhost:8005/s2/#/login

http {
    #嵌入其他組態檔 語法：include /path/file
	#引數既可以是絕對路徑也可以是相對路徑（相對於Nginx的設定目錄，即nginx.conf所在的目錄）
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;
	#限制上傳檔案大小
	client_max_body_size       20m;
    server { 
		client_max_body_size  100M;
        listen 1004;
        server_name  localhost, 127.0.0.1;
		#服務1
		location / {
		  root dist;
		  index index.html;
		}
		#服務2：由於/r2 是虛擬路徑，所以用alias，會為存取dist3下面的首頁
		location /r2 {
		  alias  dist3;
		#服務3：由於/allow-cost-calc 是真實路徑，所以用root，會存取/allow-cost-calc/dist2下面的首頁   
		#（vue打包時設定了publicPath = '/allow-cost-calc'，同時打包後的檔案也必須放到allow-cost-calc資料夾下 dists2/allow-cost-calc/前端包檔案）
		location /allow-cost-calc {
		  root  dist2;
		
		#後端代理，後端代理不受前端路徑的影響
        location /api/ {
            proxy_pass http://10.51.105.7:31500/;
            proxy_pass_request_headers on;
            proxy_set_header Host $host;
            proxy_set_header X-Client-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

多個server設定

每個前端服務獨自使用一個server服務。nginx.conf部分設定如下：

http {
   #前端服務1
   server {
        root dist1;#前端包位置
        client_max_body_size 100M;
        listen 7001;
        server_name localhost, 127.0.0.1;
        location /api/ {
        	proxy_pass http://10.51.105.7:31500/;
            proxy_pass_request_headers on;
            proxy_set_header Host $host;
            proxy_set_header X-Client-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
   }
   #前端服務2
        root dist2;#前端包位置
        listen 7002;
}

到此這篇關於Nginx多個前端服務設定的文章就介紹到這了,更多相關Nginx設定多個前端內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Nginx多個前端服務設定方式詳解

目錄

需求