创建/*路径CloudFront失效后出现504错误的排查与优化求助

解决方案 #

一、修复CloudFront的504错误 #

• 检查源配置：确认CloudFront的源指向的是S3的静态网站托管端点（格式类似example.com.s3-website-<区域>.amazonaws.com），而非S3桶ARN。用ARN作为源可能导致回源权限或路径匹配问题，引发504。
• 验证回源权限：如果用了Origin Access Control (OAC)，检查S3桶策略是否允许OAC的服务主体读取桶内内容；如果是旧的Origin Access Identity (OAI)，确认桶策略已授权OAI的访问权限。权限不足会导致CloudFront无法从S3拉取内容，触发504。
• 等待分发部署完成：执行失效操作后，CloudFront需要重新部署分发，状态会显示"In Progress"，期间可能出现504。等待状态变为"Deployed"后再测试访问，一般会自动恢复。
• 查看CloudFront日志：如果长时间未恢复，开启CloudFront的访问日志和错误日志，定位具体回源失败原因（比如S3端点不可达、请求被拒等），针对性修复。

二、优化S3代码推送流程 #

• 确保构建文件最新：部署前必须执行ng build --prod（或对应环境的构建命令），确认dist目录下的文件是最新编译产物，避免部署旧代码。
• 调整ngx-aws-deploy参数：
  • 添加--delete参数，部署时自动删除S3桶中dist目录没有的旧文件，避免残留旧资源；
  • 给静态资源设置缓存控制：用--cache-control "max-age=31536000"给JS、CSS、图片等设置长期缓存，给index.html单独设置--cache-control "no-cache"，保证首页能及时更新。
• 先验证S3再失效CloudFront：部署完成后先访问S3的静态网站端点，确认内容已更新，再执行CloudFront失效操作，避免S3内容未同步就触发失效导致的异常。
• 精准失效而非全路径：不要直接失效/*，只针对修改过的文件（比如/index.html、/main.<hash>.js）执行失效，减少CloudFront部署时间，降低出错概率。

三、相关服务配置调整 #

• S3桶配置：
  • 开启静态网站托管，设置默认首页和错误页均为index.html，适配Angular单页路由；
  • 配置桶策略，仅允许CloudFront的OAC/OAI访问，禁止直接通过S3桶域名访问，提升安全性。
• CloudFront配置：
  • 确认证书覆盖example.com和www.example.com，状态为"已颁发"；
  • 设置自定义错误响应：将404错误重定向到/index.html，状态码改为200，解决Angular路由刷新404的问题；
  • 配置差异化缓存策略：给HTML文件设置短缓存或不缓存，静态资源设置长缓存，兼顾性能和更新及时性。
• Route 53配置：确认A/AAAA记录指向CloudFront分发域名，而非S3桶；检查NS记录是否正确指向Route 53的域名服务器，确保解析正常。

内容的提问来源于stack exchange，提问作者hostmaster-ev