基于前端更新的Cloudflare自定义缓存清除方案咨询

核心原则 #

避免全量清除缓存（会大幅降低CDN命中率，影响用户访问速度），只清除实际更新的资源路径或前缀，精准控制缓存失效范围。

具体实现方法 #

1. CI/CD流程自动追踪变更文件，批量清除

在前端构建环节，通过Git或构建工具生成本次部署的变更资源清单，再将这些资源的完整URL传入Cloudflare API进行精准清除：

• 步骤：
  1. 用git diff --name-only对比当前版本与上一生产版本的静态资源（媒体文件、打包后的JS/CSS等），提取变更文件路径。
  2. 将相对路径转换为完整URL（比如/images/banner.jpg转成https://www.domain.com/images/banner.jpg）。
  3. 把这些URL批量填入API请求的files数组。
• 示例命令（使用Cloudflare Token，更安全）：

curl -X POST "https://api.cloudflare.com/client/v4/zones/YOUR_ZONE_ID/purge_cache" \
-H "Authorization: Bearer YOUR_CLOUDFLARE_TOKEN" \
-H "Content-Type: application/json" \
--data '{
  "files": [
    "https://www.domain.com/images/banner.jpg",
    "https://www.domain.com/static/js/app.abc123.js"
  ]
}'

• 注意：确保Token拥有Zone.Cache.Purge权限，不要使用全局API Key（权限过大，泄露风险高）。

2. 利用资源哈希命名自动规避缓存（推荐）

通过前端构建工具（Webpack/Vite等）给静态资源添加内容哈希后缀（比如app.abc123.js、banner.v2.jpg）：

• 资源更新时，哈希值会随内容变化，新资源的URL与旧资源完全不同，Cloudflare会自动缓存新资源，旧资源的缓存可等待TTL到期自动失效。
• 优势：无需手动执行缓存清除，完全自动化，同时保证用户总能获取最新资源，适合绝大多数前端静态资源场景。

3. 按路径前缀批量清除

如果本次更新涉及某个目录下的所有资源（比如/images/new-collection/），可以用Cloudflare的prefixes参数清除整个前缀路径的缓存：

• 示例命令：

curl -X POST "https://api.cloudflare.com/client/v4/zones/YOUR_ZONE_ID/purge_cache" \
-H "Authorization: Bearer YOUR_CLOUDFLARE_TOKEN" \
-H "Content-Type: application/json" \
--data '{
  "prefixes": [
    "https://www.domain.com/images/new-collection/"
  ]
}'

• 特点：比全量清除精准，比单个文件清除高效，适合批量更新同一目录资源的场景。

最佳实践 #

• 优先采用资源哈希命名：这是最稳定、省心的方案，从根源上避免缓存一致性问题，无需手动管理清除操作。
• 自动化变更追踪：必须清除缓存时，一定要在CI/CD中自动生成变更清单，禁止手动维护路径，避免遗漏或误清除。
• 最小权限原则：使用Cloudflare Token而非全局API Key，仅授予Zone.Cache.Purge权限，降低密钥泄露风险。
• 验证清除效果：在CI/CD流程中加入验证步骤，比如清除后请求目标资源，检查响应头CF-Cache-Status是否为MISS（确认缓存已失效）。
• 合理设置TTL：给不同资源配置差异化TTL，比如媒体资源设30天TTL，频繁更新的页面设1小时TTL，减少主动清除的需求。

内容的提问来源于stack exchange，提问作者Ravi Kyada