AWS Amplify部署React新代码后网站未显示更新如何解决？

首先确认pipeline已经正常走完build、deploy全流程的前提下，按以下顺序排查：

• 校验构建产物正确性
  进入Amplify控制台对应应用的部署历史页，找到最新标记为成功的部署记录，下载构建产出的压缩包，解压后核对打包后的js、html文件是否包含你提交的最新代码逻辑。这一步主要排除构建配置错误问题：比如构建命令写错、部署分支选成了旧分支、环境变量配置异常导致构建时没有拉到最新提交。
• 校验重定向规则配置
  React是单页应用，多数用户会配置路径转发到index.html的规则，你需要进入Amplify的「重写和重定向」配置页，检查规则优先级：如果存在优先级更高的静态资源缓存规则、旧的301重定向规则，会直接返回旧资源，不会命中最新部署的文件。
• 校验CDN缓存状态
  打开浏览器开发者工具，切换到网络面板，勾选「禁用缓存」后执行硬刷新（Windows按Ctrl+Shift+R，Mac按Cmd+Shift+R）：
  • 如果硬刷新后能看到新内容，说明问题出在缓存策略上
  • 如果硬刷新还是旧内容，查看响应头的x-cache字段，若显示Hit from cloudfront，可以先手动点部署记录里的「使缓存失效」，等1-2分钟后再访问验证
• 校验本地缓存逻辑
  如果你的项目开启了PWA能力、注册了Service Worker，CDN更新后浏览器本地的SW仍会拦截请求返回旧缓存。可以在开发者工具的「应用-Service Worker」页点击「注销」，清除站点全部缓存后再访问验证。
• 校验访问域名正确性
  如果开启了Amplify多环境、分支预览功能，确认你访问的是对应最新部署分支的正式域名，不要误访问旧环境、预览环境的地址。

• 配置构建流程自动触发CDN缓存失效
  在项目根目录新增或修改amplify.yml构建配置，在部署完成后自动执行CloudFront缓存失效指令，配置示例：

  version: 1
  frontend:
    phases:
      preBuild:
        commands:
          - npm ci
      build:
        commands:
          - npm run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*
    postDeploy:
      commands:
        - aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"
  

  配置前需要给Amplify服务角色绑定CloudFront缓存失效的操作权限，同时把对应CloudFront分发ID配置到Amplify的环境变量中即可。
• 按资源类型配置差异化缓存策略
  React使用CRA/Vite构建时默认会给js、css等静态资源加内容哈希（比如main.abc123.js），代码变更后哈希值会同步变化，你可以直接在Amplify的「缓存设置」里按路径配不同缓存时长：
  • 对/index.html路径，设置缓存TTL为0秒，不开启CDN缓存
  • 对/*.js、/*.css、/static/*这类带哈希的静态资源，设置缓存TTL为31536000秒（1年）
    这种配置既不会损失静态资源加载性能，也能保证每次访问都拿到最新的index.html，自动引用最新版本的哈希资源，从根源上避免缓存导致的更新不生效问题。
• 适配Service Worker更新逻辑
  如果项目用了PWA，不要使用默认的SW静默激活逻辑，建议加两层处理：一是在SW代码中配置skipWaiting逻辑，检测到新版本后直接激活新的SW；二是在前端代码里加更新提示，检测到SW更新完成后提示用户刷新页面获取最新内容，避免本地缓存长期驻留旧版本。

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