持续部署存储库中的现代 AWS Amplify 网络应用程序 AWS CodeCommit

PDF

由 Deekshitulu Pentakota () 和 Sai Katakam () AWS 创作 AWS

摘要

注意：AWS CodeCommit 不再向新客户开放。AWS CodeCommit 的现有客户可以继续正常使用该服务。了解更多。

现代 Web 应用程序构造为单页应用程序 (SPAs)，它将所有应用程序组件打包成静态文件。通过使用 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

• AWSAmplify 托管

• React

• JavaScript

• Node.js

• npm

• Git

先决条件和限制

先决条件

• 一个活动的 AWS 账户。

• 在 Amplify 中创建资源的权限和. CodeCommit 有关更多信息，请参阅 Amplify 的身份和访问管理以及适用于 Amplify 的 Id entity and Access 管理。AWS CodeCommit

• AWS命令行界面 (AWSCLI)，已安装和配置。

• 文本编辑器或者代码编辑器。

• CodeCommit，为使用 Git 凭证的HTTPS用户进行设置。

• Ampli fy 的IAM服务角色。

• npm 和 Node.js，已安装(npm 文档)。

限制

• 这种模式不讨论 Amplify 应用程序后端（例如身份验证或数据库）的API开发和集成。有关后端的更多信息，请参阅 Amplify 文档中的创建后端。

产品版本

• AWSCLI版本 2.0

• Node.js 版本 16.x 或更高版本

架构

目标技术堆栈

• AWS CodeCommit包含 React 的存储库 SPA

• AWSAmplify 托管工作流程

目标架构

工具

AWS 服务

• AWSAmplify Hosting 提供了基于 Git 的工作流程，用于托管具有持续部署能力的全栈无服务器 Web 应用程序。

• AWS CodeCommit是一项版本控制服务，可帮助您私下存储和管理 Git 存储库，而无需管理自己的源代码控制系统。

• AWSIdentity and Access Management (IAM) 通过控制谁经过身份验证并有权使用AWS资源，从而帮助您安全地管理对资源的访问权限。

其他工具

• Node.js 是一个事件驱动的 JavaScript 运行时环境，专为构建可扩展的网络应用程序而设计。

• npm 是在 Node.js 环境中运行的软件注册表，用于共享或借用软件包以及管理私有软件包的部署。

操作说明

创建存储 CodeCommit 库

任务	描述	所需技能
创建存储库。	有关说明，请参阅 CodeCommit 文档中的创建AWS CodeCommit 存储库。	AWS DevOps
克隆存储库。	有关说明，请参阅 CodeCommit 文档中的通过克隆 CodeCommit 存储库来连接存储库。如果系统提示，请提供 Git 凭证。	应用程序开发人员

创建存储 CodeCommit 库

任务	描述	所需技能
创建存储库。	有关说明，请参阅 CodeCommit 文档中的创建AWS CodeCommit 存储库。	AWS DevOps
克隆存储库。	有关说明，请参阅 CodeCommit 文档中的通过克隆 CodeCommit 存储库来连接存储库。如果系统提示，请提供 Git 凭证。	应用程序开发人员

创建 React 应用程序

任务	描述	所需技能
创建新 React 应用程序。	输入以下命令导航到克隆的存储库。<repo name>替换为 CodeCommit 存储库的名称。 $ cd <repo name> 输入以下命令，以在克隆的存储库中创建新的 React 应用程序。 $ npx create-react-app . 编写应用程序代码，然后输入以下命令来启动它。 $ npm start 有关创建自定义 React 应用程序的更多信息，请参阅创建 React 应用程序文档中的创建 React 应用程序说明。您也可按照 Amplify 文档中部署前端中的说明，将示例 React 应用程序部署至 Amplify 账户。	应用程序开发人员
创建分支并推送代码。	输入以下命令在本地创建新分支，其中 <branch> 是您要分配给新分支的名称。 $ git checkout -b <branch> 输入以下命令将分支推送到 CodeCommit 存储库，其中<branch>是您在上一步中分配的名称。有关更多信息，请参阅使用 Commit。 $ git push --set-upstream origin <branch>	应用程序开发人员

创建 React 应用程序

任务	描述	所需技能
创建新 React 应用程序。	输入以下命令导航到克隆的存储库。<repo name>替换为 CodeCommit 存储库的名称。 $ cd <repo name> 输入以下命令，以在克隆的存储库中创建新的 React 应用程序。 $ npx create-react-app . 编写应用程序代码，然后输入以下命令来启动它。 $ npm start 有关创建自定义 React 应用程序的更多信息，请参阅创建 React 应用程序文档中的创建 React 应用程序说明。您也可按照 Amplify 文档中部署前端中的说明，将示例 React 应用程序部署至 Amplify 账户。	应用程序开发人员
创建分支并推送代码。	输入以下命令在本地创建新分支，其中 <branch> 是您要分配给新分支的名称。 $ git checkout -b <branch> 输入以下命令将分支推送到 CodeCommit 存储库，其中<branch>是您在上一步中分配的名称。有关更多信息，请参阅使用 Commit。 $ git push --set-upstream origin <branch>	应用程序开发人员

在 Amp AWS lify 托管中部署应用程序

任务	描述	所需技能
将 Amplify 连接至存储库。	有关说明，请参阅 Amplify Hosting 文档中的连接存储库。选择AWS CodeCommit 您之前创建的存储库和分支。	应用程序开发人员
定义前端构建设置。	有关说明，请参阅 Amplify Hosting 文档中的确认前端版本设置。接受默认值或者输入以下内容。 Build settings: version: 0.1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - '**/*' cache: paths: - node_modules/**/*	应用程序开发人员
审核与部署。	有关说明，请参阅 Amplify Hosting 文档中的保存和部署。等待部署过程完成。	应用程序开发人员

在 Amp AWS lify 托管中部署应用程序

任务	描述	所需技能
将 Amplify 连接至存储库。	有关说明，请参阅 Amplify Hosting 文档中的连接存储库。选择AWS CodeCommit 您之前创建的存储库和分支。	应用程序开发人员
定义前端构建设置。	有关说明，请参阅 Amplify Hosting 文档中的确认前端版本设置。接受默认值或者输入以下内容。 Build settings: version: 0.1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - '**/*' cache: paths: - node_modules/**/*	应用程序开发人员
审核与部署。	有关说明，请参阅 Amplify Hosting 文档中的保存和部署。等待部署过程完成。	应用程序开发人员

验证持续部署

任务	描述	所需技能
验证初始部署。	部署过程完成后，在域下选择链接。验证应用程序是否按照预期运行。	应用程序开发人员
将更改推送至代码存储库。	在本地工作站上编辑代码并将更改推送到 CodeCommit 存储库。Amplify Hosting 会检测仓库中的更改，并自动启动构建和部署过程。确认应用程序更新在域内可见。	应用程序开发人员

验证持续部署

任务	描述	所需技能
验证初始部署。	部署过程完成后，在域下选择链接。验证应用程序是否按照预期运行。	应用程序开发人员
将更改推送至代码存储库。	在本地工作站上编辑代码并将更改推送到 CodeCommit 存储库。Amplify Hosting 会检测仓库中的更改，并自动启动构建和部署过程。确认应用程序更新在域内可见。	应用程序开发人员

相关资源

AWS CodeCommit 文档

• Setting up for AWS CodeCommit

  • 为使用 Git 凭据的HTTPS用户进行设置

  • 使用凭证助手在 Linux、macOS 或 Unix 上HTTPS连接AWS CodeCommit 存储库的AWSCLI设置步骤

• AWS 入门 CodeCommit

AWSAmplify Hosting 文档

• 现有代码入门

• 设置自定义域

React 资源

• 创建 React 应用程序网站

• 创建 React 应用程序文档

• 创建 React 应用程序存储库 (GitHub)