从 AWS 存储库持续部署现代 AWS Amplify 网络应用程序 CodeCommit - AWS Prescriptive Guidance
Summary先决条件和限制架构工具操作说明相关资源

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

从 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

先决条件和限制

先决条件

限制

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

产品版本

  • AWS CLI 版本 2.0

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

架构

目标技术堆栈

  • 包含 React SPA 的 AWS CodeCommit 存储库

  • AWS Amplify Hosting 工作流

目标架构

从 CodeCommit 存储库部署网络应用程序并使用 AWS Amplify 托管的架构图

工具

Amazon Web Services

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

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

  • AWS Identity and Access Management（AWS IAM）通过控制验证和授权使用您 AWS 资源的用户，帮助您安全地管理对您 AWS 资源的访问。

其他工具

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

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

操作说明

任务描述所需技能

创建存储库。

有关说明，请参阅 CodeCommit 文档中的创建 AWS CodeCommit 存储库。

AWS DevOps

克隆存储库。

有关说明，请参阅 CodeCommit 文档中的通过克隆 CodeCommit 存储库来连接存储库。如果系统提示，请提供 Git 凭证。

应用程序开发人员
任务描述所需技能

创建新 React 应用程序。

  1. 输入以下命令导航到克隆的存储库。<repo name>替换为 CodeCommit 存储库的名称。

    $ cd <repo name>

  2. 输入以下命令，以在克隆的存储库中创建新的 React 应用程序。

    $ npx create-react-app .

  3. 编写应用程序代码，然后输入以下命令来启动它。

    $ npm start

有关创建自定义 React 应用程序的更多信息，请参阅 创建 React 应用程序文档中的创建 React 应用程序说明。您也可按照 Amplify 文档中部署前端中的说明，将示例 React 应用程序部署至 Amplify 账户。

应用程序开发人员

创建分支并推送代码。

  1. 输入以下命令在本地创建新分支，其中 <branch>是您要分配给新分支的名称。

    $ git checkout -b <branch>

  2. 输入以下命令将分支推送到 CodeCommit 存储库，其中<branch>是您在上一步中分配的名称。有关更多信息，请参阅使用 Commit。

    $ git push --set-upstream origin <branch>
应用程序开发人员
任务描述所需技能

将 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 会检测仓库中的更改，并自动启动构建和部署过程。确认应用程序更新在域内可见。

应用程序开发人员

相关资源

AWS CodeCommit 文档

AWS Amplify Hosting 文档

React 资源