Nginx多個前端服務配置方式詳解

更新時間：2022年03月23日 14:51:06 作者：哈啊哈鉿

這篇文章主要介紹了Nginx多個前端服務配置方式，主要包括多個location配置，多個server配置，配置方式本文給大家介紹的非常詳細，感興趣的朋友一起看看吧

需求

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

Nginx多個前端服務配置方式

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

多個location配置

location中root和alias的區(qū)別：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
	#參數(shù)既可以是絕對路徑也可以是相對路徑（相對于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;
}

到此這篇關(guān)于Nginx多個前端服務配置的文章就介紹到這了,更多相關(guān)Nginx配置多個前端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: