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 テクノロジーをさらに詳しく見て、アプリケーションを次のレベルに引き上げます。