使用AWS Code Pipeline部署React应用至S3桶的问题求助

数据老陈

2026-8-4

React部署到S3静态网站的核心问题解决

一、Pipeline部署的对象键与文件夹同步问题

React项目编译后的可部署产物在build目录（create-react-app默认编译输出），public是源码中的模板目录，绝对不能用public目录部署。
不要指定单个文件build/index.html作为源路径，这会把build文件夹结构同步到S3。正确配置是：
- 在Pipeline的部署阶段，将源路径设为build/**，目标S3桶路径留空（即桶根目录）。这样会把build下的所有文件（包括子目录资源）直接同步到S3根目录，不会携带build前缀。

二、手动上传后访问触发文件下载的问题

这是因为S3未正确识别网页文件的MIME类型，且静态网站托管配置未生效，解决步骤：

确保文件MIME类型正确
- 控制台上传：勾选"自动检测MIME类型"选项，让S3自动为.html、.js、.css等文件设置对应类型。
- CLI上传：手动指定内容类型，比如上传主页面：
```
aws s3 cp build/index.html s3://your-bucket/ --content-type text/html
```
  上传JS文件：
```
aws s3 cp build/static/js/main.xxx.js s3://your-bucket/static/js/ --content-type application/javascript
```
配置S3静态网站托管
- 进入桶的"属性"标签，找到"静态网站托管"并启用。
- 设置索引文档为index.html，错误文档也设为index.html（适配React SPA的路由跳转）。

配置桶权限
添加桶策略允许公开读取（替换your-bucket-name为实际桶名）：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}