実装

• ストレージサービスを作成する

  画像ストレージ機能を追加するには、Amplify ストレージカテゴリを使用します。
  

  amplify add storage
  
  ? Please select from one of the below mentioned services: Content
  ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? Please provide bucket name: <your-unique-bucket-name>
  ? Who should have access: Auth users only
  ? What kind of access do you want for Authenticated users? create, read, update, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? N

• GraphQL スキーマを更新する

  次に、amplify/backend/api/notesapp/schema.graphql を開き、次のスキーマで更新します。

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

  必ずファイルを保存してください。
  

• ストレージサービスと API の更新をデプロイする

  ストレージサービスがローカルで設定され、GraphQL スキーマが更新されたので、Amplify push コマンドを実行して更新をデプロイできます。
  

  amplify push --y

• React アプリを更新する

  バックエンドが更新されたので、React アプリを更新して、メモ用に画像をアップロードおよび表示する機能を追加しましょう。src/App.js を開き、次の変更を加えます。

  a.まず、ストレージクラスを Amplify インポートに追加します。

  import { API, Storage } from 'aws-amplify';

  b.メインの App 関数で、画像のアップロードを処理する新しい onChange 関数を作成します。
  

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

  c.メモに関連付けられている画像がある場合は、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);
  }
  

  d.画像がメモに関連付けられている場合は、createNote 関数を更新して、画像をローカル画像配列に追加します。

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

  e.return ブロックのフォームにその他の入力を追加します。
  

  <input
    type="file"
    onChange={onChange}
  />
  

  f.メモ配列をマッピングするときに、画像が存在する場合はそれをレンダリングします。
  

  {
    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>
    ))
  }
  

• アプリを実行する

  アプリをテストするには、start コマンドを実行します。
  

  npm start

  これで、各メモ用の画像をオプションでアップロードできるようになります。
  

• リソースの削除

  個々のサービスの削除

  個々のサービスを削除するには、Amplify remove コマンドが使えます。

  amplify remove auth
  
  ? Choose the resource you would want to remove: <your-service-name>

  次に、Amplify push コマンドを実行します。
  

  amplify push

  プロジェクト全体を削除する

  プロジェクトと関連リソースを削除するには、Amplify delete コマンドを実行します。

  amplify delete