AWS Amplify部署React应用后出现白屏及403错误求助

问题核心 #

部署后页面白屏，浏览器控制台提示GET https://main.d3k27zedi0496.amplifyapp.com/static/js/main.a7eadf0b.js net::ERR_ABORTED 403，说明静态资源无法被正常访问，以下是针对性的排查和解决步骤：

解决方案 #

1. 修正本地构建命令 #

你当前使用的npm run build -g存在参数错误：-g是npm全局安装的参数，不适用于React的构建命令。正确的本地构建命令应为：

npm run build

错误命令可能导致生成的静态资源路径或权限异常，建议重新执行正确命令后再提交代码。

2. 调整package.json中的homepage配置 #

你设置的完整URL作为homepage会让React生成绝对路径的资源链接，与Amplify的部署路径不兼容：

• 方案一：直接移除homepage字段，React默认会使用相对路径生成资源链接。
• 方案二：将homepage改为.，强制使用相对路径：

  "homepage": ".",
  

3. 确认Amplify云端构建配置 #

登录AWS Amplify控制台进入你的应用：

• 打开Build settings页面，检查构建命令是否为npm run build，输出目录是否为build（这是React应用的默认构建输出目录）。
• 如果之前修改过构建配置，重置为默认设置，确保云端能正确生成静态资源文件。

4. 验证Git提交逻辑 #

你的.gitignore中包含build/是正确的（无需提交本地构建产物），但需确保：

• 提交的代码包含完整的package.json和所有源代码文件，没有遗漏依赖配置或核心源码。
• 执行git commit前，用git status确认所有源码修改都已被Git追踪。

5. 排查S3存储桶权限（若上述步骤无效） #

403错误可能源于Amplify关联的S3存储桶权限异常：

• 进入AWS S3控制台，找到名称包含amplify-前缀的目标存储桶。
• 检查存储桶的权限设置，确保Amplify服务角色拥有读写权限，且静态网站托管配置正确（Amplify默认会自动配置，可手动确认）。

6. 重新触发Amplify构建 #

完成所有配置修改后，在Amplify控制台点击Redeploy this version，触发全新的构建部署流程，确保所有修改生效。

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