Amplifyで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!

$ 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

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

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;

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

$ npm install -g @aws-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/
console.aws.amazon.com
Press Enter to continue

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
console.aws.amazon.com
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:  default

Successfully set up the new user.

$ 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:
ERROR: The request could not be satisfied
docs.aws.amazon.com

? 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 console
? Which site do you want to open? …  (Use arrow keys or type to filter)
❯ Amplify Studio
  AWS console

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

$ 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

$ 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

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

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);

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

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

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

$ 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

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

$ amplify push --y

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

$ 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

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

$ amplify push --y

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 delete

$ amplify remove auth
$ amplify push