部署在AWS上的React网站修改后浏览器不显示问题求助

• 检查AWS部署服务的缓存配置
  若使用S3托管搭配CloudFront：

  • 手动创建CloudFront缓存失效（Invalidation），路径填写/*强制刷新所有资源，覆盖默认的缓存策略。
  • 检查S3对象的Cache-Control响应头：React打包后的哈希命名静态文件（如main.abc123.js）可设置max-age=31536000, immutable做长期缓存；而index.html需设置no-cache或max-age=0，避免浏览器缓存入口文件。
    若使用Amplify：
  • 确认部署流程完整执行，无构建步骤跳过。可重新触发一次部署，确保新打包文件成功上传。

• 确认React打包产物的哈希命名规则
  执行npm run build打包时，静态资源文件名需包含唯一哈希值（如main.abc123.js），确保新旧资源文件名不同，让CDN或浏览器自动获取新版本。若未生成哈希文件名，检查webpack.config.js或自定义配置文件（如craco.config.js），确认已开启文件名哈希功能。

• 验证部署文件是否成功上传至AWS

  • 登录AWS控制台，查看对应存储服务（S3/Amplify存储），确认修改后的文件（如index.html、新js/css文件）已替换旧版本，且最后修改时间为最新状态。
  • 若通过CLI部署，检查命令输出日志，确认无报错、文件上传完成。

• 排查DNS缓存问题
  跨设备仍加载旧内容时，可能是DNS缓存指向了旧CDN节点。使用nslookup或dig命令查询域名对应IP，确认是否与AWS服务的最新IP一致。若存在差异，等待DNS缓存过期（TTL通常为几分钟到几小时），或联系域名服务商刷新DNS记录。

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