AWS の開始方法

React アプリケーションの構築

AWS Amplify を使用してシンプルなウェブアプリケーションを作成する

モジュール 5: ストレージを追加する

このモジュールでは、ストレージと、画像をアプリのメモに関連付ける機能を追加します。

はじめに

メモアプリが機能するようになったので、各メモに画像を関連付ける機能を追加しましょう。このモジュールでは、Amplify CLI とライブラリを使用して、Amazon S3 を利用するストレージサービスを作成します。次に、前のモジュールで作成した GraphQL スキーマを更新して、画像を各メモに関連付けます。最後に、React アプリを更新して、画像のアップロード、フェッチ、レンダリングを有効にします。

学習内容

  • ストレージサービスを作成する
  • GraphQL スキーマを更新する
  • React アプリを更新する

主要な概念

ストレージサービス - 画像や動画などのファイルの保存とクエリは、ほとんどのアプリケーションの一般的な要件です。これを行う 1 つのオプションは、ファイルを Base64 エンコードし、文字列として送信してデータベースに保存することです。これには、エンコードされたファイルが元のバイナリよりも大きいこと、操作に計算コストがかかること、適切にエンコードおよびデコードすることの複雑さが増すなどの欠点があります。別のオプションは、ファイルストレージ用に特別に構築および最適化されたストレージサービスを用意することです。Amazon S3 のようなストレージサービスは、これを可能な限り簡単、高性能、低料金になるようにしています。

 所要時間

10 分

 使用するサービス

実装

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

    画像ストレージ機能を追加するには、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

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

まとめ

AWS Amplify を使用してウェブアプリケーションをデプロイしました。 アプリに認証を追加して、ユーザーがサインアップ、サインイン、およびアカウントを管理できるようにしました。アプリには、Amazon DynamoDB データベースで設定されたスケーラブルな GraphQL API もあり、ユーザーはメモを作成および削除できます。また、Amazon S3 を使用してファイルストレージを追加し、ユーザーが画像をアップロードしてアプリで表示できるようにしました。

  • リソースの削除

    個々のサービスの削除

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

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

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

    amplify push

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

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

    amplify delete

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。

おめでとうございます。

AWS でウェブアプリケーションを構築できました! 次のステップとして、特定の AWS テクノロジーをさらに詳しく見て、アプリケーションを次のレベルに引き上げます。