如何将 React 应用部署到 AWS S3 和 CloudFront：2026 最终指南

部署现代 JavaScript 应用程序（如使用 React 构建的应用）已经发生了巨大演变。现在，不再需要维护复杂的服务器或虚拟机来提供静态文件。在 2026 年，任何专业单页面应用程序 (SPA) 的参考架构都是使用 Amazon S3 作为源存储，并使用 Amazon CloudFront 作为内容分发网络 (CDN)。

在本技术指南中，我们将详细分解将 React 项目迁移到世界级基础设施所需的每个步骤，优化成本并为最终用户提供最大的加载速度。

为什么为 React 选择 S3 + CloudFront？

在进入技术配置之前，了解这种架构相对于传统解决方案（如 Heroku、Vercel 或 VPS 服务器）的优势至关重要：

无限可扩展性： 您无需担心用户数量。AWS 会自动处理大规模的流量激增。
成本效益： 您只需为存储（对于 JS/HTML 文件而言极小）和传输的带宽付费。对于小型项目，这通常在 AWS 免费套餐范围内。
全球性能： CloudFront 在全球 400 多个边缘节点 (Edge Locations) 复制您的文件，将延迟降至最低。
强大的安全性： 由于没有服务器执行代码，您可以消除常见的攻击媒介。

第 1 步：准备您的 React 应用程序

要部署到 S3，我们首先需要生成静态生产文件。如果您使用的是 Vite 或 Create React App，该过程是标准化的：

# 对于使用 Vite 的项目 (2026 推荐)
npm run build

# 或者如果您使用的是经典的 CRA
npm run build

此命令将生成一个 dist/ 或 build/ 文件夹，其中包含 index.html 文件、压缩后的 JavaScript 包以及资源（CSS、图像）。这些是我们将上传到云端的唯一文件。

第 2 步：配置 Amazon S3（存储）

Amazon Simple Storage Service (S3) 将作为我们的“文件数据库”。请按照以下步骤正确配置：

1. 创建存储桶 (Bucket)

访问 AWS 控制台并创建一个新存储桶。名称必须在全球范围内唯一。例如：my-react-project-prod。

2. 禁用阻止公共访问（临时）

为了让 CloudFront 能够读取文件，或者如果您想使用 S3 的直接静态网站托管，您必须取消选中“阻止所有公共访问”选项。

3. 配置存储桶策略

在“权限”选项卡中添加以下策略，以允许全球读取您的文件：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::您的存储桶名称/*"
    }
  ]
}

第 3 步：配置 Amazon CloudFront (CDN)

直接从 S3 提供服务是可行的，但不专业。CloudFront 允许我们使用 HTTPS、自定义域名和全球缓存。

1. 创建分配 (Distribution)

在 CloudFront 控制台中，创建一个新分配，并将您的 S3 存储桶选择为“源域名 (Origin Domain)”。

2. 处理路由（SPA 的问题）

React 应用程序使用客户端路由 (React Router)。如果用户在 /dashboard 刷新页面，S3 将寻找名为 dashboard 的物理文件，并因为只存在 index.html 而返回 404 错误。

解决方案： 在 CloudFront 中，转到“错误响应 (Error Responses)”选项卡并创建一个自定义规则：

HTTP 错误代码： 404 (Not Found)
自定义错误响应： 是
响应页面路径： /index.html
HTTP 响应代码： 200 (OK)

这将把所有请求重定向到 React，允许内部路由处理导航。

第 4 步：使用基础设施即代码 (IaC) 实现自动化

在 AWS 控制台手动执行这些步骤容易出错且难以复制。这就是 Terraform 或 AWS CLI 等工具变得不可或缺的地方。

如果您是一位更喜欢专注于代码，而不是手动配置 AWS 数十个屏幕的开发人员，我们建议使用我们的工具 React2AWS。

React2AWS 为您做什么？ 它会立即生成必要的配置文件（Terraform 或 Bash 脚本），用于：

创建具有正确安全策略的存储桶。
配置带有 React 404 错误处理程序的 CloudFront 分配。
为静态文件设置最佳缓存头。

只需输入您的项目名称，即可获得准备运行的专业蓝图。

优化与最佳实践

为了将您的部署提升到更高水平，请考虑以下几点：

1. Gzip 和 Brotli 压缩

确保 CloudFront 启用了“自动压缩对象”。这将使您的 JS 包大小减少高达 70%，从而显著缩短加载时间。

2. 缓存失效 (Invalidation)

每当您将应用的新版本上传到 S3 时，CloudFront 将继续从其边缘节点提供旧版本，直到缓存过期。您必须使用路径 /* 创建一个“失效 (Invalidation)”以强制全局更新。

3. 使用 OAC (源访问控制) 确保安全

与其让 S3 存储桶保持公开，理想的设置是关闭它，并仅允许 CloudFront 拥有读取文件的权限。这可以防止用户绕过 CDN 直接访问存储。

结论

将 React 应用程序部署在 AWS S3 和 CloudFront 上是寻求可扩展性和低成本项目的最明智决定。虽然初始配置可能看起来令人生畏，但在安全性、全球性能方面的收益是非常值得的。

如果您想节省数小时的手动配置时间，并避免常见的 AWS 权限错误，请使用我们的基础设施生成器在几秒钟内自动完成整个过程。

立即生成用于 React 的 AWS 配置 →