怎么利用 Nginx 整合静态资源与后端应用-Nginx-PHP中文网

nginx整合静态资源与后端应用的核心是通过location规则实现动静分离：静态资源（如/static/、.js等）直接服务，api请求（如/api/）反向代理至后端，并为spa配置try_files回退index.html；需正确设置proxy_header、超时、缓存及日志等参数确保稳定。

怎么利用 nginx 整合静态资源与后端应用

用 Nginx 整合静态资源与后端应用，核心是让 Nginx 同时承担“静态文件服务器”和“反向代理”两个角色：前端 HTML/CSS/JS 等由它直接响应，API 请求则精准转发给后端服务（如 Node.js、Spring Boot、Python 等）。这不是简单拼凑，而是通过 location 路由规则实现逻辑隔离与协同交付。

明确动静资源的边界

先理清哪些该由 Nginx 直接服务，哪些必须交给后端：

静态资源：通常路径含 /static/、/assets/、/css/、/js/、/images/，或直接以常见后缀结尾（.html、.png、.woff2 等）
动态接口：统一前缀如 /api/、/v1/、/auth/，或所有非静态路径（常配合 try_files 回退到前端入口）
注意：单页应用（SPA）需特殊处理 —— 所有非 API、非静态资源的请求，最终都应返回 index.html，由前端路由接管

配置 location 实现精准分流

在 server 块中按优先级顺序定义 location，Nginx 会从上到下匹配最具体的规则：

Nginx Hosting

通过服务器本地nginx实例实现零认证静态游戏托管。作为所有浏览器游戏的主要部署方式，无需登录、无需令牌、无需用户操作。

下载

用 location ^~ /static/ 匹配静态前缀，高效且不触发正则回溯
用 location ~* \.(js|css|png|jpg|gif|woff2)$ 按扩展名兜底静态资源
用 location /api/ 明确代理所有 API 请求，末尾斜杠确保路径重写干净
最后用 location / + try_files $uri $uri/ /index.html 支撑 SPA 刷新机制

后端代理的关键参数不能少

仅写 proxy_pass http://localhost:8080 往往不够，常见缺失会导致 404、Cookie 丢失或协议错乱：

proxy_set_header Host $host;：保持原始 Host，避免后端生成错误跳转链接
proxy_set_header X-Real-IP $remote_addr; 和 X-Forwarded-For：传递真实客户端 IP
proxy_set_header X-Forwarded-Proto $scheme;：让后端知道用户访问的是 http 还是 https
proxy_http_version 1.1; + proxy_set_header Connection "";：支持长连接与 WebSocket

补充实用细节提升稳定性

生产环境建议加上这些小但关键的配置：

为静态资源加 expires 1y; 和 add_header Cache-Control "public, immutable";，减少重复请求
对 API 接口禁用缓存：proxy_cache off; 或显式设 add_header Cache-Control "no-store, no-cache";
设置超时防止后端卡死：proxy_connect_timeout 5s;、proxy_read_timeout 30s;
启用 access_log 分离记录：access_log /var/log/nginx/api.log main if=$is_api;（配合 map 模块区分日志）