Nginx动静分离与静态资源加速实现方法

一、动静分离概述

动静分离是指将动态请求和静态资源请求分开处理，通过不同的服务器或处理方式来优化网站性能。

核心优势

• 减轻应用服务器压力
• 提高静态资源访问速度
• 提升用户体验
• 便于CDN加速

二、Nginx实现动静分离

1. 基础配置方法

server {
    listen 80;
    server_name example.com;

    # 静态资源处理
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|ttf|svg)$ {
        root /path/to/static/files;
        expires 30d;
        access_log off;
    }

    # 动态请求转发
    location / {
        proxy_pass http://backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

2. 进阶配置选项

静态资源缓存控制

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    root /var/www/static;
    expires max;
    add_header Cache-Control "public, no-transform";
    etag on;
}

文件版本控制

location ~* ^/static/.+\.(css|js)$ {
    root /var/www;
    try_files $uri $uri/ /static/main$is_args$args;
}

三、静态资源加速技术

1. 浏览器缓存优化

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 365d;
    add_header Cache-Control "public";
    add_header Pragma "public";
    add_header Vary "Accept-Encoding";
}

2. Gzip压缩

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;

3. Brotli压缩（需要Nginx支持）

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json text/xml application/xml application/xml+rss text/javascript;

4. 资源合并与内联

# 使用Nginx的concat模块合并多个CSS/JS文件
location /static/css/ {
    concat on;
    concat_max_files 10;
    concat_types text/css;
}

四、CDN集成

1. 基础CDN配置

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    if ($http_x_forwarded_proto != "https") {
        return 301 https://$host$request_uri;
    }

    root /var/www/static;
    expires max;
    add_header Cache-Control "public";
    add_header CDN-Cache-Status $upstream_http_x_cache;
}

2. 回源配置

location ~* ^/static/ {
    proxy_pass https://cdn.example.com;
    proxy_cache my_cache;
    proxy_cache_valid 200 302 10m;
    proxy_cache_valid 404 1m;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
}

五、性能优化建议

1. 静态资源域名分离：使用单独的域名（如static.example.com）减少Cookie传输
2. HTTP/2启用：提升多资源并行加载效率
3. 资源预加载：使用Link头或<link rel="preload">
4. 智能缓存策略：根据资源类型设置不同缓存时间
5. 监控与调优：使用Nginx日志和性能工具持续优化

六、完整示例配置

# 静态资源服务器配置
server {
    listen 443 ssl http2;
    server_name static.example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    root /var/www/static;

    # 静态资源处理
    location ~* \.(?:ico|css|js|gif|jpe?g|png|webp|svg|woff2?|ttf|eot)$ {
        expires 365d;
        access_log off;
        add_header Cache-Control "public";
        add_header Access-Control-Allow-Origin "*";

        # Brotli压缩
        brotli_static on;

        # Gzip压缩
        gzip_static on;
    }

    # 防止恶意访问
    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    # 禁止访问隐藏文件
    location ~ /\. { deny all; }
}

# 动态应用服务器配置
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    # 静态资源重定向到CDN
    location ~* \.(?:ico|css|js|gif|jpe?g|png|webp|svg|woff2?|ttf|eot)$ {
        return 301 https://static.example.com$request_uri;
    }

    # 动态请求处理
    location / {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
    }

    # 健康检查
    location /nginx_status {
        stub_status;
        allow 127.0.0.1;
        deny all;
    }
}

通过以上配置和方法，可以有效地实现Nginx的动静分离和静态资源加速，显著提升网站性能。