网站动静分离部署的核心在于区分静态与动态资源，通过Nginx将请求分流，并结合缓存规则提升响应速度，这是中型站点性能优化的首选方案。
为什么要做动静分离
动静分离并非新概念，但很多站长在业务增长后才想起补课，日常运营中，图片、CSS、JS这类静态资源占据了请求量的相当一部分，却不需要后端计算，如果让它们和动态页面挤在同一台服务器，不仅浪费PHP或Java进程，还容易拖慢核心业务，行业共识认为，一套合理的动静分离架构，能让服务器吞吐量提升数倍，同时降低带宽成本，尤其对于电商大促或资讯类场景，高并发下静态资源用CDN兜底，动态请求留给自己处理，效果立竿见影。
动静分离的典型场景
- 高频访问的图片站、素材站，静态资源占比超过80%
- 需要频繁更新静态文件但希望用户立即看到新版本的项目
- 后端服务压力大，希望将健康检查、缓存击中率等指标分离出来
网站动静分离部署步骤详解
这一步是实操重点，我们从资源梳理开始，到Nginx配置收尾，全程给出可复用的命令和路径。
第一步：梳理资源类型并拆分目录
将项目中的静态文件统一放到独立目录，`/static/` 或 `/assets/`，并确保动态请求不经过该目录，常见的静态资源包括：
- 图片：jpg、png、webp、svg
- 样式：css、less、scss（编译后）
- 脚本：js、mjs
- 其他：字体（woff/woff2）、音视频片段
动态请求（如API接口、页面渲染）应保留在 index.php、/api/ 或
.do 等路径下，这一步看似简单，但梳理不清会导致后续规则混乱。
第二步：域名规划与CDN接入
静态资源最好使用独立域名（如 `static.example.com`），这样浏览器可以并行加载，也方便后续CDN无缝切换，如果预算有限，也可以用子路径加CDN域名回源，业内专家指出，使用独立域名还能避免静态资源携带不必要的cookie，减少请求头体积，配置CDN时，只需将CNAME解析到CDN服务商提供的地址，并在源站保留一份完整静态文件。
第三步：nginx动静分离配置实例
以下是一个典型的Nginx配置，适用于大多数PHP项目，通过 `location` 匹配规则，将静态请求直接返回文件，动态请求转发到后端。
server {
listen 80;
server_name example.com;
# 静态资源直接处理
location ~ .(jpg|jpeg|png|gif|ico|css|js|svg|woff2?)$ {
root /var/www/html/static;
expires 30d;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
# 动态请求转发到后端
location / {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}注意：root 路径指向静态文件目录，expires 和 Cache-Control 是为了配合下一步的缓存规则，如果使用CDN，则不需要在Nginx层设置缓存过期，CDN会读取源站返回的头部。
第四步：动静分离缓存规则配置要点
缓存规则决定了用户浏览器和CDN如何存储资源，这是影响二次加载速度的关键，配置时需要差异化对待静态和动态内容。
静态资源缓存规则
对于版本稳定的文件，推荐设置较长的过期时间，并利用文件名指纹（如 `app.a1b2c3.js`）解决更新问题，以下是一个通用策略：
- 图片、字体：缓存30天以上，`Cache-Control: public, max-age=2592000`
- CSS/JS（带版本号）：缓存1年，`Cache-Control: public, immutable`
- 未带版本号的静态文件：建议设置较短的缓存（如1天），并在Nginx中通过 `expires -1` 配合 `add_header Cache-Control no-cache` 处理
动态资源缓存规则
原则上不应被浏览器缓存，但可以在服务端设置短时缓存来减轻后端压力，例如针对商品详情页接口，可以设置 `Cache-Control: public, max-age=60` 允许CDN缓存60秒，同时用 `s-maxage` 区分代理缓存和浏览器缓存，对于用户私密数据（如购物车），必须使用 `private, no-cache`。
缓存规则配置表格
| 资源类型 | 示例路径 | 浏览器缓存 | CDN缓存 | 备注 |
|---|---|---|---|---|
| 图片（无版本） | /static/images/logo.png | 30天 | 30天 | 避免频繁修改 |
| 带指纹的CSS/JS | /static/css/app.a1b2c3.css | 1年 | 1年 | 更新时文件名变化 |
| 未带指纹的JS | /static/js/legacy.js | 1天 | 1天 | 配合版本号改进 |
| 动态API接口 | /api/goods/detail | 不缓存 | 60秒 | 用s-maxage控制 |
| 用户私人数据 | /api/user/info | 私有，不缓存 | 不缓存 | 保证安全 |
动静分离与缓存规则配置问答
动静分离后，静态资源更新了用户看不到怎么办？
这是最常见的问题，解决方案是使用文件指纹或版本号，让浏览器和CDN将新文件视为全新资源，如果无法修改文件名，可以通过CDN强制刷新缓存，或者设置较短的缓存时间并配合Etag验证，多数情况下，文件指纹的收益最高，且成本最低。
动静分离部署后，动态请求包含静态资源路径会出错吗？
如果你的动态页面中引用了静态资源，且路径是相对路径，分离后可能导致资源加载失败，建议在页面模板中使用绝对路径或加装CDN域名前缀，确保资源能正确回源，同时检查Nginx中 `location /` 是否覆盖了静态路径，避免冲突。
CDN与动静分离叠加时，缓存规则如何协同？
CDN会遵循源站返回的 `Cache-Control` 头部，但不同CDN服务商可能存在差异，建议在源站Nginx上统一设置 `s-maxage` 和 `max-age`，CDN优先读取 `s-maxage`，如果使用私有CDN，还需要注意 `X-Cache` 状态，确认缓存是否命中，最终目标是让静态资源离用户更近，动态资源回源站处理。
动静分离配合缓存规则，是大多数网站从单机走向高并发的必经之路，通过梳理资源、规划域名、配置Nginx规则，再针对不同资源设定差异化缓存时间，能显著减少服务器压力，提升用户体验，这套方案不依赖昂贵硬件，适合业务增长期的团队快速落地。