部署在AWS Amplify的Angular 16生产环境缓存问题求助

核心问题分析 #

这类间歇性缓存旧版本的问题，本质是浏览器或CDN对入口文件（index.html）或静态资源的缓存策略不合理。Angular生产构建虽默认给静态资源加哈希，但如果入口文件被缓存，用户会加载旧的资源引用；同时AWS Amplify依赖CloudFront做CDN分发，缓存配置不当也会导致旧资源滞留。

具体排查与修复步骤 #

1. 确认Angular构建的哈希配置 #

确保Angular生产构建时给所有静态资源添加唯一哈希，避免同名资源被缓存。检查angular.json中的outputHashing配置：

"projects": {
  "app-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "outputHashing": "all"
          }
        }
      }
    }
  }
}

outputHashing: all会给js、css、图片等静态资源文件名添加哈希，新版本资源会有全新文件名，彻底避免缓存混淆。

2. 调整Amplify自定义HTTP头的缓存策略 #

修改customHttp.yml，针对不同文件类型设置差异化缓存规则，禁止缓存入口文件，允许静态资源长期缓存：

applications:
  - appRoot: webapp
    customHeaders:
      # 保留原有CORS配置
      - pattern: '**'
        headers:
          - key: Access-Control-Allow-Origin
            value: '*'
          - key: Vary
            value: >-
              Origin, Access-Control-Request-Headers,
              Access-Control-Request-Method
      # 入口文件index.html禁止缓存
      - pattern: '/index.html'
        headers:
          - key: Cache-Control
            value: 'no-cache, no-store, must-revalidate, max-age=0'
      # 带哈希的静态资源允许长期缓存（匹配Angular构建后的文件名格式）
      - pattern: '**/*.{js,css,json,ico,png,jpg,jpeg,gif,svg,woff,woff2,ttf,eot}'
        headers:
          - key: Cache-Control
            value: 'public, max-age=31536000, immutable'

• index.html设置严格的缓存禁止规则，确保每次请求都拉取最新版本；
• 静态资源因为有唯一哈希，设置immutable和超长缓存时间，既提升性能又不会缓存旧资源。

3. 检查Amplify构建与部署配置 #

• 确认amplify.yml中baseDirectory路径正确，确保构建产物dist/app-name下的所有文件都被正确上传到Amplify；
• 查看Amplify控制台的部署日志，确认生产构建命令npm run build -- --configuration production完整执行，dist目录生成了带哈希的资源文件。

4. 临时应急：手动触发CloudFront缓存失效 #

如果问题紧急，可在AWS控制台找到Amplify对应的CloudFront分发，手动执行缓存失效操作，路径填写/*强制刷新所有缓存资源。这只是临时方案，核心还是要靠缓存策略配置解决根本问题。

5. 验证修复效果 #

部署新版本后，打开浏览器开发者工具（Network面板）：

• 查看index.html的响应头，确认Cache-Control为设置的禁止缓存规则；
• 查看js/css等静态资源的响应头，确认Cache-Control为长期缓存规则，且文件名包含哈希；
• 测试用户访问是否直接加载新版本，无需强制刷新。

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