AWS S3静态托管部署后网站未更新，CloudFront无效化失效求助

针对你遇到的S3内容已更新但CloudFront托管站点未同步、手动缓存无效化也无效的问题，可按以下步骤排查修复：

1. 完善GitHub Workflow，添加自动CloudFront缓存无效化 #

你的CI配置仅完成了S3文件同步，未集成CloudFront缓存无效化步骤。即使手动执行过，也可能因路径不完整或时机问题失效。修改deploy步骤的脚本，加入缓存无效化逻辑：

- name: Deploy to S3 & Invalidate CloudFront
  run: | 
    echo "GITHUB_REF: $GITHUB_REF"
    if [[ "$GITHUB_REF" =~ refs/heads/(main|development) ]]; then
      echo "Starting deployment..."
      # 区分环境配置
      if [ "$GITHUB_REF" = "refs/heads/main" ]; then
        BUCKET="app-frontend-prod"
        CF_DIST_ID="${{ secrets.CLOUDFRONT_PROD_ID }}"
      else
        BUCKET="app-frontend-dev"
        CF_DIST_ID="${{ secrets.CLOUDFRONT_DEV_ID }}"
      fi

      # 同步S3并清理旧文件
      aws s3 sync ./dist s3://$BUCKET --delete
      echo "S3 sync completed"

      # 触发CloudFront全量缓存无效化
      aws cloudfront create-invalidation --distribution-id $CF_DIST_ID --paths "/*"
      echo "CloudFront invalidation initiated"
    else
      echo "Branch not configured for deployment."
      exit 1
    fi
  shell: /usr/bin/bash -e {0}
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    AWS_REGION: 'us-west-2'

注意事项：

• 把CloudFront分发ID存入GitHub Secrets（如CLOUDFRONT_PROD_ID/CLOUDFRONT_DEV_ID），避免硬编码
• 加入--delete参数，确保S3中删除React构建产生的旧chunk文件，避免残留资源干扰

2. 检查S3文件缓存头与CloudFront缓存策略 #

缓存无效化失效可能是因为缓存优先级设置冲突：

• 静态资源（.js/.css/*.png等）：设置Cache-Control: public, max-age=31536000, immutable，利用长期缓存减少请求
• index.html：必须设置Cache-Control: no-cache，禁止CloudFront和浏览器缓存入口文件，确保每次请求都拉取最新版本
• 检查CloudFront行为配置：针对index.html单独设置缓存策略，优先级高于默认策略

3. 验证CloudFront无效化任务状态 #

手动执行无效化后，到CloudFront控制台查看任务：

• 确认任务状态为「Completed」（正在执行的任务需要5-15分钟生效）
• 确认无效化路径为/*，覆盖所有文件（仅无效化index.html会漏掉静态资源更新）

4. 排除本地浏览器缓存干扰 #

即使CloudFront已更新，本地浏览器可能仍缓存旧内容：

• 打开开发者工具（F12），勾选「禁用缓存」后刷新页面
• 使用无痕模式访问站点，验证是否加载最新内容

5. 确认S3同步的完整性 #

检查GitHub Workflow部署日志，确认s3 sync命令无报错；对比本地dist目录与S3存储桶中的文件哈希值，确保index.html和新chunk文件已正确上传。

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