Nginx多個(gè)前端服務(wù)配置方式詳解

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

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

需求

有多個(gè)前端服務(wù)需要通過Nginx部署。

Nginx多個(gè)前端服務(wù)配置方式

可以通過多個(gè)server配置或者多個(gè)location配置來配置多個(gè)前端服務(wù)。

多個(gè)location配置

location中root和alias的區(qū)別：location后面的路徑是真實(shí)路徑用root，虛擬路徑用alias
真實(shí)路徑就是本地訪問地址里面有的路徑
例如vue前端服務(wù)設(shè)置了publicPath='/allow-cost-calc'，
前端訪問路徑為：http://localhost:8005/allow-cost-calc/#/login，/allow-cost-calc就是真實(shí)路徑，則使用 location /allow-cost-calc配置時(shí)里面使用root 來指定前端服務(wù)路徑（如下服務(wù)3配置）。

若前端訪問路徑為：http://localhost:8005/#/login，如果此時(shí)我們使用root來配置，那么location后面的路徑只能使用真實(shí)路徑，只能使用 /，但是多個(gè)服務(wù)配置時(shí)/有可能已被使用（例如下面被服務(wù)1配置了），所以需要使用虛擬路徑來配置，如下服務(wù)2配置：使用/s2 來作為虛擬路徑，使用alias來指定服務(wù)位置，部署后的訪問方式要帶上虛擬路徑http://localhost:8005/s2/#/login

http {
    #嵌入其他配置文件 語法：include /path/file
	#參數(shù)既可以是絕對(duì)路徑也可以是相對(duì)路徑（相對(duì)于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;
		#服務(wù)1
		location / {
		  root dist;
		  index index.html;
		}
		#服務(wù)2：由于/r2 是虛擬路徑，所以用alias，會(huì)為訪問dist3下面的首頁
		location /r2 {
		  alias  dist3;
		#服務(wù)3：由于/allow-cost-calc 是真實(shí)路徑，所以用root，會(huì)訪問/allow-cost-calc/dist2下面的首頁   
		#（vue打包時(shí)設(shè)置了publicPath = '/allow-cost-calc'，同時(shí)打包后的文件也必須放到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;
        }
    }
}

多個(gè)server配置

每個(gè)前端服務(wù)獨(dú)自使用一個(gè)server服務(wù)。nginx.conf部分配置如下：

http {
   #前端服務(wù)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;
        }
   }
   #前端服務(wù)2
        root dist2;#前端包位置
        listen 7002;
}

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

您可能感興趣的文章: