React项目部署至AWS S3 Bucket后脚本、图片等资源无法加载

开发者阿泽

2026-8-20

在AWS S3静态网站部署React项目的资源加载问题解决方法

问题背景

启用静态网站托管的AWS S3 Bucket部署React项目后，通过网站端点访问时，页面无法加载index.js、vendor.js等资源。这些资源能通过S3对象URL正常访问，但用网站端点路径访问就失败，只能手动替换资源链接，操作繁琐。已配置Bucket策略允许访问，仍未解决。

解决步骤

1. 构建React项目时设置正确的资源路径

React默认构建的资源链接可能不匹配S3静态网站的路径规则，需调整构建配置：

修改package.json：添加homepage字段，让资源使用相对路径：
```
"homepage": "."
```
或构建时指定环境变量（适用于create-react-app）：
```
PUBLIC_URL=. npm run build
```
重新构建后上传build文件夹的内容，资源链接会自动适配网站端点路径，无需手动修改。

2. 确认资源文件的访问权限

确保所有资源文件（JS、图片等）允许公共读取：

批量修改权限：在S3控制台选中所有文件，右键选择「修改权限」，添加「公共读取」权限；

或检查Bucket策略：确保策略包含允许匿名获取对象的规则，示例：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::你的Bucket名称/*"
    }
  ]
}