create-react-app部署至AWS S3存储桶后访问显示空白屏问题求助

可行解决方案 #

• 第一步先打开浏览器控制台查看错误：优先看Console面板的JS报错，以及Network面板的静态资源（css、js文件）加载状态：
  • 如果是资源404：检查资源路径是否匹配部署环境，若你不是部署在域名根路径，而是S3存储桶的子目录下，需要将package.json中的homepage字段设置为你的完整部署地址（如https://<bucket名>.<区域>.amazonaws.com/子路径/），重新执行yarn run build后再上传资源
  • 如果是JS运行报错：检查代码是否缺失依赖导入，比如你提供的App.js片段中没有引入useState、HashRouter、Switch等相关依赖，本地开发如果开启了自动导入可能正常运行，但生产构建可能会触发运行时错误导致应用崩溃
• 检查S3存储桶配置：
  • 确认所有上传的静态资源（包括static目录下的所有js、css、图片文件）都开启了公共读权限，仅给index.html开权限会导致其他资源加载失败
  • 确认S3静态网站托管配置已开启，索引文档设置为index.html；如果后续切换为BrowserRouter，需要同时将错误文档也设置为index.html
  • 确认存储桶的「阻止公共访问」配置的四个选项均已关闭，且桶策略允许公开读取资源
• 排查缓存问题：如果使用了CloudFront CDN，需要触发缓存失效；如果未用CDN，给index.html设置响应头Cache-Control: no-cache, no-store, must-revalidate，避免浏览器缓存旧的index.html文件
• 排查业务代码问题：
  • 先简化路由测试：将根路径的路由内容替换为纯文本节点（如<Route exact path="/"><div>路由测试</div></Route>），去掉所有自定义组件，重新构建上传验证是否能正常显示，排除Signup、Login、ProtectedRoute等组件内部报错导致的应用崩溃
  • 检查你的ProtectedRoute实现逻辑，是否存在鉴权失败返回null、无降级处理的情况

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