Nginx多個前端服務(wù)配置方式詳解
需求
有多個前端服務(wù)需要通過Nginx部署。
Nginx多個前端服務(wù)配置方式
可以通過多個server配置或者多個location配置來配置多個前端服務(wù)。
多個location配置
location中root和alias的區(qū)別:location后面的路徑是真實路徑用root,虛擬路徑用alias
真實路徑就是本地訪問地址里面有的路徑
例如vue前端
服務(wù)設(shè)置了publicPath='/allow-cost-calc'
,
前端訪問路徑為:http://localhost:8005/allow-cost-calc/#/login,/allow-cost-calc
就是真實路徑,則使用 location /allow-cost-calc
配置時里面使用root
來指定前端服務(wù)路徑(如下服務(wù)3配置)。
若前端訪問路徑為:http://localhost:8005/#/login,如果此時我們使用root
來配置,那么location后面的路徑只能使用真實路徑,只能使用 /
,但是多個服務(wù)配置時/
有可能已被使用(例如下面被服務(wù)1配置了),所以需要使用虛擬路徑來配置,如下服務(wù)2配置:使用/s2 來作為虛擬路徑,使用alias
來指定服務(wù)位置,部署后的訪問方式要帶上虛擬路徑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; #服務(wù)1 location / { root dist; index index.html; } #服務(wù)2:由于/r2 是虛擬路徑,所以用alias,會為訪問dist3下面的首頁 location /r2 { alias dist3; #服務(wù)3:由于/allow-cost-calc 是真實路徑,所以用root,會訪問/allow-cost-calc/dist2下面的首頁 #(vue打包時設(shè)置了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配置
每個前端服務(wù)獨自使用一個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多個前端服務(wù)配置的文章就介紹到這了,更多相關(guān)Nginx配置多個前端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ubuntu上配置Nginx+PHP5 FastCGI服務(wù)器配置
ubuntu上配置Nginx+PHP5 FastCGI服務(wù)器配置方法, 需要的朋友可以參考下。2010-06-06解決Nginx無法啟動 -10013: An attempt was
這篇文章主要給大家介紹了解決用nginx -t 發(fā)成Nginx無法啟動報錯10013: An attempt was made to access a socket in a way forbidden by its access permissions的問題,需要的朋友可以參考下2023-11-11nginx配置將HTTPS請求轉(zhuǎn)換成HTTP的方法實現(xiàn)
Nginx是一個很流行、很強大的代理軟件,我們可以借助Nginx,設(shè)置 http強轉(zhuǎn)https,本文就來詳細的介紹一下,感興趣的可以了解一下2023-09-09HTTP 499 狀態(tài)碼 nginx下 499錯誤的解決辦法
HTTP狀態(tài)碼出現(xiàn)499錯誤有多種情況,499錯誤是什么?Nginx 499錯誤的原因及解決方法,下面跟著腳本之家小編一起學(xué)習(xí)吧2016-06-06