![](https://developer.qcloudimg.com/http-save/yehe-8235133/939b5256cfa0aeb159efebdfe94c1d4d.jpg)

## 前言

前后端分离项目里，前端通常是 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` 块，例如：

```nginx
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`：

```nginx
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 限制：

```nginx
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 仅做跳转：

```nginx
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 跳转即可。

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

Nginx 反向代理配置 React 前端与 Python 后端

全栈

前端

后端

网络与通信

本文详解Nginx配置前后端分离项目：静态资源指向React打包目录，/api请求通过proxy_pass转发到Python后端。重点解析try_files处理SPA路由、proxy_pass路径规则、超时与上传文件配置，以及HTTPS最佳实践。提供常见问题排查思路，帮助开发者快速部署生产环境。

虚拟主机

路由

Python

4核4G3M云服务器 新用户低至38元/年！

lighthouse

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Nginx 反向代理配置 React 前端与 Python 后端-腾讯云开发者社区-腾讯云

Nginx 反向代理配置 React 前端与 Python 后端

Nginx 反向代理配置 React 前端与 Python 后端

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐