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

# 为 Gen 1 应用程序创建后端
<a name="build-backend-Gen1"></a>

在本教程中，您将使用 Amplify 设置全栈 CI/CD 工作流程。您将在 Amplify Hosting 上部署前端应用程序。然后您将使用 Amplify Studio 创建一个后端。最后，您将云后端连接到前端应用程序。

## 先决条件
<a name="fullstack-sample-prerequisites"></a>

开始本教程之前，请完成以下先决条件。

**注册获取 AWS 账户**  
如果您还不是 AWS 客户，则需要按照在线说明进行[创建](https://portal.aws.amazon.com/billing/signup#/start/email)。 AWS 账户注册后，您就可以访问 Amplify 和其他可与您的应用程序配合使用的 AWS 服务。

**创建 Git 存储库**  
Amplify 支持 GitHub Bitbucket 和 GitLab。 AWS CodeCommit将您的应用程序推送到 Git 存储库。

**安装 Amplify 命令行界面（CLI）**  
有关说明，请参阅*Amplify Framework 文档*中的[安装 Amplify CLI](https://docs.amplify.aws/gen1/react/start/project-setup/prerequisites/#install-the-amplify-cli)。

## 第 1 步：部署前端
<a name="step-1-deploy-frontend"></a>

如果您在 git 存储库中有一个现有的前端应用程序要用于此示例，则可以继续按照部署前端应用程序的说明进行操作。

如果您需要创建用于此示例的新前端应用程序，可以按照《创建 React 应用程序文档》**中的[创建 React 应用程序](https://create-react-app.dev/docs/getting-started)说明进行操作。

**部署前端应用程序**

1. 登录 AWS 管理控制台 并打开 [Amplify](https://console.aws.amazon.com/amplify/) 控制台。

1. 在**所有应用程序**页面上，选择**新建应用程序**，然后在右上角选择**托管 Web 应用程序**。

1. 选择您的 GitHub、Bitbucket 或 AWS CodeCommit 存储库提供商 GitLab，然后选择 “**继续**”。

1. Amplify 授权访问您的 git 存储库。对于 GitHub 存储库，Amplify 现在使用 GitHub 应用程序功能来授权 Amplify 访问权限。

   有关安装和授权 GitHub 应用程序的更多信息，请参阅[设置 Amplify 对仓库的访问权限 GitHub](setting-up-GitHub-access.md)。

1. 在**添加存储库分支**页面上，执行以下操作：

   1. 在**最近更新的存储库**列表中，选择要连接的存储库的名称。

   1. 在**分支**列表中，选择要连接的存储库分支的名称。

   1. 选择**下一步**。

1. 在**配置构建设置**页面上，选择**下一步**。

1. 在**查看**页面上，选择**保存并部署**。完成部署时，您可以在 `amplifyapp.com` 默认域上查看应用程序。

**注意**  
为增强 Amplify 应用程序的安全性，已将 *amplifyapp.com* 域注册到[公共后缀列表 (PSL)](https://publicsuffix.org/)。为进一步增强安全性，如果您需要在 Amplify 应用程序的默认域名中设置敏感 Cookie，我们建议您使用带 `__Host-` 前缀的 Cookie。这将有助于保护您的域，防范跨站点请求伪造 (CSRF) 攻击。要了解更多信息，请参阅 Mozilla 开发者网络中的 [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) 页面。

## 步骤 2：创建后端
<a name="step-2-create-backend"></a>

现在，您已经在 Amplify Hosting 上部署了前端应用程序，可以创建后端了。使用以下说明创建带有简单数据库和 GraphQL API 端点的后端。

**创建后端**

1. 登录 AWS 管理控制台 并打开 [Amplify](https://console.aws.amazon.com/amplify/) 控制台。

1. 在**所有应用程序**页面上，选择您在*步骤 1* 中创建的应用程序。

1. 在应用程序主页上，选择**后端环境**选项卡，然后选择**开始**。这将启动默认**暂存** 环境的设置过程。

1. 设置完成后，选择 **启动 Studio** 以访问 Amplify Studio 中的**暂存**后端环境。

Amplify Studio 是一个可视化界面，用于创建和管理您的后端并加快前端用户界面的开发。有关 Amplify Studio 的更多信息，请参阅 [Amplify Studio 文档](https://docs.amplify.aws/gen1/react/tools/console/)。

使用以下说明，使用 Amplify Studio 可视化后端生成器界面可以创建简单的数据库。

**创建数据模型**

1. 在应用程序**暂存**环境的主页上，选择**创建数据模型**。这将打开数据模型设计器。

1. 在**数据建模**页面上，选择**添加模型**。

1. 对于标题，输入 **Todo**。

1. 选择**添加字段**。

1. 对于**字段名称**，输入 **Description**。

   以下屏幕截图是设计器中数据模型的外观示例。  
![\[用于创建数据模型的 Amplify Studio 用户界面。\]](http://docs.aws.amazon.com/zh_cn/amplify/latest/userguide/images/amplify-deploy-backend-1.png)

1. 选择**保存并部署**。

1. 返回 Amplify Hosting 控制台，**暂存**环境的部署将在进行中。

在部署过程中，Amplify Studio 会在后端创建所有必需的 AWS 资源，包括用于访问数据的 GraphQL API 和用于托管待办事项的 Amazon DynamoDB AWS AppSync 表。Amplify CloudFormation 用于部署您的后端，这使您可以将后端定义存储为。 infrastructure-as-code

## 第 3 步：将后端连接至前端
<a name="step-3-connect-backend-to-frontend"></a>

现在，您已经部署了前端并创建了包含数据模型的云后端，您需要将它们连接起来。按照以下说明，使用 Amplify CLI 将您的后端定义下拉到本地应用程序项目中。

**将云后端连接到本地前端**

1. 打开终端窗口并导航到本地项目的根目录。

1. 在终端窗口中运行以下命令，将红色文本替换为项目的唯一应用程序 ID 和后端环境名称。

   ```
   amplify pull --appId abcd1234 --envName staging
   ```

1. 按照终端窗口中的说明完成项目设置。

现在，您可以配置生成过程以将后端添加到持续部署工作流程中。按照以下说明在 Amplify Hosting 控制台中将前端分支与后端连接起来。

**连接前端应用程序分支和云后端**

1. 在应用程序主页上，选择**托管环境**选项卡。

1. 找到**主**分支并选择**编辑**。  
![\[Amplify 控制台中分支的编辑链接的位置。\]](http://docs.aws.amazon.com/zh_cn/amplify/latest/userguide/images/amplify_edit_backend_alternate.png)

1. 在**编辑目标后端**窗口中，为**环境**选择要连接的后端的名称。在此示例中，选择您在*步骤 2*中创建的**暂存**后端。

   默认情况下，全栈 CI/CD 处于启用状态。取消选中此选项可关闭此后端 CI/CD 的全栈功能。关闭全栈 CI/CD 会导致应用程序在*仅拉取*模式下运行。在构建时，Amplify 只会自动生成 `aws-exports.js` 文件，而不修改您的后端环境。

1. 接下来，您必须设置服务角色，以授予 Amplify 更改应用程序后端所需的权限。您可以使用现有的服务角色或创建新的服务角色。有关说明，请参阅[添加具有后端资源部署权限的服务角色](amplify-service-role.md)。

1. 添加服务角色后，返回**编辑目标后端**窗口，然后选择**保存**。

1. 要完成将**暂存**后端与前端应用程序**主**分支的连接，请对项目执行新的构建。

   请执行以下操作之一：
   + 从您的 git 存储库中，推送一些代码以在 Amplify 控制台中启动构建。
   + 在 Amplify 控制台中，导航到应用程序的构建详情页面，然后选择**重新部署此版本**。

## 后续步骤
<a name="next-steps-set-up-feature-branch-deployments"></a>

### 设置功能分支部署
<a name="set-up-feature-branch-deployments"></a>

按照我们推荐的工作流程，[在多个后端环境中设置功能分支部署](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#team-workflows-with-amplify-cli-backend-environments)。

### 在 Amplify Studio 中创建前端用户界面
<a name="create-studio-ui-components"></a>

使用 Studio 使用一组界面组件构建您的前端 ready-to-use用户界面，然后将其连接到您的应用程序后端。有关更多信息和教程，请参阅 *Amplify Framework 文档*中的 [Amplify Studio](https://docs.amplify.aws/gen1/react/tools/console/) 用户指南。