如何利用Nginx反向代理实现静态资源与动态接口分离-Nginx-PHP中文网

Nginx反向代理可按路径分离静态资源与动态接口：静态文件（如.js、.css、/static/）由Nginx直接响应并缓存，动态请求（如/api/）代理至后端服务，提升性能、降低压力、简化部署与缓存管理。

如何利用nginx反向代理实现静态资源与动态接口分离

用 Nginx 做反向代理，把静态资源（如 JS、CSS、图片）和动态接口（如 /api/ 开头的请求）分开处理，能显著提升性能、降低后端压力，也方便部署和缓存管理。

明确分离规则：按路径区分流量

核心思路是让 Nginx 根据请求路径自动分流：静态文件直接由 Nginx 读取并返回，不经过后端；动态接口则转发给后端服务（如 Node.js、Java 或 Python 应用）。

静态资源路径：通常匹配 /static/、/assets/、.js、.css、.png 等后缀，或统一放在 / 根路径下但排除 /api/
动态接口路径：一般以 /api/、/v1/、/auth/ 等为前缀，需代理到上游应用服务器

配置示例：基础分离结构

以下是一个典型 nginx.conf 片段，假设前端静态文件放在 /var/www/html，后端服务运行在 http://127.0.0.1:3000：

server {
    listen 80;
    server_name example.com;
<pre class="brush:php;toolbar:false;"># 静态资源：优先匹配，直接本地响应
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
    root /var/www/html;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# 或按目录分离（更清晰）
location /static/ {
    alias /var/www/html/static/;
    expires 1y;
}

# 动态接口：全部转发给后端
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;
}

# 默认：首页及其它 HTML 页面（也可设为静态）
location / {
    root /var/www/html;
    try_files $uri $uri/ /index.html;
}

}

关键细节与优化建议

实际使用中注意这些点，避免踩坑：

proxy_pass 末尾斜杠很重要：写成 proxy_pass http://127.0.0.1:3000/; 表示去除 /api/ 前缀再转发；若不加末尾 /，会原样带上 /api/ 转发，后端可能无法识别
静态资源缓存要合理：对带哈希值的文件（如 main.a1b2c3.js）可设长期缓存；HTML 或未哈希资源建议禁用缓存或用短时效
避免 location 顺序冲突：Nginx 按照匹配优先级执行，正则 location（~*）优先级低于精确匹配（=）但高于前缀匹配（location /api/），确保静态规则不被动态规则覆盖
跨域问题已自然解决：因前后端同域名，浏览器视为同源，无需额外配置 CORS —— 这正是反向代理的核心优势之一