AmplifyでReactアプリケーションを構築するチュートリアルをやってみた

AWS
AWS
この記事は約44分で読めます。

やること

以下のチュートリアルをやります。

AWS で React アプリケーションを構築する
  • CDNでReactアプリをホスト
  • アプリに認証追加
  • GraphQL API、DB、ストレージソリューション追加

チュートリアルをやりながら詰まったところや気になったところは、内容によっては別記事にしています。

やってみた

Reactアプリケーション作成

Reactアプリケーションを作成します。
次のコマンドで自動的にReactアプリケーションが作成。

$ npx create-react-app amplifyapp
Creating a new React app in /Users/xxx/aws/amplify/react-tutorial/amplifyapp.

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


added 1380 packages in 2m

178 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 39 packages in 9s

178 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1419 packages in 3s

178 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created amplifyapp at /Users/xxx/aws/amplify/react-tutorial/amplifyapp
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 amplifyapp
  npm start

Happy hacking!

上記コマンド実行時、Node.jsのバージョンが足りなかったのでアップデートした方法と、npxが良くわからなかったので調べた内容を以下記事にまとめています。

ディレクトリを移動し、Reactアプリケーションをローカルで立ち上げます。

$ cd amplifyapp
$ npm start
Compiled successfully!

You can now view amplifyapp in the browser.

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

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

webpack compiled successfully

Reactアプリケーションがブラウザで立ち上がります。

GitHubリポジトリ作成

GitHubでリポジトリを作成します。特別な作業はありません。

ReactアプリケーションのルートディレクトリでGitを初期化し、作成したGitHubリポジトリにReactアプリケーションをプッシュします。

初期化する前に、既に作成されている .git ディレクトリを削除します。

$ ls -al | grep git
drwxr-xr-x   10 xxx  staff      320  5  4 13:29 .git
-rw-r--r--    1 xxx  staff      310  5  3 20:16 .gitignore

$ rm -rf .git/

削除せずに git init を実行しても、初期化できないからです。
あとはGitの初期化からGitHubリポジトリへのプッシュまで行います。

$ git init
Initialized empty Git repository in /Users/xxx/aws/amplify/react-tutorial/amplifyapp/.git/

$ git remote add origin https://github.com/username/amplicyapp.git
$ git remote -v
origin  https://github.com/username/amplicyapp.git (fetch)
origin  https://github.com/username/amplicyapp.git (push)

$ git add .
$ git commit -m "initial commit"
$ git push origin master
補足

以下のコマンドでもプッシュできます。
addやcommitが必要ないのは、Reactアプリケーションを作成する最中にaddやcommitも行われているからだと思われる。

$ git remote add origin https://github.com/username/amplicyapp.git
$ git push origin master

commitを行うと、以下が出力されます。

On branch master
nothing to commit, working tree clean

Amplifyでデプロイ

AWSにログインし、AmplifyのコンソールからReactアプリケーションをデプロイします。
馬のアプリは確かAWSのワークショップで作成したアプリで、今回とは関係ありません。

GitHubを選択し、「続行」をクリック。

GitHubの認証が成功すると以下の画面に移動します。
作成したGitHubリポジトリ・ブランチを選択し、「次へ」をクリック。
作成したGitHubリポジトリが表示されない場合はGitHub Apps の「AWS Amplify」の権限が足りないので、「View GitHub permissions」から権限を変更します。
下部に「monorepoを接続しますか?」とありますが、monorepoとは一つのリポジトリで複数のプロジェクトを管理していることを指すので、今回は関係ありません。monorepoの場合、チェックを付して該当のプロジェクトが含まれるディレクトリを選択します。

デフォルトのビルド設定のまま「次へ」をクリック。

内容を確認し、「保存してデプロイ」。

Amplifyがデプロイされました。

「…amplifyapp.com」をクリックすると、Reactアプリケーションがグローバルに公開されていることが確認できます。

コードの変更を自動的にデプロイ

コードを変更し、GitHubにプッシュします。
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;

GitHubに変更をプッシュします。

$ git add .
$ git commit -m "changes for v2"
$ git push origin master

すると、自動的にAmplifyのビルドが走ります。

デプロイ完了後、また「…amplifyapp.com」をクリックし、変更が反映されていることを確認します。
「Hello from V2」が確認できるため、変更が反映されていることがわかります。

ローカルAmplifyアプリを初期化する

Amplify CLI をインストールします。
私は既にインストール済みなので、次のコマンドでアップデートしていることになります(インストールとアップデートのコマンドは同一)。

$ npm install -g @aws-amplify/cli

次に、Amplify CLI の設定をします。

$ 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コンソールが表示されますが、無視してエンターをクリック。

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

Amplify CLI で使用する IAM ユーザーを作成するように促されますので、IAMユーザーを作成します。

既にアタッチするポリシーが選択されているので、そのまま次のステップに移ります。

何もせず次のステップへ。

内容を確認し、ユーザーを作成します。

認証情報をダウンロードします。

プロンプトにアクセスキー・シークレットアクセスキー・Profile名を入力します。
これらの情報は ~/.aws/credentials に反映されるため、AWS CLI 利用時にProfile名をdefaultで利用している方は、他のProfile名を入力した方がいいでしょう(既存のdefaultがある場合、上書きされる挙動でした)。

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

Successfully set up the new user.

これでAmplify CLIのセッティングが終わったので、Amplifyプロジェクトをローカルで初期化します。
「–appId」は、Amplifyコンソールの「アプリの設定」「全般」のアプリケーションARN末尾から確認できます。

$ amplify init --appId xxx
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project xxx
The following configuration will be applied:

Project information
| Name: xxx
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
Named profiles for the AWS CLI - AWS Command Line Interface
Create and use name profiles for AWS CLI commands.
? Please choose the profile you want to use default Amplify AppID found: xxx. Amplify App name is: test-amplify Adding backend environment dev to AWS Amplify app: xxx ⠦ Initializing project in the cloud... (省略) ✔ 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 <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 push" to deploy everything

Amplifyプロジェクトをダッシュボードで確認する際は、以下コマンドを実行します。

$ amplify console
? Which site do you want to open? …  (Use arrow keys or type to filter)
❯ Amplify Studio
  AWS console

Amplify Studio を選択すると以下の画面に、

AWS console を選択すると以下の画面に移動します。

認証を追加

Amplifyライブラリをインストール

AWSのサービスとやりとりするための aws-amplify と、フレームワーク固有のUIコンポーネントの @aws-amplify/ui-react ライブラリをインストールします。

$ npm install aws-amplify @aws-amplify/ui-react

認証サービスの作成

認証サービスをAmplifyプロジェクトに追加します。

$ amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource amplicyapp413c15cf 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

認証サービスのデプロイ

認証サービスをデプロイします。「–y」オプションで全ての質問を「yes」に設定します。「–y」オプションを付けない場合、デプロイしますか?という趣旨の質問に対して Yes or No で答えていきます。

$ amplify push --y
✔ Successfully pulled backend environment staging from the cloud.

    Current Environment: staging
    
┌──────────┬────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name      │ Operation │ Provider plugin   │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Auth     │ amplicyapp413c15cf │ Create    │ awscloudformation │
└──────────┴────────────────────┴───────────┴───────────────────┘
⠴ Updating resources in the cloud. This may take a few minutes...

(省略)

✔ All resources are updated in the cloud
https://docs.amplify.aws/cli/usage/headless/

Amplifyリソースを使用してReactプロジェクトを設定する

src/aws-export.jsファイルにAmplifyプロジェクトで使用できるAWSリソースが定義されているので、src/index.jsファイルの最後のインポートの下に、次のコードを追加します。

import Amplify from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);

App.jsに認証フローを追加する

src/App.jsを次のコードで更新します。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { withAuthenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css';

function App({ signOut, user }) {
  return (
    <div className="App">
      <header>
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello {user.username}</h1>
        <button onClick={signOut}>Sign out</button>
      </header>
    </div>
  );
}

export default withAuthenticator(App);

チュートリアルのコードは現在の @aws-amplify/ui-react のバージョンではおそらく使用できないので、以下のQuisk Startから一部拝借しました。

Authenticator | Amplify UI
Authenticator component adds complete authentication flows to your application with minimal boilerplate - Amplify UI

アプリケーションをローカルで確認すると、以下のように認証画面が確認できます。

試しにアカウントを作成してサインインすると、以下の画面に移ります。

変更をデプロイ

変更をGitHubにプッシュします。

git add .
git commit -m “added auth”
git push origin master

Amplifyで自動的にビルドが開始されましたが、ビルドに失敗しました。
WARNINGやERRORは多数出ていましたが、以下のINFOが気になったので修正します。

2022-05-04T12:48:50.821Z [INFO]: Module not found: Error: Can't resolve './aws-exports' in '/codebuild/output/src819687030/src/amplicyapp/src'

Amplifyのコンソールから、ビルド設定を編集します。

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

コンソールから再デプロイを行うと、また失敗しました。

                                 # Starting phase: preBuild
                                 # Executing command: npm ci
2022-05-04T13:06:30.403Z [WARNING]: npm
2022-05-04T13:06:30.404Z [WARNING]: WARN prepare removing existing node_modules/ before installation
2022-05-04T13:06:52.068Z [INFO]: > core-js@3.22.4 postinstall /codebuild/output/src583969016/src/amplicyapp/node_modules/core-js
                                 > node -e "try{require('./postinstall')}catch(e){}"
2022-05-04T13:06:52.114Z [INFO]: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
                                 The project needs your help! Please consider supporting of core-js:
                                 > https://opencollective.com/core-js 
                                 > https://patreon.com/zloirock 
                                 > bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz 
                                 Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
2022-05-04T13:06:52.292Z [INFO]: > core-js-pure@3.22.4 postinstall /codebuild/output/src583969016/src/amplicyapp/node_modules/core-js-pure
                                 > node -e "try{require('./postinstall')}catch(e){}"
2022-05-04T13:06:52.877Z [INFO]: added 2054 packages in 22.501s
2022-05-04T13:06:52.892Z [INFO]: # Completed phase: preBuild
                                 # Starting phase: build
2022-05-04T13:06:52.892Z [INFO]: # Executing command: amplifyPush --simple
2022-05-04T13:06:52.897Z [INFO]: # Getting Amplify CLI Cloud-Formation stack info from environment cache
2022-05-04T13:06:52.902Z [INFO]: # Start initializing Amplify environment: master
2022-05-04T13:06:52.903Z [INFO]: # Initializing new Amplify environment: master (amplify init)
2022-05-04T13:06:57.601Z [INFO]: Invalid feature flag configuration
2022-05-04T13:06:57.602Z [INFO]: These feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI:
                                   - graphqltransformer.showfieldauthnotification
                                   - graphqltransformer.usesubusernamefordefaultidentityclaim
                                 This issue likely happens when the project has been pushed with a newer version of Amplify CLI, try updating to a newer version.
                                 Ensure that the CI/CD pipeline is not using an older or pinned down version of Amplify CLI.
                                 Learn more about feature flags: https://docs.amplify.aws/cli/reference/feature-flags
2022-05-04T13:07:02.251Z [INFO]: Invalid feature flag configuration
2022-05-04T13:07:02.253Z [INFO]: These feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI:
                                   - graphqltransformer.showfieldauthnotification
                                   - graphqltransformer.usesubusernamefordefaultidentityclaim
                                 This issue likely happens when the project has been pushed with a newer version of Amplify CLI, try updating to a newer version.
                                 Ensure that the CI/CD pipeline is not using an older or pinned down version of Amplify CLI.
                                 Learn more about feature flags: https://docs.amplify.aws/cli/reference/feature-flags
2022-05-04T13:07:02.269Z [ERROR]: !!! Build failed
2022-05-04T13:07:02.269Z [ERROR]: !!! Non-Zero Exit Code detected
2022-05-04T13:07:02.269Z [INFO]: # Starting environment caching...
2022-05-04T13:07:02.270Z [INFO]: # Uploading environment cache artifact...
2022-05-04T13:07:02.362Z [INFO]: # Environment caching completed
Terminating logging...

「Invalid feature flag configuration」が気になったので調べてみると、以下のIssueが関係していそうでした。

Invalid feature flag configuration on build · Issue #9498 · aws-amplify/amplify-cli
Before opening, please confirm: I have installed the latest version of the Amplify CLI (see above), and confirmed that the issue still persists. I have searched...
Overriding default version of package Amplify CLI results in error · Issue #2612 · aws-amplify/amplify-hosting
Before opening, please confirm: I have checked to see if my question is addressed in the FAQ. I have searched for duplicate or closed issues. I have read the gu...

ビルドの設定からライブパッケージのバージョンを設定します。
Amplify CLI を latest に(画像では Node.js を 14 にしていますが、これは不要です)。

コンソールから再デプロイを行うと、またエラーになりました。
アプリにIAMロールを設定する必要があるようです。
「Fix this」をクリックし、アプリケーション設定を編集します。

「新しいロールを作成」をクリックし、デフォルト値のままIAMロールを作成します。

作成したIAMロールを選択し、保存します。

コンソールから再デプロイすると、デプロイに成功しました。

GraphQL APIを作成

次のコマンドを実行してGraphQL APIをアプリに追加。チュートリアルと異なりますが、以下を参考にしています。

https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js/
$ amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to 
edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo”
 with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

✅ GraphQL schema compiled successfully.

Edit your schema at /Users/xx/aws/amplify/test-amplify/test/amplify/backend/api/testamplify/schema.graphql or place .graphql files in a directory at /Users/xx/aws/amplify/test-amplify/test/amplify/backend/api/testamplify/schema
✔ Do you want to edit the schema now? (Y/n) · yes
Edit the file in your editor: /Users/xx/aws/amplify/test-amplify/test/amplify/backend/api/testamplify/schema.graphql
✅ Successfully added resource testamplify 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

shema.graphqlファイルのモデルを以下にします。

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

APIをデプロイします。

$ amplify push --y

GraphQL API を使用するフロントエンドコードを記述

src/App.jsを次のコードで更新します。

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { withAuthenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css';
import { API } from 'aws-amplify';
import { listNotes } from './graphql/queries';
import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';

const initialFormState = { name: '', description: '' }

function App({ signOut, user }) {
  const [notes, setNotes] = useState([]);
  const [formData, setFormData] = useState(initialFormState);

  useEffect(() => {
    fetchNotes();
  }, []);

  async function fetchNotes() {
    const apiData = await API.graphql({ query: listNotes });
    setNotes(apiData.data.listNotes.items);
  }

  async function createNote() {
    if (!formData.name || !formData.description) return;
    await API.graphql({ query: createNoteMutation, variables: { input: formData } });
    setNotes([ ...notes, formData ]);
    setFormData(initialFormState);
  }

  async function deleteNote({ id }) {
    const newNotesArray = notes.filter(note => note.id !== id);
    setNotes(newNotesArray);
    await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
  }
  return (
    <div className="App">
      <h1>My Notes App</h1>
      <input
        onChange={e => setFormData({ ...formData, 'name': e.target.value})}
        placeholder="Note name"
        value={formData.name}
      />
      <input
        onChange={e => setFormData({ ...formData, 'description': e.target.value})}
        placeholder="Note description"
        value={formData.description}
      />
      <button onClick={createNote}>Create Note</button>
      <div style={{marginBottom: 30}}>
        {
          notes.map(note => (
            <div key={note.id || note.name}>
              <h2>{note.name}</h2>
              <p>{note.description}</p>
              <button onClick={() => deleteNote(note)}>Delete note</button>
            </div>
          ))
        }
      </div>
      <img src={logo} className="App-logo" alt="logo" />
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}

export default withAuthenticator(App);

アプリをテストするために、次のコマンドを実行します。

$ npm start

立ち上がりまで多少時間がかかりますが、サインイン後 name, description を入力して Create Note をクリックし、GraphQLが反映されることを確認できました。

ストレージサービスを追加

次のコマンドを実行し、画像用のストレージを追加します。

$ amplify add storage
? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
✔ Provide a friendly name for your resource that will be used to label this category in the project: · imageStorage
✔ Provide bucket name: · test-amplify-image-storage-xxx
✔ Who should have access: · Auth users only
✔ What kind of access do you want for Authenticated users? · create/update, read, delete
✔ Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) · no
✅ Successfully added resource imageStorage locally

⚠️ If a user is part of a user pool group, run "amplify update storage" to enable IAM group policies for CRUD operations
✅ Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

画像をアップロードするため、GraphQLのスキーマを変更します。

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

GraphQL API とストレージの更新をデプロイします。

$ amplify push --y

バックエンドが更新できたので、Reactアプリを更新し、メモ用に画像をアップロード・表示する機能を追加します。

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { withAuthenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css';
import { API, Storage } from 'aws-amplify';
import { listNotes } from './graphql/queries';
import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';

const initialFormState = { name: '', description: '' }

function App({ signOut, user }) {
  const [notes, setNotes] = useState([]);
  const [formData, setFormData] = useState(initialFormState);

  useEffect(() => {
    fetchNotes();
  }, []);

  async function onChange(e) {
    if (!e.target.files[0]) return
    const file = e.target.files[0];
    setFormData({ ...formData, image: file.name });
    await Storage.put(file.name, file);
    fetchNotes();
  }

  async function fetchNotes() {
    const apiData = await API.graphql({ query: listNotes });
    const notesFromAPI = apiData.data.listNotes.items;
    await Promise.all(notesFromAPI.map(async note => {
      if (note.image) {
        const image = await Storage.get(note.image);
        note.image = image;
      }
      return note;
    }))
    setNotes(apiData.data.listNotes.items);
  }

  async function createNote() {
    if (!formData.name || !formData.description) return;
    await API.graphql({ query: createNoteMutation, variables: { input: formData } });
    if (formData.image) {
      const image = await Storage.get(formData.image);
      formData.image = image;
    }
    setNotes([ ...notes, formData ]);
    setFormData(initialFormState);
  }

  async function deleteNote({ id }) {
    const newNotesArray = notes.filter(note => note.id !== id);
    setNotes(newNotesArray);
    await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
  }
  return (
    <div className="App">
      <h1>My Notes App</h1>
      <input
        onChange={e => setFormData({ ...formData, 'name': e.target.value})}
        placeholder="Note name"
        value={formData.name}
      />
      <input
        onChange={e => setFormData({ ...formData, 'description': e.target.value})}
        placeholder="Note description"
        value={formData.description}
      />
      <input
        type="file"
        onChange={onChange}
      />
      <button onClick={createNote}>Create Note</button>
      <div style={{marginBottom: 30}}>
        {
          notes.map(note => (
            <div key={note.id || note.name}>
              <h2>{note.name}</h2>
              <p>{note.description}</p>
              <button onClick={() => deleteNote(note)}>Delete note</button>
              {
                note.image && <img src={note.image} style={{width: 400}} />
              }
            </div>
          ))
        }
      </div>
      <img src={logo} className="App-logo" alt="logo" />
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}

export default withAuthenticator(App);

アプリをテストします。

$ npm start

画像をアップロードできることを確認しました。

ローカルは成功したので、本番にデプロイします。

$ git add .
$ git commit -m "add graphql storage"
$ git push

Amplifyコンソールでビルドが無事成功したので、本番URLに移動し、画像のアップロードを試します。

新たな画像アップロードも無事成功しました。

リソースの削除

チュートリアルが終了したので、バックエンドリソースを削除します。

$ amplify delete

ちなみに、次のコマンドで個々のサービスを削除できます。

$ amplify remove auth
$ amplify push
タイトルとURLをコピーしました