在 AWS Amplify 上部署 Web 应用程序

入门指南

模块 3:自动化部署

在本模块中,您将使用 Amplify 内置的 CI\CD 管道部署 Web 应用程序

简介

在本模块中,您将应用程序存储在 GitHub 存储库 (简称存储库) 上,然后使用 Amplify 控制台设置持续部署。

您将学到的内容

  • 将 Github 存储库连接到 Amplify
  • 使用 Amplify 设置持续部署

 完成时间

5 分钟

 模块先决条件

  • 具有管理员级访问权限的 AWS 账户**
  • 推荐的浏览器:最新版 Chrome 或 Firefox

[**] 过去 24 小时内创建的账户可能尚不具有访问此教程所需服务的权限。

实施

在 Github 上存储项目

在设置项目以自动部署更新之前,您需要将项目托管在某个位置。本指南假设您熟悉 GitHub、拥有相应的账户并知悉如何创建新的私有存储库。请创建一个私有存储库,并且将迄今为止创建的代码推送到该存储库。

设置持续部署

要配置 Amplify 以部署您的代码,您需要将其与自己的 GitHub 账户连接。通过 AWS 控制台完成此连接,因为它需要生成一个 GitHub 令牌来访问您的私有存储库,并将其存储在您的 AWS 账户中。为此,请从 amplify-app 目录运行 amplify add hosting。Amplify 将显示有关托管的问题列表,请选择如下所示的选项:

amplify add hosting

? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
  Manual deployment
  Learn more

这将在您的浏览器中开启新窗口,并打开 Amplify 控制台,以便您在项目上配置托管。在 Amplify 控制台上的应用程序页面上,单击前端环境选项卡,选择 GitHub 并单击连接分支按钮。

gsg-build-amplify-4.png

这会将您重定向到 GitHub。您现在将授予 Amplify 控制台访问 GitHub 账户的权限,以便该控制台部署在其中托管的源代码。为此,请单击绿色的授权 aws-amplify-console 按钮。

gsg-build-amplify-5

您现在已将 GitHub 存储库连接到 Amplify 应用程序。从“添加存储库分支”页面中,选择 amplify-web-app 存储库和分支。然后,单击下一步

gsg-build-amplify-6

下一步是为您的应用程序配置构建设置。您将需要一个 IAM 服务角色,该角色可让 Amplify 访问您账户内的 AWS 资源以自动部署。在“配置构建设置”页面上,单击蓝色框内的新建角色按钮。

gsg-build-amplify-7

这将在新选项卡上打开 IAM 控制台并将填充所需的值,在其中单击创建角色

  • 受信任实体的类型:AWS 服务
  • 服务:Amplify
  • 使用案例:Amplify - 后端部署
  • 权限策略:AdministratorAccess-Amplify
gsg-build-amplify-8

完成创建之后,您可以在浏览器中关闭此选项卡,然后返回“配置构建设置”页面,单击“刷新现有角色”,接下来从下拉菜单中选择刚刚创建的角色。然后,从“环境”下拉菜单中选择 dev - 这是您在运行 amplify init 后于项目上配置 Amplify 时创建的环境。

其余设置保留采用默认值,然后单击下一步

gsg-build-amplify-9

审查配置的值,然后单击保存和部署。Amplify 现在将开始在源存储库更改时自动部署您的 React 应用程序。

gsg-build-amplify-10

您现在可以通过按 Enter 键返回终端以跟踪进度:

? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘

部署完成后,它将在打印显示的 URL 中提供,任何人都可以通过此 URL 访问您的应用程序。

结论

在本模块中,您学习了如何将私有 GitHub 存储库与 Web 应用程序的代码连接起来,以使用 Amplify 设置自动部署。在下一个模块中,您将学习如何删除刚刚部署的应用程序以及为其创建的所有 AWS 资源。

下一步:清理资源

请就我们的表现提供反馈。

感谢您的反馈
很高兴此页面对您有所帮助。您是否乐意分享更多详细信息,以帮助我们继续改进?
关闭
感谢您的反馈
很抱歉,此页面未能帮到您。您是否乐意分享更多详细信息,以帮助我们继续改进?
关闭