选择您的 Cookie 首选项

我们使用必要 Cookie 和类似工具提供我们的网站和服务。我们使用性能 Cookie 收集匿名统计数据，以便我们可以了解客户如何使用我们的网站并进行改进。必要 Cookie 无法停用，但您可以单击“自定义”或“拒绝”来拒绝性能 Cookie。

如果您同意，AWS 和经批准的第三方还将使用 Cookie 提供有用的网站功能、记住您的首选项并显示相关内容，包括相关广告。要接受或拒绝所有非必要 Cookie，请单击“接受”或“拒绝”。要做出更详细的选择，请单击“自定义”。

首选项
联系我们
反馈
AWS Documentation
创建 AWS 账户

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

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

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

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

由 Deekshitulu Pentakota (AWS) 与 Sai Katakam (AWS) 编写

摘要

注意： CodeCommit AWS 不再向新客户开放。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

  • 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 环境中运行的软件注册表，用于共享或借用软件包以及管理私有软件包的部署。

操作说明

Task描述所需技能

创建存储库。

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

AWS DevOps

克隆存储库。

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

应用程序开发人员

创建存储 CodeCommit 库

Task描述所需技能

创建存储库。

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

AWS DevOps

克隆存储库。

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

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

创建新 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>
应用程序开发人员

创建 React 应用程序

Task描述所需技能

创建新 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>
应用程序开发人员
Task描述所需技能

将 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 文档中的保存和部署。等待部署过程完成。

应用程序开发人员

在 AWS Amplify Hosting 中部署应用程序

Task描述所需技能

将 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 文档中的保存和部署。等待部署过程完成。

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

验证初始部署。

部署过程完成后，在域下选择链接。验证应用程序是否按照预期运行。

应用程序开发人员

将更改推送至代码存储库。

在本地工作站上编辑代码并将更改推送到 CodeCommit 存储库。Amplify Hosting 会检测仓库中的更改，并自动启动构建和部署过程。确认应用程序更新在域内可见。

应用程序开发人员

验证持续部署

Task描述所需技能

验证初始部署。

部署过程完成后，在域下选择链接。验证应用程序是否按照预期运行。

应用程序开发人员

将更改推送至代码存储库。

在本地工作站上编辑代码并将更改推送到 CodeCommit 存储库。Amplify Hosting 会检测仓库中的更改，并自动启动构建和部署过程。确认应用程序更新在域内可见。

应用程序开发人员

相关资源

AWS CodeCommit 文档

AWS Amplify Hosting 文档

React 资源

本页内容

隐私网站条款Cookie 首选项
© 2025, Amazon Web Services, Inc. 或其附属公司。保留所有权利。