本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。
从 AWS 存储库持续部署现代 AWS Amplify 网络应用程序 CodeCommit
由 Deekshitulu Pentakota (AWS) 与 Sai Katakam (AWS) 编写
环境:PoC 或试点 | 技术:Web 和移动应用程序; DevOps;现代化 | AWS 服务:AWS Amplify;AWS CodeCommit |
Summary
现代 Web 应用程序构造为单页应用程序 (SPA),将所有应用程序组件打包成静态文件。通过使用 AWS Amplify Hosting,您可构建持续集成和持续部署 (CI/CD) 管道,用于构建、部署和托管在基于 Git 的存储库中管理的现代 Web 应用程序。当您将 Amplify Hosting 连接至代码存储库时,每次提交都会启动一个工作流来部署应用程序的前端和后端。这种方法的好处是,Web 应用程序只有在部署成功完成后才会更新,这可以防止前端和后端之间的不一致。
在这种模式中,您可以使用 AWS CodeCommit 存储库来管理您的现代 Web 应用程序。这些说明中的示例 Web 应用程序采用 React SPA 框架。但是,Amplify Hosting 支持众多其他 SPA 框架,例如 Angular、Vue、Next.js;它还支持单站点生成器,例如 Gatsby、Hugo 和 Jekyll。
此模式适用于在以下服务与概念方面有经验的 AWS 构建者:
AWS CodeCommit
AWS Amplify Hosting
React
JavaScript
Node.js
npm
Git
先决条件和限制
先决条件
一个有效的 Amazon Web Services account。
在 Amplify 中创建资源的权限和. CodeCommit 有关更多信息,请参阅 A mplify 的身份和访问管理以及适用于 AWS 的身份和访问管理。 CodeCommit
文本编辑器或者代码编辑器。
CodeCommit,为使用 Git 凭据的 HTTPS 用户进行设置。
Amplify 的IAM 服务角色。
npm 和 Node.js,已安装
(npm 文档)。
限制
这种模式不介绍 Amplify 应用程序后端 (例如 API、身份验证或数据库) 的开发和集成。有关后端的更多信息,请参阅 Amplify 文档中的创建后端。
产品版本
AWS CLI 版本 2.0
Node.js 版本 16.x 或更高版本
架构
目标技术堆栈
包含 React SPA 的 AWS CodeCommit 存储库
AWS Amplify Hosting 工作流
目标架构
![从 CodeCommit 存储库部署网络应用程序并使用 AWS Amplify 托管的架构图](images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
工具
Amazon Web Services
AWS Amplify Hosting提供了基于 Git 的工作流,用于托管持续部署的全栈无服务器 Web 应用程序。
AWS CodeCommit 是一项版本控制服务,可帮助您私下存储和管理 Git 存储库,而无需管理自己的源代码控制系统。
AWS Identity and Access Management (AWS IAM) 通过控制验证和授权使用您 AWS 资源的用户,帮助您安全地管理对您 AWS 资源的访问。
其他工具
操作说明
任务 | 描述 | 所需技能 |
---|---|---|
创建存储库。 | 有关说明,请参阅 CodeCommit 文档中的创建 AWS CodeCommit 存储库。 | AWS DevOps |
克隆存储库。 | 有关说明,请参阅 CodeCommit 文档中的通过克隆 CodeCommit 存储库来连接存储库。如果系统提示,请提供 Git 凭证。 | 应用程序开发人员 |
任务 | 描述 | 所需技能 |
---|---|---|
创建新 React 应用程序。 |
有关创建自定义 React 应用程序的更多信息,请参阅创建 React 应用程序 | 应用程序开发人员 |
创建分支并推送代码。 |
| 应用程序开发人员 |
任务 | 描述 | 所需技能 |
---|---|---|
将 Amplify 连接至存储库。 | 有关说明,请参阅 Amplify Hosting 文档中的连接存储库。选择 AWS CodeCommit 以及您之前创建的存储库和分支。 | 应用程序开发人员 |
定义前端构建设置。 | 有关说明,请参阅 Amplify Hosting 文档中的确认前端版本设置。接受默认值或者输入以下内容。
| 应用程序开发人员 |
审核与部署。 | 有关说明,请参阅 Amplify Hosting 文档中的保存和部署。等待部署过程完成。 | 应用程序开发人员 |
任务 | 描述 | 所需技能 |
---|---|---|
验证初始部署。 | 部署过程完成后,在域下选择链接。验证应用程序是否按照预期运行。 | 应用程序开发人员 |
将更改推送至代码存储库。 | 在本地工作站上编辑代码并将更改推送到 CodeCommit 存储库。Amplify Hosting 会检测仓库中的更改,并自动启动构建和部署过程。确认应用程序更新在域内可见。 | 应用程序开发人员 |
相关资源
AWS CodeCommit 文档
AWS Amplify Hosting 文档
React 资源