前言

前后端分離項目里，前端通常是 React 打包后的靜態(tài)資源，后端是 Python（FastAPI/Flask）提供的 API。生產(chǎn)環(huán)境一般用 Nginx 做統(tǒng)一入口：對外只暴露 80/443，靜態(tài)資源由 Nginx 直接返回，/api 等路徑轉(zhuǎn)發(fā)到后端進程，這樣既能隱藏后端端口、又便于做 HTTPS 和緩存。

本文只講 Nginx 反向代理的核心配置思路和關(guān)鍵片段，不貼完整可運行 Demo，便于快速接入和排查問題。

整體架構(gòu)

客戶端 → Nginx:80/443
           ├── /         → 靜態(tài)資源（React build 目錄）
           └── /api      → 反向代理到 Python 后端（如 127.0.0.1:8000）

• 前端：npm run build 后得到 build（或 dist）目錄，配置 Nginx 的 root 指向該目錄。
• 后端：用 Gunicorn/Uvicorn 監(jiān)聽本機端口（如 8000），只對本機開放；Nginx 用 proxy_pass 把 /api 轉(zhuǎn)到該端口。

基礎(chǔ) server 與靜態(tài)資源

在 Nginx 的 conf.d 或 sites-available 下新建一個 server 塊，例如：

server {
    listen 80;
    server_name your-domain.com;

    # 前端靜態(tài)資源
    root /var/www/app/frontend/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

要點：

• root：指向 React 打包后的目錄，請求 / 或 /xxx 時，Nginx 會先找對應(yīng)文件，找不到再找目錄，最后回退到 index.html，這樣前端的 React Router 才能正確處理瀏覽器直接訪問或刷新子路徑。
• try_files：$uri 表示先找同名文件，$uri/ 表示找同名目錄下的默認(rèn)頁，最后 /index.html 交給 SPA 自己路由。

反向代理 /api 到 Python 后端

在同一個 server 里增加 location /api：

location /api {
    proxy_pass http://127.0.0.1:8000;
    proxy_http_version 1.1;
    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;
}

要點：

• proxy_pass：后端實際監(jiān)聽地址，若后端是 http://127.0.0.1:8000，且后端路由是 /api/xxx，這里寫 http://127.0.0.1:8000 即可；若后端根路徑是 /，則前端應(yīng)請求 /api/xxx，Nginx 會把 /api/xxx 原樣轉(zhuǎn)給后端，后端需掛載在 /api 下（如 FastAPI 的 app = FastAPI(prefix="/api")）或做路徑重寫。
• X-Forwarded-Proto：若前面還有 HTTPS 終結(jié)，后端需要知道原始協(xié)議時，設(shè)為 $scheme，后端可信任該頭做跳轉(zhuǎn)或生成 URL。
• Host：后端若按 Host 做虛擬主機或校驗，應(yīng)傳原始 Host。

路徑是否帶 /api 的兩種寫法

方式一：前端請求 /api/xxx，后端也以 /api 為前綴

• 前端：axios.get('/api/users')
• Nginx：location /api { proxy_pass http://127.0.0.1:8000; }（注意末尾無斜杠）
• 轉(zhuǎn)發(fā)到后端的請求路徑仍是 /api/users，后端需掛載在 /api，例如 FastAPI：app = FastAPI(prefix="/api")

方式二：后端根路徑是 /，Nginx 做 strip

• Nginx：location /api/ { proxy_pass http://127.0.0.1:8000/; }（注意兩邊都有斜杠）
• 請求 /api/users 會被轉(zhuǎn)成 http://127.0.0.1:8000/users，后端只需掛載 /users 等路由。

按你們前后端約定選一種即可，關(guān)鍵是 proxy_pass 末尾有沒有斜杠、以及后端路由前綴要一致。

超時與 body 大小

若接口有上傳或長耗時，可適當(dāng)增大超時和 body 限制：

location /api {
    proxy_pass http://127.0.0.1:8000;
    proxy_connect_timeout 60s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;
    client_max_body_size 20M;
    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;
}

HTTPS 與 80 跳轉(zhuǎn)

正式環(huán)境建議全站 HTTPS。用 Certbot 申請證書后，可保留 80 僅做跳轉(zhuǎn)：

server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain.com;
    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;

    root /var/www/app/frontend/build;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

常見問題

總結(jié)

Nginx 反向代理前后端分離項目：靜態(tài)資源用 root + try_files 指向 React build 目錄并回退到 index.html；/api 用 proxy_pass 轉(zhuǎn)到 Python 后端，并設(shè)置 Host、X-Real-IP、X-Forwarded-Proto 等頭。注意 proxy_pass 末尾斜杠與后端路由前綴一致，按需調(diào)整超時與 body 大小，生產(chǎn)環(huán)境配合 HTTPS 與 80 跳轉(zhuǎn)即可。

以上就是Nginx反向代理配置React前端與Python后端全過程的詳細(xì)內(nèi)容，更多關(guān)于Nginx反向代理配置React與Python的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論