Nginx同时提供静态文件服务和反向代理是前后端分离部署的标准做法，核心是用不同location规则分流请求：/api/等路径代理至后端，其余路径从本地目录读取静态文件并支持SPA路由回退。
Nginx 同时提供静态文件服务和反向代理，是前后端分离部署的标准做法。核心在于用不同 location 规则分流请求：前端资源走本地磁盘，API 请求转发给后端服务。
明确区分两类请求路径
Nginx 不会自动判断该返回文件还是转发请求，必须靠 location 匹配规则显式定义。常见约定是：
- 所有
/api/、/prod-api/、/v1/等带前缀的路径 → 反向代理到后端 - 其他路径（如
/,/assets/,/static/）→ 尝试从本地目录读取静态文件
配置静态资源服务（含单页应用支持）
location / {
root /var/www/frontend/dist;
index index.html;
try_files $uri $uri/ /index.html;
}-
root指定前端构建产物根目录 -
try_files是关键：先找真实文件（$uri），再找目录（$uri/），最后 fallback 到index.html，确保 Vue/React 路由刷新不 404
配置反向代理（注意斜杠细节）
location /api/ {
proxy_pass http://127.0.0.1:3000/;
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_pass末尾加/：Nginx 会剥离/api/，只把/users发给后端（后端路由无需带/api） - 不加
/：整个/api/users原样转发，后端需能处理带/api前缀的路径 -
proxy_set_header确保后端拿到真实客户端 IP 和原始 Host
避免配置冲突的要点
- 不要把
location /和location /api/写在不同server块里，它们必须共存于同一server中才能按优先级匹配 -
location匹配遵循“最长前缀匹配”，/api/比/更精确，所以 API 请求一定先被它捕获 - 静态资源路径若与 API 路径重叠（比如
/api.js），建议后端 API 使用统一前缀（如/api/v1/），前端静态资源避免命名冲突
验证是否生效
- 访问
http://your-domain.com/应加载index.html - 访问
http://your-domain.com/api/users应返回后端接口数据，且响应头中X-Cache-Status（如有缓存）或X-Real-IP可确认代理链正常
这样一套配置下来，Nginx 就成了统一入口：既高效服务静态内容，又安全透明地代理动态请求。
