本文详解如何通过 Nginx 精确路由，实现 example.com/ 直接提供静态 HTML 落地页，而 example.com/app/* 等路径透明代理至本地运行的 React 开发服务器（如 localhost:3000），彻底规避重定向循环与 404 问题。
本文详解如何通过 nginx 精确路由，实现 `example.com/` 直接提供静态 html 落地页，而 `example.com/app/*` 等路径透明代理至本地运行的 react 开发服务器（如 `localhost:3000`），彻底规避重定向循环与 404 问题。
在单域名多用途部署场景中（例如：营销落地页 + 用户应用系统），需严格区分请求路径的语义归属。Nginx 的 location 匹配机制遵循最长前缀匹配 + 精确匹配优先原则——这意味着 location = /（精确匹配根路径）必须显式声明，且其配置需完整可靠；而泛用型 location /（匹配所有路径）若未加约束，将无差别捕获全部请求，导致静态资源被错误代理至后端服务，引发重定向循环或 404。
以下为经过生产验证的 Nginx 配置方案，核心思路是：用精确匹配 location = / 处理首页，用带前缀的路径（如 /app/）专用于 React 应用代理，避免任何路径交叠：
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;
server_name somedomain.com;
# 默认索引文件
index index.html index.htm;
# ✅ 精确匹配根路径：直接服务静态落地页
location = / {
root /var/www/welcome; # 确保该目录下存在 index.html
try_files $uri $uri/ =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/; # 注意末尾斜杠：确保路径重写正确
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# ⚠️ 可选：拒绝其他非预期路径（提升安全性）
location / {
return 404;
}
}
# HTTP → HTTPS 强制跳转（Certbot 标准配置）
server {
listen 80;
listen [::]:80;
server_name somedomain.com;
return 301 https://$server_name$request_uri;
}关键要点说明
- location = / 必须显式定义：= 表示精确匹配，仅响应 GET / 请求，不会干扰 /app/ 或 /css/style.css 等路径。
- proxy_pass 末尾斜杠至关重要：proxy_pass http://127.0.0.1:3000/; 中的 / 会剥离原始 URI 的 /app/ 前缀，使 React 应用实际收到 /login 而非 /app/login，从而兼容其默认路由逻辑。
-
React 应用需适配基础路径：在 package.json 中添加 "homepage": "/app"，并确保路由库（如 React Router）使用
初始化，否则前端导航将失效。 - 避免 location / 泛匹配：原配置中该块会吞噬所有请求（包括 /），是重定向循环的根源；现改用 location / 作为兜底 404，更安全可控。
- 静态资源权限检查：确认 /var/www/welcome 目录对 Nginx 工作进程（通常是 www-data 或 nginx 用户）具有读取权限，否则返回 403。
完成配置后，执行 sudo nginx -t && sudo systemctl reload nginx 验证并热重载。访问 https://somedomain.com 将展示静态落地页；访问 https://somedomain.com/app/login 则无缝加载 React 应用——路径语义清晰、职责分离明确、运维可维护性强。
