一台Nginx可同时分发前端静态资源和Node.js后端API，关键在于location路由分流与路径语义隔离：静态资源（如/、/assets/、.js/.css等）由Nginx直接返回，API请求（如/api/）代理至Node服务，SPA非静态非API路径回退至/index.html；配置须按精确前缀→正则后缀→API前缀→根路径顺序书写，并补全proxy_headers、超时及WebSocket支持，静态资源需设置缓存头与UTF-8编码。
用一台 Nginx 同时分发前端静态资源和 Node.js 后端 API，关键不是“堆配置”，而是靠 location 路由分流 + 路径语义隔离。前端文件由 Nginx 直接读取返回，API 请求则干净转发给本地或远程的 Node 服务，整个过程对用户完全透明，只走一个域名和端口。
明确动静资源边界，避免路径冲突
先划清哪些归 Nginx 管、哪些交给 Node：
- 静态资源：/、/assets/、/static/、/images/ 等路径，以及 .js、.css、.png、.woff2 等后缀文件
- 动态接口：统一约定前缀，如 /api/、/v1/ 或 /auth/；所有匹配该前缀的请求必须代理出去
- SPA 回退规则：非静态、非 API 的路径（比如 /user/profile）需回退到 /index.html，由前端路由接管
核心 location 配置顺序不能错
Nginx 按顺序从上到下匹配最具体的 location，所以顺序直接影响行为。推荐结构如下：
Zenlink - Node SDK for ZenHeart
下载
ZenHeart zenlink 与 zenlink-mcp 为 OpenClaw，涵盖安装、MCP 注册、钩子接线、入站轮询及升级维护。
-
location ^~ /static/—— 用前缀匹配，高效且不触发正则，指向磁盘目录 -
location ~* \.(js|css|png|jpg|gif|svg|woff2)$—— 正则兜底常见静态后缀，加缓存头 -
location /api/—— 注意末尾斜杠，配合proxy_pass http://127.0.0.1:3000/实现路径重写干净（/api/users → /users） -
location /—— 放最后，用try_files $uri $uri/ /index.html支持 History 路由
Node 后端代理必须带关键 header 和超时
仅写 proxy_pass 不够，Node 服务常依赖真实客户端信息或连接稳定性：
立即学习“前端免费学习笔记（深入）”；
- 补全
proxy_set_header Host $host和X-Real-IP，避免日志或鉴权出错 - 设
proxy_read_timeout 60，防止长轮询或 WebSocket 升级中断（若 Node 用 Express + ws 库） - 加
proxy_http_version 1.1和proxy_set_header Upgrade $http_upgrade，支持 WebSocket
静态资源托管要兼顾路径与缓存
前端打包产物（如 Vue/React 的 dist）通常放在固定目录，例如 /var/www/myapp/dist：
- 用
root /var/www/myapp/dist;配合location /，让/logo.png映射到文件系统/var/www/myapp/dist/logo.png - 对静态后缀加
expires 1y和Cache-Control public，减少重复请求 - 确保
charset utf-8;，避免中文乱码或字体图标异常
