nginx conf配置

配置把“前端靜態文件”和“后端接口”統一收在 同一個 server{} 塊 里，通過 兩條 location 做分流，其中 /api 這條 location 用到了一點“小技巧”把路徑裁掉后再轉發。下面按執行順序逐句拆解，告訴你“請求是怎么被轉發到 127.0.0.1:8081 的”。

---

1. 全局上下文

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

---

2. 監聽端口與主機名

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

---

3. 前端靜態資源定位

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

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

---

4. 后端接口轉發（核心）

location /api { … }

當 URI 以 /api 開頭時，進入該上下文，下面每一步都決定了“如何轉發”。

4.1 剝離前綴

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

• 正則把 /api/user/login 捕獲成 /user/login 并存入 $1。
• break 表示不再重新搜索 location，在當前 location 內繼續執行。
  結果：nginx 內部把 URI 改成 /user/login，但瀏覽器地址欄仍是 /api/user/login。

4.2 設置代理協議版本

proxy_http_version 1.1;

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

4.3 打開請求頭透傳

proxy_pass_request_headers on;

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

4.4 指定上游地址

proxy_pass http://127.0.0.1:8081;

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

4.5 失敗重試

proxy_next_upstream error timeout;

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

4.6 keep-alive 連接池

keepalive_timeout   30s;
keepalive_requests  1000;

告訴 nginx“與后端 8081 保持長連接，最多復用 1000 次或 30 s 超時再關閉”，減少 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 的內容返回給瀏覽器，避免裸錯。

---

7. 請求完整生命周期舉例
   瀏覽器輸入：
   http://localhost:8080/api/user/login

8. nginx 監聽 8080，收到 GET /api/user/login

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

10. rewrite 把 URI 改成 /user/login

11. proxy_pass http://127.0.0.1:8081 → 發請求 GET /user/login 給后端

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

---

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

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

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

---

1. IDEA 側該做什么

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

  server:port: 8081
  

• 直接點 ?? Run 或 Debug，讓服務在 8081 端口處于 LISTEN 狀態。

---

2. 驗證端口是否已開啟

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

看到 LISTEN 就說明 IDEA 已經把后端程序跑起來了，Nginx 隨時可以把 /api 請求轉發過來。

---

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

• 你本地調試前端頁面，但想讓前端直接調 IDEA 里的后端（不走 Nginx），
  才在前端 .env 或 vite.config 里寫：

  VITE_API_BASE = 'http://127.0.0.1:8081'
  

  這只是開發階段的瀏覽器→后端直連，與 Nginx 無關。

• 一旦用 Nginx 做反向代理，前端就統一訪問 http://localhost:8080/api/...，
  由 Nginx 轉發到 IDEA 的 8081，代碼/IDEA 側無需再感知 127.0.0.1:8081。

---

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