在 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 并单击连接分支按钮。

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

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

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

这将在新选项卡上打开 IAM 控制台并将填充所需的值,在其中单击创建角色:
- 受信任实体的类型:AWS 服务
- 服务:Amplify
- 使用案例:Amplify - 后端部署
- 权限策略:AdministratorAccess-Amplify

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

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

您现在可以通过按 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 访问您的应用程序。