墨与星辰

主题

动静分离 ​

动静分离是优化系统性能的重要架构模式，通过将静态资源和动态请求分离处理，可以显著提升系统性能和用户体验。

📋 动静分离架构 ​

🎯 动静分离的优势 ​

1. 性能优势 ​

  • 静态资源缓存：静态资源可以长期缓存，减少服务器压力
  • CDN加速：静态资源通过CDN分发，提升访问速度
  • 负载分离：静态资源和动态请求分离，减轻应用服务器压力

2. 运维优势 ​

  • 独立扩展：静态资源和动态服务可以独立扩展
  • 故障隔离：静态资源故障不影响动态服务
  • 成本优化：静态资源可以使用更便宜的存储服务

3. 架构优势 ​

  • 职责清晰：静态资源和动态服务职责分离
  • 易于优化：可以针对不同类型资源进行优化
  • 灵活部署：静态资源和动态服务可以灵活部署

🎯 Nginx 动静分离配置 ​

1. 基础配置 ​

nginx
server {
    listen 80;
    server_name example.com;
    
    # 静态资源
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2)$ {
        root /var/www/static;
        expires 30d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # 动态请求
    location / {
        proxy_pass http://backend_server;
        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;
    }
}

2. 高级配置 ​

nginx
server {
    listen 80;
    server_name example.com;
    
    # 静态资源目录
    location /static/ {
        alias /var/www/static/;
        expires 30d;
        add_header Cache-Control "public, immutable";
        access_log off;
        gzip on;
        gzip_types text/css application/javascript image/svg+xml;
    }
    
    # 图片资源
    location ~* \.(jpg|jpeg|png|gif|webp|ico)$ {
        root /var/www/images;
        expires 365d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # CSS/JS资源
    location ~* \.(css|js)$ {
        root /var/www/assets;
        expires 7d;
        add_header Cache-Control "public, must-revalidate";
        gzip on;
        gzip_comp_level 6;
    }
    
    # 字体资源
    location ~* \.(woff|woff2|ttf|eot)$ {
        root /var/www/fonts;
        expires 365d;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin *;
    }
    
    # 动态请求
    location /api/ {
        proxy_pass http://backend_server;
        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_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
    
    # 根路径处理
    location / {
        proxy_pass http://backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

3. CDN 集成 ​

CDN配置示例：

📋 动静分离最佳实践 ​

1. 静态资源处理 ​

资源分类：

  • HTML/CSS/JS：部署到静态服务器或CDN
  • 图片资源：使用CDN加速，启用图片压缩
  • 字体资源：设置长期缓存，配置CORS
  • 视频资源：使用专用视频CDN

缓存策略：

资源类型缓存时间缓存策略
HTML不缓存Cache-Control: no-cache
CSS/JS7天Cache-Control: public, must-revalidate
图片365天Cache-Control: public, immutable
字体365天Cache-Control: public, immutable

2. 动态请求处理 ​

请求转发：

  • API请求：转发到后端应用服务器
  • SSR请求：转发到Node.js服务器
  • WebSocket：使用专门的WebSocket代理

负载均衡：

nginx
upstream backend_server {
    least_conn;
    server 192.168.1.10:8080 weight=3;
    server 192.168.1.11:8080 weight=3;
    server 192.168.1.12:8080 weight=2;
    
    keepalive 32;
}

3. 性能优化 ​

优化技巧：

  • Gzip压缩：启用Gzip压缩静态资源
  • HTTP/2：使用HTTP/2协议提升性能
  • 缓存优化：合理设置缓存策略
  • CDN加速：使用CDN加速静态资源

📋 动静分离架构演进 ​

阶段1：单机部署 ​

阶段2：分离部署 ​

阶段3：CDN加速 ​

📖 学习资源 ​

视频教程 ​

书籍推荐 ​

  • 《Nginx实战》 - 深入讲解Nginx配置
  • 《高性能网站建设指南》 - 网站性能优化
  • 《Web性能权威指南》 - HTTP和浏览器优化
  • 《CDN技术详解》 - CDN技术原理和实践

网站资源 ​

工具推荐 ​

  • Web服务器：Nginx、Apache、Caddy
  • CDN服务：Cloudflare、阿里云CDN、腾讯云CDN
  • 静态资源托管：OSS、S3、GitHub Pages

✅ 动静分离检查清单 ​

  • [ ] 静态资源和动态请求已分离
  • [ ] Nginx配置合理，缓存策略正确
  • [ ] CDN已配置，静态资源已加速
  • [ ] 静态资源缓存时间设置合理
  • [ ] 动态请求负载均衡已配置
  • [ ] 性能监控已建立
  • [ ] 故障隔离机制已建立

上一章节：分层架构
返回目录：接入层架构概览 | 系统架构能力