我如何在 AWS Cloud Snd CloudFront 上部署 React 应用程序 – 完整演练

将 React 应用程序部署到 AWS S3 和 CloudFront：分步指南

本指南将引导您将 React 应用程序部署到 Amazon S3 进行静态托管，并使用 CloudFront 进行内容交付。

第 1 步：开始

开始之前，请确保您已：

1. 本地安装了 Node.js 和 npm。
2. 具有管理员权限的 AWS 账户。

第 2 步：构建你的 React 应用程序

1. 打开你的终端。
2. 使用 Vite 创建一个新的 React 应用：npm create vite@latest <your_project_name>（将 <your_project_name> 替换为您想要的名称）。
3. 导航到项目目录：cd <your_project_name>

第 3 步：验证和构建

1. 启动开发服务器进行测试：npm start。通过 http://localhost:3000 访问您的应用程序。
2. 停止开发服务器（Ctrl C）。
3. 构建您的生产应用程序：npm run build。这将创建一个包含优化文件的 build/ 文件夹。

第 4 步：设置 S3 存储桶

1. 在 AWS 管理控制台中，导航到 S3 服务。
2. 创建一个新存储桶，并提供唯一的名称（例如，<your_unique_bucket_name>）。
3. 选择一个区域并创建存储桶。

第 5 步：在 S3 上启用静态网站托管

1. 选择您新创建的存储桶。
2. 转到“属性”选项卡。
3. 在“静态网站托管”下启用它。
4. 将“索引文档”和“错误文档”设置为index.html。
5. 保存更改。

第 6 步：配置存储桶权限

1. 导航到“权限”选项卡。
2. 编辑存储桶策略。 确保该策略允许公众访问您的网站（考虑安全影响并针对生产环境进行相应调整）。
3. 保存政策。 通过在浏览器中访问 S3 存储桶 URL 来测试您的部署。

第 7 步：测试 S3 部署

通过 S3 URL（例如 http://<your_unique_bucket_name>.s3-website-.amazonaws.com/）访问您部署的应用程序。

步骤 8：为 CDN 配置 CloudFront

1. 在 AWS 管理控制台中，导航到 CloudFront 服务。
2. 创建一个新的发行版。选择“Web”作为交付方式。
3. 配置源设置，指向您的 S3 存储桶端点。
4. 将查看器协议策略设置为“将 HTTP 重定向到 HTTPS”。
5. 创建发行版。

第 9 步：测试 CloudFront 部署

部署 CloudFront 发行版后，通过 CloudFront URL 访问您的应用程序。

结论

您已成功将 React 应用程序部署到 AWS S3 和 CloudFront！您的应用程序现在通过 CDN 提供服务，确保为全球用户提供高可用性和优化性能。 请记住将占位符存储桶名称和区域替换为您的实际值。 部署到生产环境时始终优先考虑安全最佳实践。

以上是我如何在 AWS Cloud Snd CloudFront 上部署 React 应用程序 – 完整演练的详细内容。更多信息请关注PHP中文网其他相关文章！