AWS Amplify 框架入门备忘录

12 月 ago

新, 韵

14 minutes

简述

这是我在阅读AWS Amplify (アンプリファイ)框架的入门页面（Getting Started）并学习基本使用方法时记录的笔记。

环境

npm 6.14.4

请参考

Amplify フレームワーク

安装和配置Amplify CLI

Amplify CLI是Amplify框架的一个组件，可用于通过命令行创建项目和构建后端服务。

前提 (qian tI)- precondition

安装 Amplify CLI 需要 Node.js 8.x 或更高版本，以及 npm 5.x 或更高版本。

> node -v
v12.16.2

> npm -v
6.14.4

另外，虽然不需要使用AWS CLI，但我会提供版本信息。

> aws --version
aws-cli/2.0.7 Python/3.7.5 Windows/10 botocore/2.0.0dev11

安装

请使用npm来安装。

> npm install -g @aws-amplify/cli

// 省略

----------------------------------------
Successfully installed the Amplify CLI
----------------------------------------


JavaScript Getting Started - https://aws-amplify.github.io/docs/js/start


Android Getting Started - https://aws-amplify.github.io/docs/android/start


iOS Getting Started - https://aws-amplify.github.io/docs/ios/start

// 省略

+ @aws-amplify/cli@4.18.0
added 1048 packages from 713 contributors in 225.911s

确认版本

> amplify --version
Scanning for plugins...
Plugin scan successful
4.18.0

安装了 @aws-amplify/cli 后，在显示已安装的软件包列表时，将会显示以下多行消息。

> npm -g ls -depth=0

npm ERR! peer dep missing: inquirer@^5.0.0 || ^6.0.0, required by inquirer-autocomplete-prompt@1.0.2
// 複数行表示される

似乎出现了错误(Peer dependency missing #3284)，但似乎对操作没有影响。

设定

设置 amplify-cli 项目的属性，例如切换前端框架和添加/删除云提供商插件。

设置可以通过amplify configure命令进行。设置是通过对话形式进行的，并且在过程中需要在AWS控制台上注册新的IAM用户。

> amplify configure

Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

在这个时候，AWS控制台的登录页面会显示在浏览器上，然后您可以使用管理员账号登录。
登录成功后，请按Enter继续。

接下来选择区域（例如此例中的ap-northeast-1），然后输入要添加的IAM用户名。默认情况下会显示amplify-{随机英数字}，如果不需要更改可以直接按Enter，如果需要其他名称则输入相应的名称。

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-8ZcOy
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-8ZcOy&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

输入新增的IAM用户的访问密钥ID和秘密访问密钥，然后创建新的配置文件。
配置文件名称与用户名相同。

Enter the access key of the newly created user:
? accessKeyId:  XXXXXXXXXXXX**********
? secretAccessKey:  XXXXXXXXXXXXXXXXXXXX********************
This would update/create the AWS Profile in your local machine
? Profile Name:  amplify-8ZcOy

Successfully set up the new user.

以上就是设置的全部内容。

为了确认一下，在AWS CLI中注册的配置文件，我将尝试查看它。

> aws configure list --profile amplify-8ZcOy

      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile            amplify-8ZcOy           manual    --profile
access_key     ****************XXXX shared-credentials-file
secret_key     ****************XXXX shared-credentials-file
    region           ap-northeast-1      config-file    ~/.aws/config

创建一个Web应用项目

Amplify Framework 提供了用于与 iOS、Android、Web 以及 React Native 等应用程序集成的库和 UI 组件。

在JavaScript的框架中，包括Angular、Ember.js、Ionic、React、Vue等被支持。

准备项目的模板

我们创建一个名为demo-amplify-js-app的文件夹，并创建下面的空文件。

demo-amplify-js-app
  |
  `--- /src
  |     |
  |     `--- app.js
  |
  `--- index.html
  `--- package.json
  `--- webpack.config.js

http://localhost:8080

以上完成了项目模板的准备工作。

项目的启动

扩大初始

初始化一个新项目，在云中设置部署资源，并使您的项目准备好使用Amplify。

使用amplify init命令进行初始化。项目的初始化是以对话形式进行的。
带有问号的行是需要输入/选择的项目。
输入环境(environment)的名称，但在这里我们将其输入为”prod”，代表”生产环境”。环境指的是所谓的”生产环境”和”开发环境”，amplify命令可以通过指定环境名称来切换多个环境。

> amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project demo-amplify-js-app
? Enter a name for the environment prod
? 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 none
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm.cmd run-script build
? Start Command: npm.cmd 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

在接下来，当被询问是否要使用配置文件时，请选择”Yes”，然后选择使用通过amplify configure创建的配置文件（在此示例中为amplify-8ZcOy）。
之后，将进行项目初始化处理，并在AWS上添加一些资源。

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify-8ZcOy
Adding backend environment dev to AWS Amplify Console app: xxxxxxxxxxxxxx
- Initializing project in the cloud...

// 省略

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
“amplify console” to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

在AWS上由init创建的资源。

以下资源将在AWS上创建。顺便一提，资源指的是S3或DynamoDB。

放大仪表台

云形成

S3

角色

在init之后的项目

demo-amplify-js-app
  |
  `--- /amplify               <--- add
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- local-aws-info.json
  |      |      `--- local-env-info.json
  |      |      `--- project-config.json
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- amplify-meta.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- app.js
  |     `--- aws-exports.js   <--- add
  |
  `--- .gitignore             <--- add
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

项目的git版本控制

在`init`中，已经创建了一个名为`.gitignore`的文件，其内容如下。这个文件列出了一些不需要进行版本控制或者不能进行版本控制的文件。
为了更方便地了解以后项目的更新内容，我们将在此时将其转化为一个Git仓库。

#amplify
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/mock-data
amplify/backend/amplify-meta.json
amplify/backend/awscloudformation
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
amplifyconfiguration.json
amplify-build-config.json
amplify-gradle-config.json
amplifyxc.config

提升身份地位

显示尚未推送到云端的本地资源的状态（创建/更新/删除）。

您可以通过使用amplify status命令来确认项目正在使用哪些资源。init后，由于在AWS上还没有任何资源，因此会显示一个空表格，如下所示。

> amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

在项目中添加API。

增强添加 API

在本地后端添加Amplify分类的资源

使用 amplify add api 命令添加 API。该命令也以交互方式进行配置。
在 API 的选择中，我们选择了 GraphQL，并将其命名为 todo。
同时，系统会询问是否创建一个模式，我们选择了 Yes，并选择了名为 “Todo” 的模式。（※ 这个模式可以是用于说明的样例，也可以选择名为 “Posts” 的稍复杂模式。）

> amplify add api

? Please select from one of the below mentioned services: GraphQL
? Provide API name: todo
? Choose the default authorization type for the API API key
? Enter a description for the API key: todo api
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? No

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


GraphQL schema compiled successfully.

Edit your schema at D:\dev\vsc-workspace\demo-amplify-js-app\amplify\backend\api\todo\schema.graphql or place .graphql files in a directory at D:\dev\vsc-worksp
ace\demo-amplify-js-app\amplify\backend\api\todo\schema
Successfully added resource todo locally

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

在加入API之后的项目

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- local-aws-info.json
  |      |      `--- local-env-info.json
  |      |      `--- project-config.json
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- amplify-meta.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api                      <--- add
  |      |      |      |
  |      |      |      `--- /todo              <--- amplify add apiで指定したAPI名
  |      |      |             |
  |      |      |             `--- /build
  |      |      |             `--- /resolvers
  |      |      |             `--- /stacks
  |      |      |             |      |
  |      |      |             |      `--- CustomResources.json
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- schema.graphql
  |      |      |             `--- transform.config.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json      <--- modify
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

当回答者在命令行执行时创建了一个名为”Todo”的架构，并且在amplify/backend/api/todo路径下创建了一个名为schema.graphql的文件。

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

添加API之后的状态。

以下是API添加后的状态。其中Operation为Create，意味着当在AWS上进行反映时，将创建此API的资源。
值得注意的是，在GraphQL中，AppSync和DynamoDB将作为资源被创建。

> amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | todo          | Create    | awscloudformation |

推送放大

使用最新的本地发展情况为云资源提供配置。

要将本地状态反映到AWS上，您可以使用amplify push命令。在过程中，您将被询问是否要生成操作GraphQL API的代码以及使用哪种语言（JavaScript、TypeScript、flow）。
在这里，我们回答说要使用JavaScript来生成代码。

> amplify push

√ Successfully pulled backend environment dev from the cloud.

Current Environment: prod

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | todo          | 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://aws-amplify.github.io/docs/cli-toolchain/graphql#auth


GraphQL schema compiled successfully.

Edit your schema at D:\dev\vsc-workspace\demo-amplify-js-app\amplify\backend\api\todo\schema.graphql or place .graphql files in a directory at D:\dev\vsc-worksp
ace\demo-amplify-js-app\amplify\backend\api\todo\schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src\graphql\**\*.js
? 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
/ Updating resources in the cloud. This may take a few minutes...

// 省略

√ Generated GraphQL operations successfully and saved at src\graphql
√ All resources are updated in the cloud

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

通过push创建的AWS资源

放大控制台

AppSync 应用同步

DynamoDB –
DynamoDB – 亚马逊公司提供的NoSQL数据库服务

角色

云堆栈

推出后的项目

在src/graphql目录下生成了用于操作GraphQL API的代码。

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- ...省略...
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- /api                     <--- add
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- /build
  |      |      |             `--- /resolvers
  |      |      |             `--- /stacks
  |      |      |             |      |
  |      |      |             |      `--- CustomResources.json
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- schema.graphql
  |      |      |             `--- transform.config.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /awscloudformation        <-- add
  |      |      |      |
  |      |      |       `--- nested-cloudformation-stack.yml
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql               <--- add
  |     |      |
  |     |      `--- mutations.js
  |     |      `--- queries.js
  |     |      `--- schema.json
  |     |      `--- subscrptions.js
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml           <--- add
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

推送後的状态

以下是推送后的状态。由于推送成功，操作为无变化（No Change）。

> amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | todo          | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

在中文中，API的动作确认

我认为在这个时候，src/app.js仍然是一个空文件。请复制并粘贴在”步骤4：集成到您的应用程序”中提到的代码。
在更新app.js之后，使用npm start命令启动应用程序，并访问下面的URL。

http://localhost:8080

DynamoDB – 亚马逊云数据库

静态网站的托管

增强、增加托管

只需一种选择：使用amplify add hosting命令为应用程序准备将其托管到S3。在此过程中，您将被要求选择是使用CloudFront和S3还是仅使用S3，并命名用于公开的存储桶。
在此示例中，我们仅使用S3，并将公开存储桶名称保持默认设置。
在此时点，应用程序还未公开。这意味着在AWS上尚未创建资源。

> amplify add hosting

? Select the plugin module to execute Amazon CloudFront and S3
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name demo-amplify-js-app-20200415223152-hostingbucket
? index doc for the website index.html
? error doc for the website index.html

You can now publish your app using the following command:
Command: amplify publish

添加主机后的项目 de

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- ...省略...
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /awscloudformation
  |      |      |      |
  |      |      |       `--- nested-cloudformation-stack.yml
  |      |      |
  |      |      `--- /hosting                        <--- add
  |      |      |      |
  |      |      |      `--- /S3AndCloudFront
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- template.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json             <--- modify
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql
  |     |      |
  |     |      `--- mutations.js
  |     |      `--- queries.js
  |     |      `--- schema.json
  |     |      `--- subscrptions.js
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

增加主机后的状态

以下是添加主机后的状态。由于主机操作为创建（Create），因此可以了解到正在等待将其反映到AWS。

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |
| Api      | todo            | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

放大出版

执行 amplify push，然后构建并发布用于托管的客户端应用程序。

使用amplify publish命令进行发布。

> amplify publish

√ Successfully pulled backend environment prod from the cloud.

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |
| Api      | todo            | No Change | awscloudformation |
? Are you sure you want to continue? Yes
| Updating resources in the cloud. This may take a few minutes...

// 省略

Publish started for S3AndCloudFront
√ Uploaded files successfully.
Your app is published successfully.
http://demo-amplify-js-app-20200415223152-hostingbucket-prod.s3-website-ap-northeast-1.amazonaws.com

AWS资源是通过publish创建的。

S3

云编排

发布之后的项目

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- ...省略...
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /hosting                        <--- add
  |      |      |      |
  |      |      |      `--- /S3AndCloudFront
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- template.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /awscloudformation
  |      |      |      |
  |      |      |       `--- nested-cloudformation-stack.yml
  |      |      |
  |      |      `--- /hosting
  |      |      |      |
  |      |      |      `--- /S3AndCloudFront
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- template.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql
  |     |      |
  |     |      `--- mutations.js
  |     |      `--- queries.js
  |     |      `--- schema.json
  |     |      `--- subscrptions.js
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

发布后的状态

以下是发布后的状态。

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | todo            | No Change | awscloudformation |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx
Hosting endpoint: http://demo-amplify-js-app-20200415223152-hostingbucket-prod.s3-website-ap-northeast-1.amazonaws.com

以上是使用JavaScript创建Web应用程序的”快速入门”的全部内容。

应用程序的修改

前台代码修正

只需修改前端代码（如index.html和js文件），然后在使用npm run build命令构建后，可以使用amplify publish命令将其部署到AWS的S3上。

> amplify publish

修改GraphQL模式（后端代码修改）。

如果要在Todo对象中添加一个名为priority的字段，可以通过修改amplify/backend/api/todo的schema.graphql文件来实现。值得一提的是，以!结尾的字段是必填字段。

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

当查看状态时，可以看到Api的Operation已经变为Update。

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | todo            | Update    | awscloudformation |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx
Hosting endpoint: http://demo-amplify-js-app-20200416174831-hostingbucket-prod.s3-website-ap-northeast-1.amazonaws.com

为了反映对Todo对象的修改，请执行amplify push命令。
在执行过程中，会询问是否要更新GraphQL语句（查询、变更和订阅），请键入“Yes”以生成代码。

> amplify push

√ Successfully pulled backend environment prod from the cloud.

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | todo            | Update    | awscloudformation |
| Hosting  | S3AndCloudFront | No Change | 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://aws-amplify.github.io/docs/cli-toolchain/graphql#auth


GraphQL schema compiled successfully.
Edit your schema at D:\dev\vsc-workspace\demo-amplify-js-app\amplify\backend\api\todo\schema.graphql or place .graphql files in a directory at D:\dev\vsc-worksp
ace\demo-amplify-js-app\amplify\backend\api\todo\schema
? Do you want to update code for your updated GraphQL API Yes
? Do you want to generate GraphQL statements (queries, mutations and subscription) based on your schema types?
This will overwrite your current graphql queries, mutations and subscriptions Yes
/ Updating resources in the cloud. This may take a few minutes...

// 省略

√ Generated GraphQL operations successfully and saved at src\graphql
√ All resources are updated in the cloud

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

当后端修复完毕后，我们将根据以下示例修改受影响的前端源代码（src/app.js），例如修改注册新数据的代码。

const todo = { name: "Use AppSync", description: "Realtime and Offline", priority: 1 }
API.graphql(graphqlOperation(createTodo, { input: todo }))

如果在本地进行了验证并没有问题，最终将使用amplify publish命令进行发布。

添加 source-map

将以下行添加到webpack.config.js文件中。

module.exports = {

  devtool: 'source-map',

};

卸载应用程序

当在AWS上使用S3、AppSync、DynamoDB等涉及付费的服务时，若应用程序不再需要，则会将其删除以避免产生不必要的费用。

放大删除

从云端删除与该项目相关联的所有资源。

通过使用amplify delete命令，您可以删除与项目相关的资源。这个命令将帮助您删除几乎所有通过之前的操作创建的资源，但是为静态网站创建的S3存储桶将保留下来，所以您需要从AWS控制台另外进行删除。

> amplify delete

Scanning for plugins...
Plugin scan successful
? Are you sure you want to continue? (This would delete all the environments of the project from the cloud and wipe out all the local amplify resource files) Yes
- Deleting resources from the cloud. This may take a few minutes...
Deleting env:prod
√ Project deleted in the cloud
Project deleted locally.

删除后的项目 chú de

执行delete命令后，本地项目文件的大部分仍然存在。

demo-amplify-js-app
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql
  |     |      `--- schema.json
  |     `--- app.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

填補

控制台命令

浏览器启动并显示Amplify控制台。

> amplify console

帮助指令

帮助命令

> amplify help

> amplify <command> help

分类列表

カテゴリAPIガイドanalyticshttps://aws-amplify.github.io/docs/js/analyticsapihttps://aws-amplify.github.io/docs/js/apiauthhttps://aws-amplify.github.io/docs/js/authenticationfunction
hosting
interactionshttps://aws-amplify.github.io/docs/js/interactionsnotificationshttps://aws-amplify.github.io/docs/js/push-notificationspredictionshttps://aws-amplify.github.io/docs/js/predictionsstoragehttps://aws-amplify.github.io/docs/js/storagexrhttps://aws-amplify.github.io/docs/js/xr

命令列表

コマンド説明initInitializes a new project, sets up deployment resources in the cloud, and makes your project ready for Amplify.
新しいプロジェクトを初期化し、クラウドにデプロイリソースを設定して、プロジェクトをAmplifyに対応させます。configureConfigures the attributes of your project for amplify-cli, such as switching front-end framework and adding/removing cloud-provider plugins.
フロントエンドフレームワークの切り替えやクラウドプロバイダープラグインの追加/削除など、amplify-cliのプロジェクトの属性を構成します。pushProvisions cloud resources with the latest local developments.
最新のローカル開発でクラウドリソースをプロビジョニングします。pullFetch upstream backend environment definition changes from the cloud and updates the local environment to match that definition.
クラウドからアップストリームバックエンド環境定義の変更をフェッチし、その定義に一致するようにローカル環境を更新します。publishExecutes amplify push, and then builds and publishes client-side application for hosting.
amplify pushを実行してから、ホスティング用のクライアント側アプリケーションを構築して公開します。serveExecutes amplify push, and then executes the project’s start command to test run the client-side application locally.
amplify pushを実行し、プロジェクトの開始コマンドを実行して、クライアント側アプリケーションをローカルでテスト実行します。statusShows the state of local resources not yet pushed to the cloud (Create/Update/Delete).
まだクラウドにプッシュされていないローカルリソースの状態を表示します（作成/更新/削除）。deleteDeletes all of the resources tied to the project from the cloud.
プロジェクトに関連付けられているすべてのリソースをクラウドから削除します。<category> addAdds a resource for an Amplify category in your local backend.
ローカルバックエンドのAmplifyカテゴリのリソースを追加します。<category> updateUpdate resource for an Amplify category in your local backend.
ローカルバックエンドのAmplifyカテゴリのリソースを更新します。<category> pushProvisions all cloud resources in a category with the latest local developments.
カテゴリ内のすべてのクラウドリソースを最新のローカル開発でプロビジョニングします。<category> removeRemoves a resource for an Amplify category in your local backend.
ローカルバックエンドのAmplifyカテゴリのリソースを削除します。<category>Displays subcommands of the specified Amplify category.
指定したamplifyカテゴリのサブコマンドを表示します。mockRun mock server for testing categories locally.
ローカルでテストカテゴリのモックサーバーを実行します。codegenGenerates GraphQL statements(queries, mutations and eventHandlers) and type annotations.
GraphQLステートメント（queries, mutations and eventHandlers）とtype annotationsを生成します。envDisplays and manages environment related information for your Amplify project.
Amplifyプロジェクトの環境関連情報を表示および管理します。consoleOpens the web console for the selected cloud resource.
選択したAWSリソースのWebコンソールを開きます。

子命令

嘲笑

function

环境

remove

对话式的选择策略

我将补充关于amplify命令选项的内容。

简述

安装和配置Amplify CLI

前提 (qian tI)- precondition

安装

设定

创建一个Web应用项目

准备项目的模板

项目的启动

扩大初始

在AWS上由init创建的资源。

放大仪表台

云形成

S3

角色

在init之后的项目

项目的git版本控制

提升身份地位

在项目中添加API。

增强 添加 API

在加入API之后的项目

添加API之后的状态。

推送放大

通过push创建的AWS资源

放大控制台

AppSync 应用同步

DynamoDB – DynamoDB – 亚马逊公司提供的NoSQL数据库服务

角色

云堆栈

推出后的项目

推送後的状态

在中文中，API的动作确认

静态网站的托管

增强、增加托管

添加主机后的项目 de

增加主机后的状态

放大出版

AWS资源是通过publish创建的。

S3

云编排

发布之后的项目

发布后的状态

应用程序的修改

前台代码修正

修改GraphQL模式（后端代码修改）。

添加 source-map

卸载应用程序

放大删除

删除后的项目 chú de

填補

控制台命令

帮助指令

分类列表

命令列表

子命令

对话式的选择策略

初始化放大

增强添加 API

推送放大

增加托管

增强添加 API

DynamoDB –
DynamoDB – 亚马逊公司提供的NoSQL数据库服务