nginx通過location配置代理的原理和實現(xiàn)方式
nginx通過location配置代理的原理和方式，是我們作為運(yùn)維人員需要熟知的內(nèi)容，前后端服務(wù)通過nginx作為橋梁互通訪問，今天我們分享一下具體使用場景。
一、場景一：單一網(wǎng)絡(luò)環(huán)境
1、互聯(lián)網(wǎng)環(huán)境
1）不用nginx負(fù)載
通過VsCode、Hbuilder、WebStorm 等前端開發(fā)工具 ，本地啟動啟動前端代碼，啟動后用默認(rèn)ip（localhost（127.0.0.1））、端口號8080或者是隨機(jī)生成的，前端頁面打開后，直接調(diào)用后端接口，接口的ip地址可以直接寫在代碼里，自動觸發(fā)直接訪問后端服務(wù)。前端代碼一般會使用相對路徑或者沒有完整寫出 IP 和端口的接口地址，比如：
axios.get('/api/user') 這種情況下：前端系統(tǒng)會根據(jù)你當(dāng)前運(yùn)行的環(huán)境來推斷請求的地址。如果你是通過 HBuilder 啟動本地開發(fā)環(huán)境（如使用 HBuilderX 直接啟動或者 npm run dev ），它會根據(jù)默認(rèn)的開發(fā)服務(wù)器（通常是 localhost 或 127.0.0.1）來拼接出完整的請求 URL。請求會默認(rèn)發(fā)送到：
http://localhost:8080/api/user
（假設(shè)你的本地服務(wù)器是在 8080 端口上運(yùn)行的）。這個過程本質(zhì)上是因為瀏覽器或應(yīng)用會將請求的路徑補(bǔ)充為完整的 URL，基于當(dāng)前運(yùn)行環(huán)境的 IP 和端口來自動推導(dǎo)。
假如：你在代碼中明確指定了完整的后端接口地址，例如：
axios.get('http://192.168.1.100:3000/api/user')此時，無論你是在本地開發(fā)還是部署到服務(wù)器，前端代碼都會按照這個地址去發(fā)送請求。此時，前端不會再使用默認(rèn)的地址和端口，因為你已經(jīng)顯式提供了完整的域名/IP 和端口。這意味著，在這種情況下，系統(tǒng)不會再進(jìn)行自動拼接，并且請求會直接發(fā)送到你指定的后端地址，而不會涉及默認(rèn)的本地地址。
2）使用nginx代理前端代碼
此環(huán)境中把前端代碼打包后放到nginx負(fù)載包下面的html文件夾下面，nginx.conf 配置文件中簡單的配置一下代理地址。
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/build-f/build/web; #效果
index index.html index.htm;
}
}前端代碼通過nginx，后端代碼直接在瀏覽器請求了，不經(jīng)過nginx負(fù)載了。
3）使用nginx代理前后端代碼
如果后端的API接口也要通過nginx代理，那么需要額外添加配置
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/build-jt-f/build-jt/web; #效果
index index.html index.htm;
}
# 后臺請求接口轉(zhuǎn)發(fā)到接口地址
location /nandao/url1Server {
#add_header 'Access-Control-Allow-Origin' '*';
#add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
proxy_pass http://localhost:8888/;
rewrite ^/nandao/url1Server/(.*) /$1 break;
}
}這樣配置之后的運(yùn)行邏輯如下：
- 瀏覽器上顯示的請求地址如下：
http://localhost:8081/nandao/url1Server/basin/selectCity?code=010
- 經(jīng)過nginx后實際請求后端接口的全路徑如下：
http://localhost:8888/basin/selectCity?code=010
即：http://localhost:8081 換成 http://localhost:8888，然后 /nandao/url1Server/ 字符串去掉！
2、局域網(wǎng)環(huán)境
全局域網(wǎng)環(huán)境和互聯(lián)網(wǎng)環(huán)境類似，不牽涉到網(wǎng)絡(luò)問題，思路是一致的。
二、場景二：多種網(wǎng)絡(luò)環(huán)境
1、頁面端互聯(lián)網(wǎng)訪問局域網(wǎng)
前后端服務(wù)均部署到局域網(wǎng)，現(xiàn)在要配置通過互聯(lián)網(wǎng)域名訪問局域網(wǎng)的應(yīng)用。
一般有以下幾個方案：配置NAT和端口映射（一般通過路由器）、配置反向代理（使用Nginx或其他代理服務(wù)器）、使用VPN（虛擬專用網(wǎng)絡(luò)）、通過公網(wǎng)IP直接訪問（如果有公網(wǎng)IP）。
此處我們分析常用的nginx反向代理：在公網(wǎng)可訪問的服務(wù)器上部署 Nginx，配置反向代理，將用戶請求轉(zhuǎn)發(fā)到局域網(wǎng)內(nèi)的應(yīng)用。
假設(shè)你已經(jīng)將公網(wǎng)域名 yourdomain.com 解析到 Nginx 服務(wù)器上，Nginx 配置文件如下：
server {
listen 80;
server_name yourdomain.com;
#http://yourdomain.com 轉(zhuǎn)發(fā)到 http://192.168.1.100:8080
location / {
proxy_pass http://192.168.1.100:8080; # 將請求轉(zhuǎn)發(fā)到內(nèi)網(wǎng)應(yīng)用
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
#http://yourdomain.com/nandao 轉(zhuǎn)發(fā)到 http://192.168.1.100:8080/nandao
location /nandao {
proxy_pass http://192.168.1.100:8080; # 將請求轉(zhuǎn)發(fā)到內(nèi)網(wǎng)應(yīng)用
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
#http://yourdomain.com/nandao 轉(zhuǎn)發(fā)到 http://192.168.1.100:8080
location /nandao {
proxy_pass http://192.168.1.100:8080; # 將請求轉(zhuǎn)發(fā)到內(nèi)網(wǎng)應(yīng)用
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^/nandao/(.*) /$1 break;
}
}注意：http://192.168.1.100:8080 此地址在改服務(wù)器上可以 telnet 通。（服務(wù)器有內(nèi)網(wǎng)、外網(wǎng)、浮動ip的區(qū)別）
2、API接口代理轉(zhuǎn)發(fā)
接著上面的流程：轉(zhuǎn)發(fā)到 nginx后 192.168.1.100:8080 ，前端頁面和后端接口
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/build-jt-f/build-jt/web; #效果
index index.html index.htm;
}
# 后臺請求接口轉(zhuǎn)發(fā)到接口地址
location /nandao/url1Server {
#add_header 'Access-Control-Allow-Origin' '*';
#add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
proxy_pass http://localhost:8888/;#或者是其他ip,其他此服務(wù)器里可以ping 通
rewrite ^/nandao/url1Server/(.*) /$1 break;
}
}三、匹配規(guī)則
默認(rèn)匹配：
server {
listen 8081;
server_name localhost;
location / {
root html/build-jt-f/build-jt/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
#?頁面訪問地址http://localhost:8081/nandao/沒有/nandao/ 模塊配置時，請求會默認(rèn)匹配 location /，Nginx 會將 /nandao/ 轉(zhuǎn)發(fā)到 html/build-jt-f/build-jt/web/nandao/ 目錄下查找靜態(tài)文件。
server {
listen 8081;
server_name localhost;
location / {
alias html/build-jt-f/build-jt/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}如果是alias 參數(shù)：
- 使用
alias指令時，Nginx 會將請求路徑中的/nandao/前綴替換為alias指定的路徑。 - 指定了靜態(tài)文件的實際目錄，
/nandao/前綴被移除，路徑變?yōu)?html/build-jt-f/build-jt/web/。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
goaccess 工具提供快速、多樣的HTTP狀態(tài)統(tǒng)計，可以令管理員不再糾結(jié)于統(tǒng)計各類數(shù)據(jù)，和繁雜的指令以及一大堆管道/正則表達(dá)式說再見，今天通過本文給大家介紹goaccess 分析nginx 日志的方法，需要的朋友一起看看吧2021-07-07
本文主要介紹了nginx?Rewrite重寫地址的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Linux搭建Nginx反向代理服務(wù)器的實戰(zhàn)指南
在現(xiàn)代Web架構(gòu)中,Nginx作為高性能的反向代理服務(wù)器,早已成為互聯(lián)網(wǎng)基礎(chǔ)設(shè)施的重要組成部分,本篇博客將從零開始,帶你一步步在Linux系統(tǒng)上搭建一個完整的 Nginx 反向代理環(huán)境,并結(jié)合Java后端服務(wù)進(jìn)行實際演示,需要的朋友可以參考下2026-04-04
nginx 負(fù)載均衡的三種參數(shù)設(shè)置
這篇文章主要介紹了nginx 負(fù)載均衡的三種參數(shù)設(shè)置,需要的朋友可以參考下2017-07-07
詳解nginx 的 default_server 定義及匹配規(guī)則
這篇文章主要介紹了詳解nginx 的 default_server 定義及匹配規(guī)則，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Nginx作為最流行的Web服務(wù)器之一,其靈活的日志配置能力允許我們根據(jù)需求定制日志格式,本文將詳細(xì)介紹如何配置Nginx以JSON格式記錄訪問日志,這種結(jié)構(gòu)化日志格式特別適合ELK等日志分析系統(tǒng)處理,感興趣的朋友一起看看吧2025-03-03
下面小編就為大家分享一篇基于Nginx 反向代理獲取真實IP的問題詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了nginx中使用lua腳本的方法,本文介紹通過第三方模塊lua-nginx-module實現(xiàn)lua腳本在nginx的調(diào)用,并附一個配置例子,需要的朋友可以參考下2014-07-07
想讓Nginx支持中文文件名首先得讓你的系統(tǒng)有中語語言包,設(shè)置前可以執(zhí)行：locale 看一下，如果顯示是en_US.UTF-8，即是正常，不用按下面的步驟設(shè)置2013-06-06
Keepalived+Nginx雙機(jī)配置小結(jié)
本文主要介紹了Keepalived+Nginx雙機(jī)配置小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-03-03