动静分离部署前要梳理哪些静态资源？,有哪些注意点？

动静分离部署前，必须把静态资源按文件类型、访问路径、缓存策略、域名归属四个维度梳理成清单，否则上线后大概率出现样式丢失、接口串线、缓存穿透等问题。

动静分离部署静态资源清单怎么做？先建立四个梳理维度

很多团队做动静分离时，习惯只盯住图片和CSS，结果上线后发现字体跨域失败、地图文件404、后台接口被静态规则误伤，清单不是简单的文件列表，而是一张能直接交给Nginx配置和运维执行的资源地图。

加载中

Linux 懒人运维:nginx 动静分离

Linux懒人运维

3001478

原视频地址

动手之前,先按下面四个维度给静态资源归类：

• 文件类型维度：CSS、JS、图片、字体、视频、音频、文档、数据文件、source map、favicon、robots.txt。
• 访问路径维度：URL前缀是 /static/、/assets/、/upload/ 还是根目录散落文件，路径结构决定后续Nginx location匹配规则怎么写。
• 缓存策略维度：哪些文件可以长缓存，哪些必须每次校验，哪些不能缓存。
• 域名归属维度：静态资源走主域名、独立静态域名还是CDN域名，是否存在跨域调用。

把这四个维度做成表格,一行一条资源，后续配置和验收都能按表执行，表格字段建议包含：文件类型、URL示例、源站目录、缓存策略、是否跨域、是否需CDN加速。

用命令快速生成初始清单

如果源站目录是已知的，可以直接用 `find` 命令按扩展名扫出资源列表，再人工补全路径信息：

find /var/www -type f ( -name ".css" -o -name ".js" -o -name ".png" -o -name ".jpg" -o -name ".jpeg" -o -name ".gif" -o -name ".ico" -o -name ".woff" -o -name ".woff2" -o -name ".ttf" -o -name ".svg" -o -name ".map" -o -name ".mp4" -o -name ".webm" -o -name ".pdf" ) > static_resource_list.txt

扫出来的文件再结合浏览器开发者工具的Network面板和Nginx访问日志做二次核对,能发现不少隐藏引用。

nginx动静分离配置静态资源有哪些？从URL和目录反推资源归属

Nginx动静分离配置时，最怕的是静态资源路径和动态接口路径混在一起，`/api/user/avatar/123.png` 这种路径，看似图片，实际经过后端鉴权生成；如果被Nginx静态规则直接命中，就会绕过权限控制。

常见静态资源与易漏项

多数站点能想到的静态资源集中在：

• CSS 及其 source map 文件（.css、.css.map）

• 

  JavaScript 及其 source map 文件（.js、.js.map）

• 图片（.png、.jpg、.jpeg、.gif、.webp、.avif、.svg、.ico）
• 字体文件（.woff、.woff2、.ttf、.eot、.otf）
• 媒体文件（.mp4、.webm、.mp3、.ogg）
• 文档文件（.pdf、.docx、.xlsx、.zip）
• 站点根文件（favicon.ico、robots.txt、sitemap.xml、manifest.json）

容易漏掉的清单项通常包括：

• HTML 模板里内联引用的 .map 文件，生产环境忘删或未剥离 sourceMappingURL。
• 第三方库自带的字体和图片,打包后散落在 node_modules 相关产物中。
• 后台上传目录 /upload/ 下同时存在图片、附件和临时文件，需要明确哪些静态、哪些动态。
• 前端路由的 index.html，它本身是入口文件，通常不能被强缓存。

按URL反推资源配置

先把浏览器里所有请求导出一份，按URL前缀分组，再对照Nginx配置里的 `root` 和 `alias` 路径，逐个标注源站实际目录。

location /static/ {
    alias /data/www/static/;
    access_log off;
}
location /upload/ {
    root /data/www/;
    client_max_body_size 20m;
}

如果某个URL带了用户token或session参数,即使后缀是 .jpg，也要从静态清单里剔除，保留给动态接口处理。

动静分离静态资源缓存策略对比：强缓存与协商缓存该选谁

缓存策略选错，是动静分离上线后最常被投诉的原因之一，静态资源缓存策略对比的核心不是“哪个更好”，而是“这个文件变了之后，用户能不能及时拿到新版本”。

强缓存与协商缓存对比

行业共识认为,带内容指纹的静态资源应当使用强缓存并配合 immutable 标记；而HTML入口文件必须使用协商缓存或禁止缓存，否则发版后用户可能长时间访问旧页面。

Nginx缓存配置示例

# 带hash指纹的静态文件：长缓存
location ~ .(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
    try_files $uri =404;
}
# HTML入口：协商缓存或禁止缓存
location ~ .html$ {
    add_header Cache-Control "no-cache, must-revalidate";
    etag on;
    if_modified_since exact;
}

注意 .map 文件在生产环境建议直接禁止对外访问，避免源码结构泄露：

location ~ .map$ {
    deny all;
}

缓存策略与版本控制配合

很多团队用Webpack、Vite等工具构建时，会给文件名加上 `contenthash`，`app.3f92ab.js`，这类文件内容一变，文件名就变，天然适合强缓存，如果还有不带指纹的文件，需要在清单里标红，要么改造构建流程，要么单独配置协商缓存。

企业网站动静分离部署价格与工时如何评估

企业网站动静分离部署价格没有固定报价，主要由云资源成本和改造工时两部分构成，资源成本通常包括CDN流量费、对象存储请求费、SSL证书费用；工时取决于现有架构和前端代码耦合程度。

资源成本构成

– CDN流量费：按实际回源和加速流量计费，访问量不大的企业站多数情况下月支出有限。
– 对象存储请求费：图片、视频等资源迁移到对象存储后，读写请求会产生费用，单价较低。
– SSL证书：使用独立静态域名时需要额外证书，简米云、酷番云等平台有免费证书可用。
– 域名与备案：如果为静态资源启用独立域名，部分地域如上海、北京的企业需要提前完成ICP备案变更或新增。

工时评估要点

– 前端改造：处理资源引用路径、字体跨域、source map移除，一般需要一到两个工作日。
– Nginx配置：初版配置加上测试验真，多数情况下半天到一天。
– 回源与CDN切换：涉及域名解析、证书部署、缓存预热，需要提前协调。
– 全量回归：重点检查管理后台、移动端H5、第三方登录页等低频入口。

规模较小的企业站,全部改造通常在一周内可以完成主体工作，但回车测试和缓存观察建议保留至少一个完整发版周期。

不同业务场景的清单侧重

站点

门户站点的静态资源量大，图片和视频占比高，清单要重点标注大文件、缩略图样式、CDN预热目录，首页HTML需要禁用强缓存，栏目页和详情页的模板文件同理。

管理后台与内部系统

管理后台的静态资源里，JS包体积通常偏大，且很多接口带鉴权，清单里要单独识别所有 `/api/` 开头的URL，确保它们不会被Nginx静态规则拦截，后台的静态资源目录往往和业务上传目录混在一起，需要单独拆出 `/upload/` 的动态处理规则。

移动端H5与小程序内嵌页

移动端H5的场景下，静态资源域名必须支持HTTPS和HTTP/2，字体文件需要配置CORS响应头，清单中要额外标注哪些资源被离线包或小程序缓存机制引用，这些资源的缓存策略需要和客户端缓存方案对齐。

动静分离部署前静态资源清单该怎么验收

清单梳理完成后，建议按下面步骤做上线前验收：

1. 用爬虫或浏览器开发者工具抓取全站请求,按文件类型过滤。
2. 检查每个静态资源的响应头：Cache-Control、Expires、ETag、Last-Modified、Access-Control-Allow-Origin。
3. 验证所有动态接口URL是否被静态规则误伤,尤其是带 .jpg、.json、.xml 后缀的接口。
4. 检查字体和图片的跨域响应头,确认CORS配置正确。
5. 在预发布环境模拟一次完整发版,观察HTML更新是否及时、旧缓存是否影响新功能。

业内专家指出,动静分离部署的故障大多数不是出在Nginx本身，而是出在事前静态资源清单不完整，导致上线后才发现某些文件被缓存或拦截。

Q&A

动静分离部署前静态资源清单需要包含哪些字段？

核心字段包括：文件类型、URL路径、源站目录、缓存策略、是否跨域、是否带用户信息、是否走CDN、回源HOST、备注，表格形式维护，后续配置和验收都能直接复用。

动静分离部署后静态资源加载慢怎么排查？

先看资源是否命中CDN节点，再看响应头里的缓存策略是不是配置错误，如果大量请求回源，检查CDN刷新和预热任务是否完成，部分情况下加载慢与静态资源本身无关，而是HTML入口缓存导致前端一直在请求旧的资源地址。

动静分离部署前静态资源清单遗漏会导致什么后果？

遗漏的资源可能无法访问、被缓存成旧版本、绕过鉴权直接暴露，或者因为跨域限制而加载失败，最终表现就是页面样式错乱、后台接口异常、部分图片裂开，清单梳理得越完整，上线后的返工就越少。