Jenkins(CI/CD)构建Angular项目dist包后代码变更未正常生效问题

根因定位 #

该问题由多层缓存规则不匹配导致，和CI/CD构建产物本身无关：

• Cloudflare针对xyz.company-domain.com单独配置的缓存规则未同步更新，手动全域清缓存不会覆盖单独的域名级缓存规则，导致旧资源持续被缓存返回
• 原有EC2实例上的NGINX针对旧dist路径配置了静态资源强缓存规则，修改dist路径时临时未命中旧规则所以变更生效，后续规则重新命中后就会复现问题
• 入口文件index.html被设置了长缓存，就算静态资源更新，用户端还是拉取旧的入口文件指向老的静态资源

分步修复操作 #

1. 调整Cloudflare缓存规则 #

• 进入xyz.company-domain.com对应的Cloudflare域名管理页，删除所有针对该域名的自定义静态资源强制缓存规则
• 新增两条缓存规则：
  • 匹配路径为*/index.html，设置缓存级别为无缓存，浏览器缓存TTL设置为0
  • 匹配路径后缀为js、css、png、jpg、svg、字体文件等静态资源，设置缓存级别为缓存静态资源，缓存时间设置为30天到1年均可
• 清除缓存时选择「自定义清除」，输入https://xyz.company-domain.com/*全路径清除，避免残留

2. 修改原有EC2实例的NGINX配置 #

• 打开站点NGINX配置文件，默认路径为/etc/nginx/conf.d/[你的站点配置名].conf，在xyz.company-domain.com对应的server块中添加如下配置：

# 入口文件禁止缓存
location = /index.html {
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
    expires off;
}
# 带哈希的静态资源设置长缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

• 执行nginx -t验证配置语法正确性，执行nginx -s reload重载NGINX配置
• 手动删除服务器上原有dist目录的所有文件，重新触发CI/CD部署，避免旧资源残留

3. 确认Angular构建配置 #

• 检查项目angular.json文件中production构建配置项，确认outputHashing字段值为all，保证所有静态资源构建后都会生成唯一哈希后缀，不会出现新老资源重名问题

效果验证 #

• 部署完成后在浏览器无痕模式下访问站点，打开开发者工具的网络面板，查看index.html的响应头中Cache-Control字段符合无缓存配置，且文件最后修改时间为最新部署时间
• 提交测试代码变更走CI/CD流程，验证变更可正常生效

内容的提问来源于stack exchange，提问作者Harrish Anarase