1. 介绍

在本教程中，您将使用 AWS Amplify 创建一个简单的 Web 应用程序，AWS Amplify 是一组工具和服务，包括 Web 托管服务。在第一个模块中，您将在 AWS 上构建和托管 React 应用程序。在其余 4 个模块中，您将使用 CLI 初始化本地应用程序、添加身份验证、添加 GraphQL API 和数据库，并更新您的应用程序以存储图像。

2. 部署并托管 React App

AWS Amplify 提供了基于 Git 的 CI/CD 工作流程，用于构建、部署和托管具有无服务器后端的单页面 Web 应用程序或静态站点。连接到 Git 代码库后，Amplify 会确定前端框架，然后使用 Amplify CLI 配置的后端资源的构建设置，并在每次提交代码时自动部署更新。

在此部分，我们首先要创建一个新的 React 应用程序，并将其推送到 GitHub 代码库。然后，您将这个代码库连接到 AWS Amplify Web 托管并将其部署到 amplifyapp.com 域上托管的全球可用内容分发网络 (CDN)。接下来，我们将通过更改 React 应用程序并将新版本推送到可自动开始新部署的主分支，来演示连续部署功能。

2.1 创建新的 React 应用程序

创建 React 应用程序的最简单方法是使用 create-react-app 命令。在命令提示符或终端中使用以下命令安装此软件包：（Cloud9 IDE 环境）

npx create-react-app amplifyapp
cd amplifyapp
npm start

2.2 初始化 CodeCommit 代码库

在此步骤中，您将创建一个 CodeCommit 代码库并将代码提交到该代码库。

a. 为 React 应用创建一个新的 CodeCommit 代码库： amplifyapp

git clone https://git-codecommit.us-west-1.amazonaws.com/v1/repos/amplifyapp

b. 初始化 git 并经应用程序推送到新建的代码库：

cd amplifyapp
git remote rename origin old-origin
git remote add origin https://git-codecommit.us-west-1.amazonaws.com/v1/repos/amplifyapp
git push -u origin --all

2.3 使用 Amplify 部署 React 应用程序

在此步骤，将刚刚创建的 CodeCommit 代码库连接到 Amlify 服务。这可以使你能够在 AWS 上构建、部署、托管应用程序。

a. 在 AWS Amplify 服务控制台中，在 Deploy（部署）下选择 “Get Started”（开始使用）。

b. 选择 CodeCommit 作为代码库。


c. 接受默认的构建配置，选择下一步。

d. 保存并部署

e. Amplify 部署应用完成后，就可以在线上看到运行页面。

2.4 Amplify 自动部署代码的最新提交

a. 修改 src/App.js 并保存。

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello from V2</h1>
      </header>
    </div>
  );
}
export default App;

b. 在 Cloud9 终端将更改推送到 CodeCommit，将自动开始新的构建。

git add .
git commit -m “changes for v2”
git push origin master

c. 构建完成后，可以看到自动部署后的最新更改。

:::info 这部分，通过与 CodeCommit 集成并使用 AWS Amplify 在 AWS 云中部署了 React 应用程序。借助 AWS Amplify，可以在云中连续自动部署最新版本的应用程序，并将其托管在全球可用的 CDN 上。 :::

3.