2024.01.08この記事は約5分で読めます。構成の説明Amplifyの初期設定チャット用のリソースを用意おまけ1.概要awsの便利機能をフル活用して、チャット機能を作成する手順をまとめました。前編...バックエンド後編...フロントの順で説明していきます。全体的にざっくりなのはご容赦を。2.構成の説明Amplifyアプリ開発において、バックエンド側を簡単に構築してくれるプラットフォーム。アーキテクチャに悩む時間を削れます。SyncGraphQLを扱うことができるサービス。今回はチャットに使用するAPI部分をこの子に託しますDynamoDBAWSのデータベース。いわゆるNoSQLなデータベースのうち、「キーバリュー形式」に該当します。レスポンスが早くチャットを作る上ではお勧め。構成のイメージ3.Amplifyの初期設定ここから手順の説明に入ります。configure実行後、awsのサインインコンソールが開きます。idとパスワードを入力してログイン。IAMの紐付けcliに戻ってリージョンを選択。awsのコンソールでIAMを作成こちらで、Amplify用のIAMが作成完了します。initこちらも対話形式で、使用するエディタやフレームワークを選択します。こちらが完了した時点で、CloudFormationのテンプレートが用意されます。apiこれまた対話形式。apiの方式はgraphQLを選択してください。「schema.graphql」ファイルが生成されます。pushこのコマンドで下記のリソースが生成されます。sync・DynamoDBバックエンド環境をカスタマイズ以降は納得いくまで下記を繰り返します。push実際にチャット動かしてるとバックエンドの考慮漏れとかは結構見えてきます。その都度このコマンドを叩くので仕組みに慣れておくとよし。keyの期限が切れます。syncの仕様なのでこれ以上は延長不可能)。keyはフロントのソースに埋め込むので、1年に1回更新の必要があります。モバイルアプリでチャットを使用する場合にはstoreの申請も必要になるため特に注意。["updateChat"])}c.各キーの説明PK:プライマリキー。データの識別のために使用。複雑な運用になるので次の記事で説明します。今回はここにチャットルームのidを持たせます。今回はこのチャットルームで絞り込んだチャットメッセージをGETできるようにしています。送信者id以降の流れフロントの実装については後編で説明致します〜。