aws amplify チュートリアル(react)

2020/11/7

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

###node.jsバージョン確認
PS C:\Users\KAOR> node -v
v14.15.0

###amplifyインストール
PS C:\Users\KAOR> npm install -g @aws-amplify/cli

###amplify設定。この処理の中でWEBブラウザを開き、自分でAWS ManagementConsoleに接続してユーザを作成する。
PS C:\Users\KAOR> amplify configure
Initializing new Amplify CLI version…
Done initializing new version.
Scanning for plugins…
Plugin scan successful
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

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

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

Successfully set up the new user.

###新しいReact Appを作成
PS C:\Users\KAOR> npx create-react-app react-amplified
npx: installed 92 in 52.973s

Creating a new React app in C:\Users\KAOR\react-amplified.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template…

> core-js@2.6.11 postinstall C:\Users\KAOR\react-amplified\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.7.0 postinstall C:\Users\KAOR\react-amplified\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js-pure@3.7.0 postinstall C:\Users\KAOR\react-amplified\node_modules\core-js-pure
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\Users\KAOR\react-amplified\node_modules\ejs
> node ./postinstall.js

+ cra-template@1.1.0
+ react@17.0.1
+ react-scripts@4.0.0
+ react-dom@17.0.1
added 1939 packages from 739 contributors and audited 1943 packages in 562.914s

117 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

Git repo not initialized Error: Command failed: git –version
at checkExecSyncError (child_process.js:616:11)
at execSync (child_process.js:652:15)
at tryGitInit (C:\Users\KAOR\react-amplified\node_modules\react-scripts\scripts\init.js:46:5)
at module.exports (C:\Users\KAOR\react-amplified\node_modules\react-scripts\scripts\init.js:283:7)
at [eval]:3:14
at Script.runInThisContext (vm.js:132:18)
at Object.runInThisContext (vm.js:309:38)
at internal/process/execution.js:77:19
at [eval]-wrapper:6:22
at evalScript (internal/process/execution.js:76:60) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 7956,
stdout: null,
stderr: null
}

Installing template dependencies using npm…
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.2.1 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

+ @testing-library/user-event@12.2.0
+ @testing-library/jest-dom@5.11.5
+ web-vitals@0.2.4
+ @testing-library/react@11.1.1
added 29 packages from 77 contributors and audited 1972 packages in 96.477s

117 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

Removing template package using npm…

npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.2.1 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

removed 1 package and audited 1971 packages in 62.385s

117 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

Success! Created react-amplified at C:\Users\KAOR\react-amplified
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd react-amplified
npm start

Happy hacking!
PS C:\Users\KAOR>
PS C:\Users\KAOR\react-amplified> npm start

> react-amplified@0.1.0 start C:\Users\KAOR\react-amplified
> react-scripts start

i 「wds」: Project is running at http://192.168.43.10/
i 「wds」: webpack output is served from
i 「wds」: Content not from webpack is served from C:\Users\KAOR\react-amplified\public
i 「wds」: 404s will fallback to /
Starting the development server…
Compiled successfully!

You can now view react-amplified in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.43.10:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

###ブラウザが起動してローカルサーバの起動確認になる。

##Now that we have a running React app, it’s time to set up Amplify so that we can create the necessary backend services needed to support the app.

###Initialize a new backend
PS C:\Users\KAOR\react-amplified> amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project reactamplified
? 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.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-configure-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify
Adding backend environment dev to AWS Amplify Console app: d1srhk7rc33dd0
| Initializing project in the cloud…

CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Sat Nov 07 2020 15:08:53 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Sat Nov 07 2020 15:08:52 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Sat Nov 07 2020 15:08:52 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Sat Nov 07 2020 15:08:51 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Sat Nov 07 2020 15:08:51 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Sat Nov 07 2020 15:08:51 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS amplify-reactamplified-dev-150843 AWS::CloudFormation::Stack Sat Nov 07 2020 15:08:47 GMT+0900 (日本標準時) User Initiated
/ Initializing project in the cloud…

CREATE_COMPLETE AuthRole AWS::IAM::Role Sat Nov 07 2020 15:09:07 GMT+0900 (日本標準時)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Sat Nov 07 2020 15:09:07 GMT+0900 (日本標準時)
/ Initializing project in the cloud…

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Sat Nov 07 2020 15:09:13 GMT+0900 (日本標準時)
| Initializing project in the cloud…

CREATE_COMPLETE amplify-reactamplified-dev-150843 AWS::CloudFormation::Stack Sat Nov 07 2020 15:09:16 GMT+0900 (日本標準時)
√ Successfully created initial AWS cloud resources for deployments.
√ Initialized provider successfully.
Initialized your environment successfully.

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 ” 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

PS C:\Users\KAOR\react-amplified>

###Install Amplify libraries

###Set up frontend
###Next, we need to configure Amplify on the client so that we can use it to interact with our backend services.
PS C:\Users\KAOR\react-amplified> npm install aws-amplify @aws-amplify/ui-react
npm WARN deprecated buffer@4.9.1: This version of ‘buffer’ is out-of-date. You must update to v4.9.2 or newer

> fast-xml-parser@3.17.4 postinstall C:\Users\KAOR\react-amplified\node_modules\fast-xml-parser
> node tasks/postinstall.js || exit 0

Love fast-xml-parser? Check https://amitkumargupta.work for more projects and contribution.

npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN @aws-amplify/ui-react@0.2.27 requires a peer of react@^16.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN @aws-amplify/ui-react@0.2.27 requires a peer of react-dom@^16.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-native-get-random-values@1.5.0 requires a peer of react-native@>=0.56 but none is installed. You must install peer dependencies yourself.
npm WARN @aws-amplify/datastore@2.7.2 requires a peer of @react-native-community/netinfo@^5.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.2.1 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

+ aws-amplify@3.3.7
+ @aws-amplify/ui-react@0.2.27
added 207 packages from 414 contributors and audited 2178 packages in 174.608s

121 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

PS C:\Users\KAOR\react-amplified>

###Set up frontend
###Next, we need to configure Amplify on the client so that we can use it to interact with our backend services.
###src/index.js をエディタで開き、最後のimport行の後ろに以下を追記。aws-exportsにはAWSのリージョンが記載されている。

import Amplify from “aws-amplify”;
import awsExports from “./aws-exports”;
Amplify.configure(awsExports);

###Create a GraphQL API and database
PS C:\Users\KAOR\react-amplified> amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: reactamplified
? Choose the default authorization type for the API API key
? Enter a description for the API key: demo
? After how many days from now the API key should expire (1-365): 30
? 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)

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.

Edit your schema at C:\Users\KAOR\react-amplified\amplify\backend\api\reactamplified\schema.graphql or place .graphql files in a directory at C:\Users\KAOR\react-amplified\amplify\backend\api\reactamplified\schema
? Do you want to edit the schema now? Yes
Please edit the file in your editor: C:\Users\KAOR\react-amplified\amplify\backend\api\reactamplified\schema.graphql
Successfully added resource reactamplified 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

Selected editor vscode was not found in your machine. Please manually edit the file created at C:\Users\KAOR\react-amplified\amplify\backend\api\reactamplified\schema.graphql
(node:9116) UnhandledPromiseRejectionWarning: Error: spawn code ENOENT
at notFoundError (C:\Users\KAOR\AppData\Roaming\npm\node_modules\@aws-amplify\cli\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (C:\Users\KAOR\AppData\Roaming\npm\node_modules\@aws-amplify\cli\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (C:\Users\KAOR\AppData\Roaming\npm\node_modules\@aws-amplify\cli\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
(Use node --trace-warnings ... to show where the warning was created)
(node:9116) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:9116) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
PS C:\Users\KAOR\react-amplified>

###VSCodeを自動で開けなかったので手動で開いてみたが、既に同じ内容が書かれていたのでそのまま閉じた。

###Deploying the API
###To deploy this backend, run the push command:
###いよいよpush。
PS C:\Users\KAOR\react-amplified> amplify push
√ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| ——– | ————– | ——— | —————– |
| Api | reactamplified | 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.

Edit your schema at C:\Users\KAOR\react-amplified\amplify\backend\api\reactamplified\schema.graphql or place .graphql files in a directory at C:\Users\KAOR\react-amplified\amplify\backend\api\reactamplified\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…

CREATE_IN_PROGRESS apireactamplified AWS::CloudFormation::Stack Sat Nov 07 2020 16:34:06 GMT+0900 (日本標準時) Resource creation Initiated
UPDATE_IN_PROGRESS AuthRole AWS::IAM::Role Sat Nov 07 2020 16:34:05 GMT+0900 (日本標準時)
UPDATE_IN_PROGRESS UnauthRole AWS::IAM::Role Sat Nov 07 2020 16:34:05 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS apireactamplified AWS::CloudFormation::Stack Sat Nov 07 2020 16:34:05 GMT+0900 (日本標準時)
UPDATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Sat Nov 07 2020 16:34:05 GMT+0900 (日本標準時)
UPDATE_IN_PROGRESS amplify-reactamplified-dev-150843 AWS::CloudFormation::Stack Sat Nov 07 2020 16:34:00 GMT+0900 (日本標準時) User Initiated
\ Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS amplify-reactamplified-dev-150843-apireactamplified-CMQW9PYXIA7Q AWS::CloudFormation::Stack Sat Nov 07 2020 16:34:06 GMT+0900 (日本標準時) User Initiated
\ Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS GraphQLAPI AWS::AppSync::GraphQLApi Sat Nov 07 2020 16:34:10 GMT+0900 (日本標準時)
/ Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE GraphQLAPI AWS::AppSync::GraphQLApi Sat Nov 07 2020 16:34:13 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS GraphQLAPI AWS::AppSync::GraphQLApi Sat Nov 07 2020 16:34:12 GMT+0900 (日本標準時) Resource creation Initiated
/ Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS GraphQLSchema AWS::AppSync::GraphQLSchema Sat Nov 07 2020 16:34:17 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_COMPLETE GraphQLAPIKey AWS::AppSync::ApiKey Sat Nov 07 2020 16:34:16 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS GraphQLAPIKey AWS::AppSync::ApiKey Sat Nov 07 2020 16:34:16 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS GraphQLSchema AWS::AppSync::GraphQLSchema Sat Nov 07 2020 16:34:15 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS GraphQLAPIKey AWS::AppSync::ApiKey Sat Nov 07 2020 16:34:15 GMT+0900 (日本標準時)
| Updating resources in the cloud. This may take a few minutes…

UPDATE_COMPLETE AuthRole AWS::IAM::Role Sat Nov 07 2020 16:34:20 GMT+0900 (日本標準時)
UPDATE_COMPLETE UnauthRole AWS::IAM::Role Sat Nov 07 2020 16:34:20 GMT+0900 (日本標準時)
| Updating resources in the cloud. This may take a few minutes…

UPDATE_COMPLETE DeploymentBucket AWS::S3::Bucket Sat Nov 07 2020 16:34:25 GMT+0900 (日本標準時)
/ Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE GraphQLSchema AWS::AppSync::GraphQLSchema Sat Nov 07 2020 16:35:18 GMT+0900 (日本標準時)
\ Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS Todo AWS::CloudFormation::Stack Sat Nov 07 2020 16:35:21 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS Todo AWS::CloudFormation::Stack Sat Nov 07 2020 16:35:20 GMT+0900 (日本標準時)
| Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS amplify-reactamplified-dev-150843-apireactamplified-CMQW9PYXIA7Q-Todo-1UT428WZS9CMJ AWS::CloudFormation::Stack Sat Nov 07 2020 16:35:20 GMT+0900 (日本標準時) User Initiated
/ Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS TodoIAMRole AWS::IAM::Role Sat Nov 07 2020 16:35:27 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS TodoTable AWS::DynamoDB::Table Sat Nov 07 2020 16:35:27 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS TodoTable AWS::DynamoDB::Table Sat Nov 07 2020 16:35:26 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS TodoIAMRole AWS::IAM::Role Sat Nov 07 2020 16:35:26 GMT+0900 (日本標準時)
\ Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE TodoIAMRole AWS::IAM::Role Sat Nov 07 2020 16:35:43 GMT+0900 (日本標準時)
| Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE TodoDataSource AWS::AppSync::DataSource Sat Nov 07 2020 16:35:47 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS TodoDataSource AWS::AppSync::DataSource Sat Nov 07 2020 16:35:47 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS TodoDataSource AWS::AppSync::DataSource Sat Nov 07 2020 16:35:45 GMT+0900 (日本標準時)
| Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS ListTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:49 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS CreateTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:49 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS UpdateTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:49 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS GetTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:49 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS DeleteTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:49 GMT+0900 (日本標準時)
– Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE ListTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:52 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS ListTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:52 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_COMPLETE DeleteTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:51 GMT+0900 (日本標準時)
CREATE_COMPLETE UpdateTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:51 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS DeleteTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:51 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_COMPLETE GetTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:51 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS UpdateTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:51 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS GetTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:35:51 GMT+0900 (日本標準時) Resource creation Initiated
\ Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE TodoTable AWS::DynamoDB::Table Sat Nov 07 2020 16:35:58 GMT+0900 (日本標準時)
\ Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE CreateTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:36:01 GMT+0900 (日本標準時)
CREATE_IN_PROGRESS CreateTodoResolver AWS::AppSync::Resolver Sat Nov 07 2020 16:36:01 GMT+0900 (日本標準時) Resource creation Initiated
\ Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE amplify-reactamplified-dev-150843-apireactamplified-CMQW9PYXIA7Q-Todo-1UT428WZS9CMJ AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:05 GMT+0900 (日本標準時)
| Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE Todo AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:08 GMT+0900 (日本標準時)
/ Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS CustomResourcesjson AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:10 GMT+0900 (日本標準時) Resource creation Initiated
CREATE_IN_PROGRESS CustomResourcesjson AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:10 GMT+0900 (日本標準時)
\ Updating resources in the cloud. This may take a few minutes…

CREATE_IN_PROGRESS amplify-reactamplified-dev-150843-apireactamplified-CMQW9PYXIA7Q-CustomResourcesjson-48TIKM56WGX7 AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:10 GMT+0900 (日本標準時) User Initiated
– Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE amplify-reactamplified-dev-150843-apireactamplified-CMQW9PYXIA7Q-CustomResourcesjson-48TIKM56WGX7 AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:15 GMT+0900 (日本標準時)
/ Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE CustomResourcesjson AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:21 GMT+0900 (日本標準時)
– Updating resources in the cloud. This may take a few minutes…

CREATE_COMPLETE amplify-reactamplified-dev-150843-apireactamplified-CMQW9PYXIA7Q AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:23 GMT+0900 (日本標準時)
– Updating resources in the cloud. This may take a few minutes…

UPDATE_COMPLETE amplify-reactamplified-dev-150843 AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:47 GMT+0900 (日本標準時)
UPDATE_COMPLETE_CLEANUP_IN_PROGRESS amplify-reactamplified-dev-150843 AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:46 GMT+0900 (日本標準時)
CREATE_COMPLETE apireactamplified AWS::CloudFormation::Stack Sat Nov 07 2020 16:36:44 GMT+0900 (日本標準時)
√ Generated GraphQL operations successfully and saved at src\graphql
√ All resources are updated in the cloud

GraphQL endpoint: https://65lcfeobpbbophohe7ts4ac5jq.appsync-api.us-west-2.amazonaws.com/graphql
GraphQL API KEY: xxxxxxxxxxxxxxxxxxxxx

PS C:\Users\KAOR\react-amplified>

###AWS Management Consoleで確認する。
AppSync

CloudFormation

IAM role

Amplifyのdev環境

###Connect frontend to API
###In this section you will create a way to list and create todos from the React application. To do this, you will create a form with a button to create todos as well as a way to fetch and render the list of todos.
### src/App.jsを以下のように書き換える。
/* src/App.js */
import React, { useEffect, useState } from ‘react’
import Amplify, { API, graphqlOperation } from ‘aws-amplify’
import { createTodo } from ‘./graphql/mutations’
import { listTodos } from ‘./graphql/queries’

import awsExports from “./aws-exports”;
Amplify.configure(awsExports);

const initialState = { name: ”, description: ” }

const App = () => {
const [formState, setFormState] = useState(initialState)
const [todos, setTodos] = useState([])

useEffect(() => {
fetchTodos()
}, [])

function setInput(key, value) {
setFormState({ …formState, [key]: value })
}

async function fetchTodos() {
try {
const todoData = await API.graphql(graphqlOperation(listTodos))
const todos = todoData.data.listTodos.items
setTodos(todos)
} catch (err) { console.log(‘error fetching todos’) }
}

async function addTodo() {
try {
if (!formState.name || !formState.description) return
const todo = { …formState }
setTodos([…todos, todo])
setFormState(initialState)
await API.graphql(graphqlOperation(createTodo, {input: todo}))
} catch (err) {
console.log(‘error creating todo:’, err)
}
}

return (

Amplify Todos

setInput(‘name’, event.target.value)}
style={styles.input}
value={formState.name}
placeholder=”Name”
/>
setInput(‘description’, event.target.value)}
style={styles.input}
value={formState.description}
placeholder=”Description”
/>

{
todos.map((todo, index) => (

{todo.name}

{todo.description}

))
}

)
}

const styles = {
container: { width: 400, margin: ‘0 auto’, display: ‘flex’, flexDirection: ‘column’, justifyContent: ‘center’, padding: 20 },
todo: { marginBottom: 15 },
input: { border: ‘none’, backgroundColor: ‘#ddd’, marginBottom: 10, padding: 8, fontSize: 18 },
todoName: { fontSize: 20, fontWeight: ‘bold’ },
todoDescription: { marginBottom: 0 },
button: { backgroundColor: ‘black’, color: ‘white’, outline: ‘none’, fontSize: 18, padding: ’12px 0px’ }
}

export default App

###ブラウザを更新。テスト書き込み。

###AWS側のリソースを確認
DynamoDBのテーブル

DynamoDBのテーブルの中身

正常にバックエンドに書き込み、読み込んで表示している。
いっったんここまで。とても簡単に実装できた。
使っていきたい。