网站动静分离部署步骤有哪些，缓存规则怎么配置？

网站动静分离部署的核心是先把静态资源与动态请求拆到不同域名或服务，再按“静态资源长缓存、动态接口短缓存或不缓存”配置缓存规则，执行顺序建议是资源梳理、域名规划、源站拆分、反向代理、缓存规则、灰度验证。

网站动静分离部署步骤有哪些？从资源梳理到上线验证

动静分离不是把文件挪个位置就结束，它要解决三件事：静态资源不走应用服务器、动态请求不被缓存拖累、缓存失效能可控刷新,下面按实操顺序拆开。

加载中

前端部署和资源缓存管理实战

三

三十的前端课

8171--

原视频地址

资源梳理：先分清哪些文件能长缓存

先把网站资源分成三类,不然后面缓存规则会配乱。

• 静态资源：CSS、JavaScript、图片、字体、视频、下载包，它们适合长缓存,但要用文件名哈希或版本号控制更新。
• 动态请求：登录、购物车、订单、支付、库存、价格接口，它们通常不能缓存，或只能极短缓存，商品详情页HTML、文章页HTML、列表页，可短缓存,也可边缘包含动态片段。

操作路径：在浏览器开发者工具打开Network面板，按类型筛选资源，记录请求域名、响应头、文件大小，把“每次请求都回源”的资源单独标记，静态资源统一放到/static/、/assets/、/uploads/目录，动态接口统一放到/api/路径,这样Nginx和CDN都能按路径写规则。

域名与目录规划：避免Cookie和跨域混乱

静态资源最好独立域名，例如static.example.com、img.example.com，主站www.example.com只负责HTML和动态接口，好处是静态域名可以关闭Cookie传递，减少请求头体积；CDN回源也清晰。

• 静态域名：只放CSS、JS、图片、字体,开启公共缓存。
• 图片域名：可单独设置图片处理、WebP转换、缩略图规则。
• API域名：只走动态代理,禁用公共缓存。
• 字体文件：若跨域加载，静态源站要配置Access-Control-Allow-Origin,否则浏览器会拦截。

行业共识认为，静态资源独立域名后，缓存策略更容易按域名统一管理，别把登录态带到静态域名上,避免CDN缓存到带用户信息的响应。

源站拆分：静态服务与动态服务各干各的

静态源站可以用Nginx直接托管目录，也可以放对象存储，动态源站继续跑PHP-FPM、Java、Node或Python应用，两边的扩容方式不同，静态源站更适合水平扩展和CDN回源,动态源站按CPU和内存扩容。

Nginx静态源站常见配置如下：

server {
    listen 80;
    server_name static.example.com;
    root /data/static;
    location ~ \.(css|js|png|jpg|jpeg|webp|svg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000, immutable";
        access_log off;
    }
}

Nginx官方文档说明，expires指令会同时影响Expires和Cache-Control响应头，生产环境更建议直接写Cache-Control，把max-age、public、immutable说清楚。immutable适合文件名带哈希的静态资源,浏览器在有效期内不会发条件请求。

反向代理：让动态请求回到应用服务器

主站Nginx负责HTML和API反向代理，API路径不要被静态规则误匹配,配置示例：

server {
    listen 80;
    server_name www.example.com;
    root /data/web;
    location /api/ {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        add_header Cache-Control "no-store";
    }
    location ~ \.(css|js|png|jpg|jpeg|webp|woff2)$ {
        return 301 https://static.example.com$request_uri;
    }
}

改完后执行nginx -t检查语法，再执行systemctl reload nginx平滑加载，不要直接restart，避免连接中断，随后用curl -I https://static.example.com/main.abc123.css查看响应头，确认出现Cache-Control: public, max-age=2592000, immutable，用curl -I https://www.example.com/api/user确认动态接口返回no-store或短缓存头。

灰度上线与验证：先切一小部分流量

上线不要一次性全量切换，先把静态域名解析到新源站，观察CDN回源率、404数量、字体跨域报错，再把API代理切到新路径，验证登录、下单、支付回调，最后切换主站HTML,验证清单包括：

• 静态资源响应头是否命中长缓存。
• 动态接口是否返回no-store或按业务设置的短TTL。
• CDN响应头X-Cache是否出现命中标记。
• 浏览器控制台是否有CORS或混合内容报错。
• 源站日志中静态请求是否明显减少。

动静分离和CDN加速有什么区别？缓存规则配置思路对比

两者经常一起出现，但职责不同，业内专家指出，CDN解决的是分发距离问题，动静分离解决的是源站职责问题,两者不能互相替代。

先做动静分离还是先上CDN？常见决策路径

如果动态服务器CPU被图片和CSS请求拖高，先做动静分离，如果静态资源已经在独立源站，但北方用户访问南方源站慢，再上CDN，两者顺序不是死规定，但缓存规则要一起设计，CDN缓存键建议设置为“URL+指定查询参数”，忽略Cookie和User-Agent；静态资源开启长缓存，HTML设置较短TTL,API路径在CDN层直接绕过缓存。

缓存规则配置的通用原则：静态长缓存、动态短缓存、敏感不缓存

• 带哈希的CSS、JS、图片：Cache-Control: public, max-age=31536000, immutable。
• 不带哈希的HTML：Cache-Control: no-cache或较短max-age,配合ETag协商。
• 商品列表、文章页：可设置短TTL，例如几十秒到几分钟,按业务容忍度定。
• 登录、订单、支付、购物车：Cache-Control: no-store,CDN不缓存。
• 接口中的价格、库存：若业务允许，设置极短TTL；不允许就实时回源。

电商网站动静分离缓存规则怎么配置？按资源类型分场景落地

电商站点资源类型多，缓存规则不能一刀切,下面按常见场景拆。

商品详情页：HTML动态与图片静态混合处理

商品详情页的HTML通常包含价格、库存、推荐位，不建议长缓存，可以把HTML设为no-cache或短TTL，商品主图、详情图、SKU图放静态域名并长缓存，图片URL带商品ID和版本号，换图时改版本号,避免用户看到旧图。

购物车与订单接口：必须绕开公共缓存

/api/cart/、/api/order/、/api/pay/这类路径要显式设置no-store，CDN缓存规则里把这些路径设为“不缓存”,Nginx配置示例：

location ~ ^/api/(cart|order|pay)/ {
    proxy_pass http://127.0.0.1:8080;
    add_header Cache-Control "no-store";
}

用户头像与商品主图：长缓存加版本号

用户头像、商品主图适合长缓存，但更新频率高于CSS，建议URL带?v=时间戳或文件名带哈希，CDN缓存键保留v参数，刷新时改参数即可，不要只靠CDN刷新接口,缓存键设计才是根治办法。

中小型网站动静分离部署多少钱？成本构成与节省路径

问“中小型网站动静分离部署多少钱”，不能只看服务器单价，成本通常由静态源站、CDN流量、动态服务器、运维人力四块组成,访问量和静态资源体积决定大头。

节省路径很实际：静态资源统一压缩，图片转WebP，CSS和JS按页面合并，CDN缓存命中率提上去，回源流量自然下降，北京地区不少中小企业更倾向把静态源站放对象存储，动态服务器保留在本地机房或云主机，按访问量弹性调整，据工信部公开信息，中小企业上云用云比例持续提升,静态资源使用对象存储和CDN已是常见做法。

网站动静分离与缓存规则配置Q&A：北京地区部署服务要注意什么？

静态资源更新后用户还看到旧页面怎么办？

先检查文件名是否带哈希或版本参数，带哈希的文件可以长缓存，更新时换文件名即可，HTML和未带哈希的资源用no-cache加ETag协商，CDN层刷新URL只能救急,长期要靠缓存键和版本号设计。

动静分离后动态接口要不要加缓存？

看业务敏感度，商品列表、文章列表可短缓存；价格、库存、余额、订单状态不建议公共缓存，需要用户身份的接口用private或no-store,CDN规则里直接设为不缓存。

北京地区做网站动静分离部署服务要注意什么？

北京地区服务商通常需要配合完成ICP备案信息核验，CDN节点选择要覆盖目标用户区域，日志留存和访问审计要符合等保要求，静态域名和API域名分开后，证书、CORS、回源鉴权要一起验收,不能只测首页打开速度。

动静分离的落地关键不是堆配置，而是先拆清资源类型，再用缓存头把静态和动态的边界写死，缓存规则配置对了，源站压力、访问速度和运维成本会一起改善。