Nginx反向代理配置React前端与Python后端全过程_Python

前言

前后端分离项目里，前端通常是 react 打包后的静态资源，后端是 python（fastapi/flask）提供的 api。生产环境一般用 nginx 做统一入口：对外只暴露 80/443，静态资源由 nginx 直接返回，/api 等路径转发到后端进程，这样既能隐藏后端端口、又便于做 https 和缓存。

本文只讲 nginx 反向代理的核心配置思路和关键片段，不贴完整可运行 demo，便于快速接入和排查问题。

整体架构

客户端 → nginx:80/443
           ├── /         → 静态资源（react build 目录）
           └── /api      → 反向代理到 python 后端（如 127.0.0.1:8000）

前端：npm run build 后得到 build（或 dist）目录，配置 nginx 的 root 指向该目录。
后端：用 gunicorn/uvicorn 监听本机端口（如 8000），只对本机开放；nginx 用 proxy_pass 把 /api 转到该端口。

基础 server 与静态资源

在 nginx 的 conf.d 或 sites-available 下新建一个 server 块，例如：

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

    # 前端静态资源
    root /var/www/app/frontend/build;
    index index.html;

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

要点：

root：指向 react 打包后的目录，请求 / 或 /xxx 时，nginx 会先找对应文件，找不到再找目录，最后回退到 index.html，这样前端的 react router 才能正确处理浏览器直接访问或刷新子路径。
try_files：$uri 表示先找同名文件，$uri/ 表示找同名目录下的默认页，最后 /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：后端实际监听地址，若后端是 http://127.0.0.1:8000，且后端路由是 /api/xxx，这里写 http://127.0.0.1:8000 即可；若后端根路径是 /，则前端应请求 /api/xxx，nginx 会把 /api/xxx 原样转给后端，后端需挂载在 /api 下（如 fastapi 的 app = fastapi(prefix="/api")）或做路径重写。
x-forwarded-proto：若前面还有 https 终结，后端需要知道原始协议时，设为 $scheme，后端可信任该头做跳转或生成 url。
host：后端若按 host 做虚拟主机或校验，应传原始 host。

路径是否带 /api 的两种写法

方式一：前端请求 /api/xxx，后端也以 /api 为前缀

前端：axios.get('/api/users')
nginx：location /api { proxy_pass http://127.0.0.1:8000; }（注意末尾无斜杠）
转发到后端的请求路径仍是 /api/users，后端需挂载在 /api，例如 fastapi：app = fastapi(prefix="/api")

方式二：后端根路径是 /，nginx 做 strip

nginx：location /api/ { proxy_pass http://127.0.0.1:8000/; }（注意两边都有斜杠）
请求 /api/users 会被转成 http://127.0.0.1:8000/users，后端只需挂载 /users 等路由。

按你们前后端约定选一种即可，关键是 proxy_pass 末尾有没有斜杠、以及后端路由前缀要一致。

超时与 body 大小

若接口有上传或长耗时，可适当增大超时和 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 跳转

正式环境建议全站 https。用 certbot 申请证书后，可保留 80 仅做跳转：

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;
    }
}

常见问题

现象	可能原因	处理思路
刷新子路径 404	spa 未回退到 index.html	检查 `try_files` 最后是否指向 `/index.html`
接口 502	后端未启动或端口不对	确认 gunicorn/uvicorn 监听地址与 proxy_pass 一致
接口 404	路径前缀不一致	对照前端请求路径、nginx proxy_pass 末尾斜杠、后端 prefix
上传大文件失败	body 超限或超时	增大 `client_max_body_size` 与 proxy_*_timeout

总结

nginx 反向代理前后端分离项目：静态资源用 root + try_files 指向 react build 目录并回退到 index.html；/api 用 proxy_pass 转到 python 后端，并设置 host、x-real-ip、x-forwarded-proto 等头。注意 proxy_pass 末尾斜杠与后端路由前缀一致，按需调整超时与 body 大小，生产环境配合 https 与 80 跳转即可。

以上就是nginx反向代理配置react前端与python后端全过程的详细内容，更多关于nginx反向代理配置react与python的资料请关注代码网其它相关文章！