7.8.3 动静分离与静态资源发布

在 Web 应用部署中，动静分离通过 Nginx 将动态请求与静态资源请求拆分处理，降低应用服务器压力、提升响应速度并优化缓存策略。常见做法是由 Nginx 直接提供静态文件服务，动态请求转发至后端应用。

原理草图#

目标与收益#

降低后端负载：静态资源不再经过应用层处理
提升访问性能：本地文件读取与缓存命中更快
增强稳定性：静态资源独立发布，减少业务发布影响

安装与目录准备（示例）#

以 Ubuntu 为例，安装 Nginx 并准备目录结构：

# 安装 Nginx
sudo apt update
sudo apt install -y nginx

# 准备目录
sudo mkdir -p /data/www/{app,static,upload}
sudo chown -R www-data:www-data /data/www

# 放置示例文件
echo "static ok" | sudo tee /data/www/static/hello.txt

资源规划与目录结构#

建议将静态资源独立目录化管理，并与应用构建产物解耦：
- /data/www/app：应用入口或反向代理入口
- /data/www/static：静态资源根目录（css/js/img）
- /data/www/upload：用户上传文件

Nginx 基本配置示例（可执行）#

文件路径：/etc/nginx/conf.d/app.conf

# 上游后端示例（可替换为真实应用）
upstream app_backend {
    server 127.0.0.1:8080;
}

server {
    listen 80;
    server_name example.com;

    # 静态资源
    location /static/ {
        alias /data/www/static/;   # 注意：alias 后要以 / 结尾
        access_log off;
        expires 30d;
        add_header Cache-Control "public";
    }

    # 用户上传
    location /upload/ {
        alias /data/www/upload/;
        expires 7d;
    }

    # 动态请求
    location / {
        proxy_pass http://app_backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

生效与验证：

# 配置语法检查
sudo nginx -t

# 重新加载
sudo systemctl reload nginx

# 验证静态资源
curl -i http://example.com/static/hello.txt
# 预期：HTTP/1.1 200 OK，响应体为 "static ok"

# 验证缓存头
curl -I http://example.com/static/hello.txt
# 预期：Cache-Control: public 和 Expires

缓存策略与版本管理（示例）#

强缓存：对不频繁变动的资源设置长缓存时间
版本号策略：使用文件指纹或版本号目录避免缓存冲突

示例构建产物路径：

/data/www/static/v2024/css/app.3f2d1c.css

静态资源发布流程（示例）#

前端构建产出静态资源
rsync 同步到静态目录
校验资源可用性与版本一致性

# 假设构建产物在 dist/
rsync -av --delete ./dist/ /data/www/static/v2024/
ln -sfn /data/www/static/v2024 /data/www/static/current

# 校验
curl -I http://example.com/static/current/css/app.3f2d1c.css

常见问题与排查（命令说明）#

403/404：确认 alias 目录权限与路径映射

# 检查目录权限
ls -ld /data/www/static
# 检查 Nginx 访问日志
tail -f /var/log/nginx/access.log

缓存不更新：检查版本号策略与浏览器缓存

# 查看响应缓存头
curl -I http://example.com/static/hello.txt

跨域问题：静态域名与业务域名分离时注意 CORS

# 示例：在 /static/ 中添加
add_header Access-Control-Allow-Origin "*";

练习与验证#

实现动静分离：按示例配置 /static/ 与 / 路径
验证缓存策略：用 curl -I 检查 Cache-Control 是否生效
模拟排错：将 /data/www/static 权限改为 000，观察 403 并恢复

sudo chmod 000 /data/www/static
curl -I http://example.com/static/hello.txt
sudo chmod 755 /data/www/static