本文详解如何通过 Nginx 精确配置 location 块，使根路径（/）服务静态 HTML 落地页，而特定子路径（如 /app/）反向代理至本地 React 开发服务器，彻底避免重定向循环与 404 错误。
本文详解如何通过 nginx 精确配置 location 块，使根路径（`/`）服务静态 html 落地页，而特定子路径（如 `/app/`）反向代理至本地 react 开发服务器，彻底避免重定向循环与 404 错误。
在实际部署中，将静态 landing page 与正在开发的 React 应用共存于同一域名下是一种常见需求——例如 somedomain.com 展示营销首页，而 somedomain.com/app/（或 /login、/dashboard 等）加载交互式 React 应用。但若直接使用模糊的 location / 作为兜底规则，Nginx 会因最长前缀匹配优先级机制导致根请求（/）被错误捕获并转发至 localhost:3000，从而引发重定向循环（浏览器不断尝试访问 /index.html 或触发 React Router 的 fallback 逻辑），甚至返回 404。
根本原因在于：location / 是一个通用前缀匹配，它会匹配所有 URI（包括 /），且其优先级高于 location = / 仅当后者未显式启用 try_files 或未正确终止请求流时。因此，必须确保：
- 根路径 location = / 明确限定为精确匹配；
- 使用 try_files 指令安全地服务静态文件，防止意外回退到后续 location；
- React 应用的代理路径需具备明确前缀（如 /app/），并与前端路由配置对齐；
- 避免 location / 类型的无差别兜底规则，改用更具体的路径或 location ^~ 等更可控的匹配方式。
以下是经过验证的生产就绪型 Nginx 配置（HTTPS server 块）：
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
# SSL 配置（证书路径、协议等略，按 Certbot 或手动配置填充）
ssl_certificate /etc/letsencrypt/live/somedomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/somedomain.com/privkey.pem;
# ... 其他 SSL 安全头（如 HSTS、OCSP stapling）建议一并启用
server_name somedomain.com;
# 默认索引文件
index index.html index.htm;
# ✅ 精确匹配根路径：仅响应 GET /，不继承后续 location
location = / {
root /var/www/welcome; # 静态文件根目录（含 index.html）
try_files $uri $uri/ =404; # 严格查找，不存在则返回 404，不转发
}
# ✅ 前缀匹配 React 应用入口：所有以 /app/ 开头的请求均代理
location ^~ /app/ {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:3000/; # 注意末尾斜杠：剥离 /app/ 前缀再转发
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}
# ? 可选：为 SPA 路由提供 fallback（如需支持 /app/login 直接访问）
# 此处无需额外配置，因 React Router 的 BrowserRouter 已处理客户端路由
}⚠️ 关键细节说明：
- location = / 中的 = 表示精确匹配，优先级最高，确保 / 不被 location /app/ 或其他规则干扰；
- location ^~ /app/ 使用 ^~ 前缀匹配，表示“一旦匹配即停止搜索更长的正则 location”，性能更优且语义清晰；
- proxy_pass 末尾的 / 至关重要：http://127.0.0.1:3000/ 会将 /app/login 重写为 /login 发送给 React 服务；若省略，则转发完整路径，导致 React 服务收到 /app/login 而无法识别；
- try_files $uri $uri/ =404 防止 Nginx 在找不到 index.html 时隐式跳转至 location /，是打破循环的核心防护。
此外，React 应用需同步适配此路径结构：
- 在 package.json 中添加 "homepage": "/app"，确保构建产物中资源路径（JS/CSS）以 /app/ 为前缀；
- 若使用 BrowserRouter，初始化时传入 basename="/app"：
import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter basename="/app"> <App /> </BrowserRouter>, document.getElementById('root') );
最后，HTTP → HTTPS 强制跳转的 server 块可保持原样（Certbot 生成部分），但建议移除重复的 if 块（Certbot v1.12+ 已优化），精简为单条 return 301 https://$host$request_uri; 即可。
通过以上配置，您将获得清晰、稳定、符合 Web 最佳实践的双应用路由策略：静态内容轻量高效，动态应用隔离可控，且完全规避了 Nginx location 匹配陷阱。
