= 在 Amazon S3 上部署 React 应用 =

== 5 分钟指南，介绍如何使用 S3 部署 React Apps ==

![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)

所以你已经完成了你的 React 应用程序并且你正在寻找将它托管在某个地方。你知道你可以使用 Amazon AWS S3 来托管你的 React 应用程序吗？它相对容易、成本低且部署迅速。

= 让我们开始吧！ =

==先决条件==

在我们开始托管之前，让我们完成管理设置。确保完成以下各项：

**您有一个 AWS 账户 在此处注册一个 AWS 账户：httpsaws.amazon.com/resources/create-account/ **创建一个 AWS 用户 在 AWS 控制台中，转到 IAM 选项卡，然后转到侧边栏上的“用户”部分。

单击“添加用户”“添加用户”并选中“程序访问”“程序访问”“ √。

![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)

单击“下一步：权限”，然后在此处选择“直接附加现有策略” ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯。为部署目的检查“AdministratorAccess”。

![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)

单击“下一步”按钮，最后单击“创建用户”。

![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png)

在最后一步，我们收到访问密钥 ID 和秘密访问密钥。下载并

**将它们保存到您的计算机，因为您稍后会需要它

== 安装 AWS CLI ==

AWS CLI 是一个强大的工具，可以帮助我们简化部署过程。

让我们使用 Homebrew（适用于 macOS）安装 AWS CLI。如果尚未安装 Homebrew，请安装。

*注意：如果您使用的是 Windows，您可以在官方文档 * *此处找到说明*

打开你的终端，然后输入

酿造安装awscli。

一旦安装了 CLI 工具，我们就可以配置我们的 AWS 账户

aws 配置。您需要在此处输入您之前下载的访问密钥信息。它应该类似于以下内容。

对于区域，您可以在 AWS 控制台上查看您的 URL，它会提到您所在的区域。例如，我的是 âïÂïÂap-southeast-1âÃÂÃÂ。

![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= 创建 React App =

您可能已经准备好部署 React 应用程序。但是，如果您需要示例应用程序，则可以使用以下选项：

- 通过运行生成样板 React 应用程序

npx create-react-app 我的应用程序

- 从 httpsgithub.com/harishv7/react-hook-form-example 下载我的示例 React 应用程序（带有表单示例）。这是为向 React 应用程序添加表单的教程完成的。在这里查看。

完成后，确保所有依赖项都已使用安装

纱线安装并让应用程序运行使用

纱线开始。

= 设置 S3 存储桶 =

现在我们已经准备好示例应用程序，让我们配置一个 S3 存储桶来托管我们的应用程序。

在 AWS 控制台上，搜索 âïÂïÂS3âÃÂà并转到 S3 仪表板。单击“创建存储桶”并为存储桶命名，例如“我的反应” -app-2021âÃÂïÂ（或您想要的任何其他内容）。

*注意：存储桶名称在整个 S3 中必须是唯一的。所以选择一个不存在的唯一名称，否则你会得到一个错误！* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)

因为我们正在托管它，所以打开对存储桶的公共访问。

![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)

保留其余设置不变，然后单击“创建存储桶”。您将在 S3 仪表板上看到如下所示的条目。

![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)

让我们单击并进入我们新创建的 S3 存储桶。

![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)

让我们点击“属性”，然后一直滚动到底部请参阅“静态网站托管”。

![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)

单击“启用”“启用”，然后输入“[index.html]” ? 在索引文档下。

![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)

保持其他字段不变，然后单击“保存更改”。

= 部署到 S3 =

现在，我们已准备好将我们的应用程序部署到 S3。这样做的方法是使用以下 CLI 命令：

aws s3 sync build/ s3your-bucket-name>--acl public-read
我们也可以将此命令添加到我们的 package.json 文件中，作为一个 âïÂÃÂdeployâÃÂà脚本。

![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)

让我们使用以下方法构建我们的应用程序

yarn build 有助于创建优化的生产构建。

接下来，让我们运行上面给出的 CLI 命令，或者如果您已经在 package.json 中设置了发布脚本，我们可以使用

纱部署。

![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)

就是这样，我们的应用程序现已部署！

要查找我们的应用程序的托管位置（网站链接），请转到 AWS S3 控制台并单击您创建的存储桶。

转到“属性”选项卡并向下滚动到“静态网站”托管××××××××部分和我们的 URL 将在那里。

![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)

单击它，您的应用程序将在新选项卡中打开。这是我的！

![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)

=结论=

我们已成功将 React 应用程序部署到 Amazon S3！这是快速部署和测试 React 原型并与他人共享的绝佳选择。它的部署也非常简单快捷。

希望本教程对您有用！

编码愉快！ »

*更多内容在 * *plainenglish.io*