Nginx 反向代理配置 React 前端与 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 的 ）或做路径重写。
