nginx conf配置

配置把“前端靜態(tài)文件”和“后端接口”統(tǒng)一收在 同一個 server{} 塊 里，通過 兩條 location 做分流，其中 /api 這條 location 用到了一點“小技巧”把路徑裁掉后再轉(zhuǎn)發(fā)。

下面按執(zhí)行順序逐句拆解，告訴你“請求是怎么被轉(zhuǎn)發(fā)到 127.0.0.1:8081 的”。

1、全局上下文

worker_processes  1;          # 只啟 1 個 worker 進程（單核開發(fā)機夠用）
events { worker_connections 1024; }  # 每個 worker 同時維持 1024 條連接
http { … }                    # 下面所有指令都屬于 http 層

2、監(jiān)聽端口與主機名

server {
    listen       8080;        # 瀏覽器訪問 http://localhost:8080
    server_name  localhost;
    …
}

3、前端靜態(tài)資源定位

location / {
    root   html/hmdp;         # 把 “/” 映射到 $NGINX_HOME/html/hmdp
    index  index.html index.htm;
}

• 請求 http://localhost:8080/ → nginx 在 html/hmdp/index.html 找文件并返回。
• 所有 JS/CSS/圖片只要路徑不以 /api 開頭，都走這條規(guī)則。

4、后端接口轉(zhuǎn)發(fā)（核心）

location /api { … }

當(dāng) URI 以 /api 開頭時，進入該上下文，下面每一步都決定了“如何轉(zhuǎn)發(fā)”。

4.1 剝離前綴

rewrite /api(/.*) $1 break;

• 正則把 /api/user/login 捕獲成 /user/login 并存入 $1。

break 表示不再重新搜索 location，在當(dāng)前 location 內(nèi)繼續(xù)執(zhí)行。

結(jié)果：nginx 內(nèi)部把 URI 改成 /user/login，但瀏覽器地址欄仍是 /api/user/login。

4.2 設(shè)置代理協(xié)議版本

proxy_http_version 1.1;

開啟 HTTP/1.1，才能使用長連接（keep-alive），減少反復(fù)握手。

4.3 打開請求頭透傳

proxy_pass_request_headers on;

默認(rèn)就是 on，寫在這里為了顯式強調(diào)：瀏覽器發(fā)來的所有頭（Cookie、Authorization…）都會原樣送到后端。

4.4 指定上游地址

proxy_pass http://127.0.0.1:8081;

• 把已經(jīng) rewrite 過的 /user/login 直接發(fā)給本機 8081 端口。
• 如果這里寫成 http://backend 就會走下面定義的 upstream 負(fù)載均衡，但作者注釋掉了。

4.5 失敗重試

proxy_next_upstream error timeout;

只有寫 proxy_pass http://backend 且 upstream 里有多臺機器時，這條才會觸發(fā)“換下一臺重試”。目前只有一臺，寫不寫效果一樣。

4.6 keep-alive 連接池

keepalive_timeout   30s;
keepalive_requests  1000;

告訴 nginx“與后端 8081 保持長連接，最多復(fù)用 1000 次或 30 s 超時再關(guān)閉”，減少 TCP 三次握手開銷。

5、upstream 塊（備用）

upstream backend {
    server 127.0.0.1:8081 max_fails=5 fail_timeout=10s weight=1;
}

• 目前只有一臺，實際沒用到。
• 如果想水平擴容，再寫一行 server 127.0.0.1:8082 …，然后把 proxy_pass http://127.0.0.1:8081 改成 proxy_pass http://backend 即可自動輪詢+故障摘除。

6、錯誤頁

error_page 500 502 503 504 /50x.html;
location = /50x.html { root html; }

后端 8081 掛掉或返回 50x 時，nginx 會把 html/50x.html 的內(nèi)容返回給瀏覽器，避免裸錯。

7、請求完整生命周期舉例

瀏覽器輸入：

http://localhost:8080/api/user/login

nginx 監(jiān)聽 8080，收到 GET /api/user/login

匹配 location /api → 進入該上下文

rewrite 把 URI 改成 /user/login

proxy_pass http://127.0.0.1:8081 → 發(fā)請求 GET /user/login 給后端

后端返回 JSON → nginx 原樣返給瀏覽器（因為 default_type application/json 只是響應(yīng)頭兜底，實際后端返回什么 Content-Type 就按什么走）

一句話總結(jié)：

“先 rewrite 去掉 /api 前綴，再用 proxy_pass 把剩余路徑轉(zhuǎn)發(fā)到 127.0.0.1:8081，同時開啟 HTTP1.1 長連接和失敗重試機制”——這就是該配置實現(xiàn)“前端請求轉(zhuǎn)發(fā)給后端”的全部秘密。

不用在IDEA里把“127.0.0.1:8081”寫死到代碼里；

IDEA 只負(fù)責(zé)把 Spring Boot（或你用的框架）啟動在 8081 端口即可，剩下的由 Nginx 來“敲門”。

1、IDEA 側(cè)該做什么

保證項目 application.yml / application.properties 里端口是 8081：

server:
  port: 8081

• 直接點 ?? Run 或 Debug，讓服務(wù)在 8081 端口處于 LISTEN 狀態(tài)。

2、驗證端口是否已開啟

# macOS / Linux
lsof -i:8081
# Windows
netstat -ano | findstr 8081

看到 LISTEN 就說明 IDEA 已經(jīng)把后端程序跑起來了，Nginx 隨時可以把 /api 請求轉(zhuǎn)發(fā)過來。

3、什么時候才需要在 IDEA 里配“外部地址”

你本地調(diào)試前端頁面，但想讓前端直接調(diào) IDEA 里的后端（不走 Nginx），

才在前端 .env 或 vite.config 里寫：

VITE_API_BASE = 'http://127.0.0.1:8081'

這只是開發(fā)階段的瀏覽器→后端直連，與 Nginx 無關(guān)。

一旦用 Nginx 做反向代理，前端就統(tǒng)一訪問 http://localhost:8080/api/...，由 Nginx 轉(zhuǎn)發(fā)到 IDEA 的 8081，代碼/IDEA 側(cè)無需再感知 127.0.0.1:8081。

一句話總結(jié)：

IDEA 只要把項目跑在 8081 端口就行，不需要也不推薦把“127.0.0.1:8081”硬編碼到后端代碼里；Nginx 自己會來“敲門”。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論