日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后,達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

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

作者:哈啊哈鉿 ? 更新時(shí)間: 2022-05-26 編程語(yǔ)言

需求

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

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

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

多個(gè)location配置

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

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

http {
    #嵌入其他配置文件 語(yǔ)法: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ì)為訪問(wèn)dist3下面的首頁(yè)
		location /r2 {
		  alias  dist3;
		#服務(wù)3:由于/allow-cost-calc 是真實(shí)路徑,所以用root,會(huì)訪問(wèn)/allow-cost-calc/dist2下面的首頁(yè)   
		#(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;
}

原文鏈接:https://blog.csdn.net/qq_38332722/article/details/123647654

欄目分類
最近更新