在 Nginx 中如何实现配置动静分离？

在 Nginx 中实现动静分离（Dynamic-Static Separation）的核心思想是：让 Nginx 处理所有的静态资源（如 HTML、CSS、JS、图片等）请求，而将动态请求（如 API 接口、数据库交互等）通过反向代理转发给后端的应用服务器（如 Tomcat、Node.js、Spring Boot、PHP 等）处理。

这样做可以大幅提高网站的并发处理能力和响应速度，因为 Nginx 处理静态文件的效率远高于传统的应用服务器。

下面是实现动静分离的完整步骤和配置示例：

1. 核心原理

通过 Nginx 的 location 指令进行 URI 匹配：

按路径匹配：例如将 /api/ 开头的请求转发给后端，其他的走本地静态目录。
按后缀匹配：例如将 .jpg, .css, .js 等结尾的请求直接返回本地文件。

2. 标准配置示例

假设我们有如下环境：

前端静态文件存放目录：/usr/share/nginx/html/my_project
后端 API 服务器地址：http://127.0.0.1:8080 (例如一个 Spring Boot 应用)

打开你的 Nginx 配置文件（通常在 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf），进行如下配置：

plaintext

server {
    listen       80;
    server_name  www.yourdomain.com; # 你的域名或 IP

    # ==========================================
    # 1. 静态资源处理（方式一：通过文件后缀名正则匹配）
    # ==========================================
    location ~* \.(html|htm|css|js|ico|jpg|jpeg|png|gif|woff|woff2|ttf|eot|svg)$ {
        # 静态文件所在的根目录
        root /usr/share/nginx/html/my_project;
        
        # 开启浏览器缓存，30天内不重复请求，减轻服务器压力
        expires 30d; 
        
        # 关闭访问日志（可选，减少磁盘I/O）
        access_log off; 
    }

    # ==========================================
    # 1. 静态资源处理（方式二：通过特定目录匹配）
    # ==========================================
    # 如果你的静态资源都放在 /static/ 目录下，也可以这样写：
    # location /static/ {
    #     alias /usr/share/nginx/html/my_project/static/;
    #     expires 30d;
    # }

    # ==========================================
    # 2. 动态请求处理（将 API 请求转发给后端）
    # ==========================================
    location /api/ {
        # 转发到后端真实服务器
        proxy_pass http://127.0.0.1:8080;
        
        # 传递客户端真实的 IP 和 协议等 Header 信息给后端
        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_set_header X-Forwarded-Proto $scheme;
    }

    # ==========================================
    # 3. 默认路由（适用于 Vue/React 等单页应用 SPA）
    # ==========================================
    location / {
        root /usr/share/nginx/html/my_project;
        index index.html index.htm;
        # 如果找不到对应路径的文件，默认返回 index.html，交给前端路由处理
        try_files $uri $uri/ /index.html; 
    }
}

3. 配置详解与避坑指南

① `root` 与 `alias` 的区别（经常踩坑的地方）

处理静态文件时，经常会用到这两个指令：

root：实际访问路径是 root 路径 + location 路径。
- 例如：location /static/ { root /var/www; }，当访问 /static/a.jpg 时，Nginx 去找 /var/www/static/a.jpg。
alias：实际访问路径是把 location 匹配到的部分替换为 alias 的路径。
- 例如：location /static/ { alias /var/www/; }，当访问 /static/a.jpg 时，Nginx 去找 /var/www/a.jpg。

② 正则表达式匹配优先级

在 location ~* \.(css|js...)$ 中：

~ 表示区分大小写的正则匹配。
~* 表示不区分大小写的正则匹配。
它的优先级高于普通的 / 匹配，所以只要请求是以 .jpg 结尾的，都会被这个 location 拦截，直接去磁盘读文件，不会转发给后端。

③ 性能优化建议（进阶配置）

既然做了动静分离，建议在 Nginx 的 http 块中开启 Gzip 压缩，这能极大地缩小静态文件（尤其是 JS 和 CSS）的体积，加快传输速度：

plaintext

http {
    # 开启 gzip
    gzip on;
    # 限制最小压缩文件大小，太小就没必要压缩了
    gzip_min_length 1k;
    # 压缩级别 (1-9)，推荐 4-6，太高会消耗太多 CPU
    gzip_comp_level 5;
    # 需要压缩的文件类型
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    # 是否在 http header 中添加 Vary: Accept-Encoding，建议开启
    gzip_vary on;
}

4. 测试与生效

修改完配置后，不要急着重启，先测试配置是否合法：

bash

# 测试配置文件语法
nginx -t

# 如果输出 syntax is ok 和 test is successful，则重新加载配置（不中断服务）
nginx -s reload

总结

配置动静分离的核心逻辑就是：用 location 写好规则，动态的 proxy_pass 出去，静态的留给 Nginx 的 root/alias 本地读取，并配上 expires 缓存和 gzip 压缩。

播面