部署在AWS S3+CloudFront的React静态应用根路由无法渲染问题

针对你遇到的根路由无法渲染、static资源加载失败，但S3直接访问正常的问题，核心问题出在CloudFront的路由和错误处理配置上，以下是具体排查和修复步骤：

• 检查CloudFront默认根对象配置
  直接访问根路由时，CloudFront需要明确返回的默认文件。进入CloudFront分发详情页，在「常规」标签页找到「默认根对象」，确保设置为index.html。如果之前修改分发配置时误改了这个值，会导致根路由无法正确加载入口文件，进而无法加载static资源。

• 配置自定义错误响应，适配单页应用路由
  React单页应用的所有路由都依赖index.html解析，刷新非根路由时CloudFront会尝试查找对应路径的物理文件（不存在），需要将错误请求重定向到index.html：

  1. 进入CloudFront分发的「错误页面」标签页
  2. 创建两个自定义错误响应：
     • 选择HTTP错误代码404 Not Found，自定义响应代码设为200 OK，响应页面路径填/index.html
     • 同样添加403 Forbidden的自定义响应，参数设置同上
       这样无论访问哪个路由，CloudFront最终都会返回React的入口文件，让前端路由处理跳转逻辑。

• 验证缓存策略与路径匹配规则
  检查CloudFront的行为配置：

  • 确保默认行为（路径模式/*）的「源请求策略」正确转发请求到S3，没有错误地修改请求路径
  • 针对/static/*这类静态资源，可以单独创建行为，设置长期缓存规则（比如缓存TTL设为30天），避免静态资源被错误拦截或缓存失效

• 等待CloudFront配置部署生效
  修改CloudFront配置后，分发需要5-15分钟完成全局部署，修改完成后再测试，避免因配置未生效导致的问题。

• 确认S3静态网站托管配置
  虽然S3直接访问正常，但仍需确认：

  • S3桶已启用静态网站托管
  • 索引文档和错误文档均设置为index.html

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