你辛辛苦苦寫好的 Vue 3 + Vite 專案，npm run build 之後得到一堆靜態檔案，丟上伺服器就能跑了。但當你的前端要呼叫後端 API、要處理跨域（CORS）、要同時跑多個服務，甚至要做 HTTPS 與流量分發時，光靠「靜態檔案 + 後端」就顯得不夠用了。這時候，Nginx 就是那個站在最前線、幫你把流量「接住、轉發、分配」的守門員。本篇帶你從零理解反向代理與負載均衡，並動手寫出一份能用的設定。
一、先搞懂：正向代理 vs 反向代理
很多人被這兩個名詞繞暈。最簡單的記法：
- 正向代理：替「客戶端」出門。例如你公司內網透過代理伺服器存取外網，外網看到的不是你，而是代理。
- 反向代理：替「伺服器端」擋門。使用者以為自己在跟 Nginx 打交道，其實 Nginx 把請求轉給後面的多台應用伺服器。使用者看不到後端真實位址。
對我們前端部署來說，需要的就是反向代理：把 /api 開頭的請求轉給後端，把其餘請求交給靜態頁面。
二、最小可運作的反向代理設定
步驟 1：安裝 Nginx（以 Ubuntu 為例）。
sudo apt update
sudo apt install nginx -y
sudo systemctl enable nginx步驟 2：建立站點設定檔 /etc/nginx/sites-available/myapp。
server {
listen 80;
server_name example.com;
# 前端靜態檔案
location / {
root /var/www/myapp/dist;
try_files $uri $uri/ /index.html;
}
# 反向代理到後端 API
location /api/ {
proxy_pass http://127.0.0.1:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}步驟 3：啟用並重新載入。
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx重點：try_files ... /index.html 是 Vue Router 用 history 模式時的標配，少了它重新整理深層路由會 404。
三、解決跨域：讓前端以同源呼叫 API
因為前端跑在 example.com、API 被 Nginx 轉到 example.com/api，對瀏覽器而言兩者「同源」，CORS 問題直接消失，前端程式碼可以寫相對路徑 /api/users，不用管後端 IP。
四、進階：用 upstream 做負載均衡
當單台後端撐不住，就讓 Nginx 把流量分給多台。步驟 1：定義上游群組。
upstream backend {
least_conn; # 轉給連線數最少的節點
server 127.0.0.1:3000;
server 127.0.0.1:3001;
server 127.0.0.1:3002;
}
server {
location /api/ {
proxy_pass http://backend/;
}
}可用策略：round_robin（預設輪詢）、least_conn（最少連線）、ip_hash（同一 IP 固定走同節點，適合有狀態會話）。
特別注意：負載均衡後若後端有 session，要嘛改用 ip_hash，要嘛把 session 抽到 Redis（前一篇我們講過 Redis 快取），否則使用者會被踢來踢去。
五、上線前的安全與效能小抄
- 開啟 Gzip 壓縮靜態資源，首屏體積直接少一半。
- 為靜態資源加長快取（
Cache-Control: immutable），靠檔名 hash 控版本。 - 正式環境務必補一層 HTTPS（Let’s Encrypt 免費），listen 443 + 證書。
重點：改完設定一定先 nginx -t 再 reload，reload 不中斷連線，千萬別隨便 restart。
互動話題：你在部署前端專案時，是習慣把 Nginx 當反向代理，還是直接交給 Docker / 雲端平台代管？留言告訴我你的部署組合！