应按开发、测试、生产环境用途分离配置Nginx：开发环境用本地Nginx代理替代devServer，监听同源端口并设置真实请求头；测试环境通过路径前缀路由多后端服务；生产环境静态托管加API反向代理，必要时动态注入运行时配置。
不需要一套配置硬切多环境，而是按开发、测试、生产各自目标分别配置 Nginx，才能真正稳定可靠。关键在“用途分离”：开发重联调与真实链路模拟，生产重安全、性能与可追溯。
开发环境：本地 Nginx 代理替代 devServer
适用于后端未开 CORS、或需复现网关鉴权/SLB 转发逻辑的场景。不依赖前端框架代理，更贴近线上行为。
- 监听与前端同源端口（如 8080），避免浏览器跨域拦截
- 用
location /api/拦截请求，proxy_pass转发到测试后端（如http://test-api.example.com/） - 必须设置
proxy_set_header Host $host、X-Real-IP $remote_addr、X-Forwarded-For $proxy_add_x_forwarded_for，确保后端拿到真实客户端信息 - 若需 WebSocket 支持，额外加
proxy_http_version 1.1和proxy_set_header Upgrade $http_upgrade
测试/预发环境：路径前缀区分多后端服务
当项目需对接多个后端系统（如用户中心、订单服务、报表服务），用路径前缀实现清晰路由，比拼接环境变量更直观可控。
- 在 Nginx 中为每个服务定义独立
location块：/api-user/→ 用户服务，/api-order/→ 订单服务 -
proxy_pass地址末尾带 /（如http://user-svc:8080/），表示自动剥离前缀并重写路径 - 前端 axios 封装时按前缀设置
baseURL，请求/api-user/login自动命中对应代理规则 - 避免在测试环境使用
sub_filter注入变量——构建时固化更稳妥
生产环境：静态托管 + API 反向代理分离
React/Vue 构建产物是纯静态文件，Nginx 需同时完成两件事：托管 HTML/JS/CSS，并把 API 请求精准转发到线上后端。
-
root指向构建输出目录（如/var/www/my-app），配合try_files $uri $uri/ /index.html支持前端路由 -
location /api/单独配置，proxy_pass https://api.prod.com/（注意结尾 /） - 若必须一份包部署多环境（如运维一键切正式/预发），才启用
sub_filter注入window.__RUNTIME_CONFIG__ - 务必关闭 gzip 对
sub_filter的干扰：gzip off;或设置gzip_proxied no;
进阶：动态终端映射（适合 IoT/边缘设备场景）
当后端服务数量多、IP 经常变动（如摄像头、传感器），用 map 指令集中管理路由，避免反复改配置重启。
- 在
http块中定义映射表：map $arg_device $backend { device_a http://192.168.1.100:8080; device_b http://192.168.1.101:8080; default http://192.168.1.100:8080; } - 在
server块中用location /device/接收请求，通过proxy_pass $backend动态转发 - 配合参数校验（如
if ($arg_device = "") { return 400; }），提升健壮性
