基于S3+CloudFront部署React应用的缓存失效与根路径访问问题

问题1：CloudFront根路径返回旧缓存index.html，自动部署不生效 #

你可以选以下任意一种方案，也可以组合使用保障可靠性：

• 【部署时主动失效缓存】在你现有自动部署脚本的s3 sync步骤后增加CloudFront缓存失效命令：

  yarn build && aws s3 sync build/ s3://xxxxxx
  # 新增以下命令，替换为你自己的CloudFront分发ID
  aws cloudfront create-invalidation --distribution-id 你的分发ID --paths "/index.html"
  

  如果你还有其他不带哈希后缀的静态资源需要同步更新，可以把路径一起加在后面即可，CloudFront每月前1000次失效请求免费，完全满足常规部署需求。
• 【源站配置缓存规则避免长期缓存】在同步文件时单独给index.html设置不缓存的响应头，从源头阻止CloudFront长期缓存该文件：

  yarn build && aws s3 sync build/ s3://xxxxxx
  # 单独更新index.html的Cache-Control头
  aws s3 cp build/index.html s3://xxxxxx/index.html --cache-control "no-cache, no-store, must-revalidate"
  

  你也可以直接在CloudFront控制台新增一条针对/index.html路径的缓存行为，设置TTL为0，优先级高于默认缓存规则，效果一致。

额外提醒：如果你的React应用使用了BrowserRouter模式的前端路由，还需要在CloudFront中配置自定义错误响应，将404、403错误的响应码修改为200，响应页面指向/index.html，避免用户刷新子路由时出现访问错误。

问题2：根路径访问返回access denied错误 #

你通过配置CloudFront默认根对象为index.html的解决方案是正确的。原因是你选择了S3 REST API端点作为CloudFront源站，这类端点本身不支持S3静态网站托管自带的默认首页跳转逻辑，必须在CloudFront层配置默认根对象，才能将根路径的请求正确映射到index.html文件。

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