概述

使用过Amplify和React的人可能早就听说过，但是我一直没有使用。这篇文章的目标是使用它们来创建一个简单的应用程序。

事前检查

让我们检查各种环境的版本。（假设这些环境都安装正确）

$ create-react-app --version
3.4.1
$ node -v
v12.18.0
$ npm -v
6.14.4
$ amplify --version
4.27.1

创建一个React App

我将开始创建客户端应用程序的模板。

$ create-react-app client-app --template typescript
$ cd client-app
$ yarn start

创建Amplify项目 Amplify

让我们使用AmplifyCLI在AWS上创建后端(AppSync)。
首先，我们将创建Amplify项目。
※ 假设您已经预先创建了AWS配置文件。

$ applify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project backend-app
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation


For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

在创建Amplify项目时，我们会与您互动获取设置信息，并进行逐步回答。
选择最后要使用的配置文件后，将启动Cloudformation的部署。

部署的内容包括创建S3存储桶和各种角色。完成amplify init后，建议在AWS控制台上进行确认。

在Aplify上创建API

创建API与初始化相同，它会以互动方式询问配置信息，然后逐步回答。

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: AmplifyFunction
? Choose the default authorization type for the API API key
? Enter a description for the API key:
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
GraphQL schema compiled successfully.
? Do you want to edit the schema now? No
Successfully added resource

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

我们来检查一下，完成后在amplify目录中是否创建了模式的模型定义。

这是schema.graphql的内容。(这次特别没做什么，所以是最简配置)

type Todo @model {
  id: ID!
  name: String!
  description: String
}

部署到AWS云平台上

执行amplify push命令，将API部署到AWS上。由于会有互动式问题，我会逐一回答。

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category |  Resource name  | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | AmplifyFunction | Create    | awscloudformation |
? Are you sure you want to continue? Yes

The following types do not have '@auth' enabled. Consider using @auth with @model
     - Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth


GraphQL schema compiled successfully.
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/api.ts

当回答完成后，AWS将开始创建资源。
首先，会作为CloudFormation创建的堆栈的嵌套堆栈，
将创建后端资源，例如解析器（AppSync）和表（DynamoDB）。

当完成 amplify push 之后，在控制台上会显示 API（GraphQL）的端点和 API 密钥。这些信息会自动插入到 aws-exports.js 中。

这样就完成了后端的设置和构建。

下次

这些都是必备的，现在我们已经完成了最基本的客户端和后端环境搭建。下次我们可以开始将它们连接起来。