目次
1.概要
awsの便利機能をフル活用して、チャット機能を作成する手順をまとめました。
ただ結構工程が多いので、
前編...バックエンド
後編...フロント
の順で説明していきます。
全体的にざっくりなのはご容赦を。
2.構成の説明
Amplify
アプリ開発において、バックエンド側を簡単に構築してくれるプラットフォーム。
「この機能を作るには、AWSのGUIでこれとこれとこれを用意して...」等と、
アーキテクチャに悩む時間を削れます。
App Sync
GraphQLを扱うことができるサービス。
今回はチャットに使用するAPI部分をこの子に託します
DynamoDB
AWSのデータベース。
いわゆるNoSQLなデータベースのうち、「キーバリュー形式」に該当します。
レスポンスが早くチャットを作る上ではお勧め。
構成のイメージ
3.Amplifyの初期設定
ここから手順の説明に入ります。
Amplify cliのインストール
$ npm install -g @aws-amplify/cli
Amplifyとアカウントを紐付け
ⅰ. アカウント紐付け
$ amplify configure
実行後、awsのサインインコンソールが開きます。
使用したいアカウントのaccess key idとパスワードを入力してログイン。
ⅱ. IAMの紐付け
cliに戻ってリージョンを選択。
↓
ユーザー名に何も入力せずenter
↓
awsのコンソールでIAMを作成
こちらで、Amplify用のIAMが作成完了します。
ⅲ.Amplifyバックエンドの構築
$ amplify init
こちらも対話形式で、使用するエディタやフレームワークを選択します。
こちらが完了した時点で、CloudFormationのテンプレートが用意されます。
4.チャット用のリソースを用意
App syncとDynamoDBをリソースに追加
$ amplify add api
これまた対話形式。apiの方式はgraphQLを選択してください。このコマンドでソース内に、
「schema.graphql」
ファイルが生成されます。
設定したバックエンド環境をデプロイ
$ amplify push
このコマンドで下記のリソースが生成されます。
・App sync
・DynamoDB
バックエンド環境をカスタマイズ
以降は納得いくまで下記を繰り返します。
スキーマファイルを変更
↓
都度、下記コマンドを入力
$ amplify update api
↓
バックエンドをデプロイ
$ amplify push
実際にチャット動かしてるとバックエンドの考慮漏れとかは結構見えてきます。
その都度このコマンドを叩くので仕組みに慣れておくとよし。
5.おまけ
a.amplidy add apiの際の注意
apiの認証方式をapi keyにした場合、maxでも365日でapi keyの期限が切れます。
(app syncの仕様なのでこれ以上は延長不可能)。
api keyはフロントのソースに埋め込むので、1年に1回更新の必要があります。
モバイルアプリでチャットを使用する場合にはstoreの申請も必要になるため特に注意。
b.スキーマの例
# new schema
# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!
# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
# input AMPLIFY {
# globalAuthRule: AuthRule = { allow: public, provider: aws_iam }
# } # FOR TESTING ONLY!
schema {
subscription: Subscription
}
type Chat @model(subscriptions: null)
# @auth(rules: [{allow: public, provider: iam}])
{
PK: String!
SK: String!
@index(
name: "SortByChatRoom"
sortKeyFields: ["createdAt"]
queryField: "listChatsSortByCreatedAt"
)
createdAt:AWSDateTime
message: String
is_read: Boolean
sender_id: Int
}
type Subscription {
onCreateChat(SK: String!): Chat
@aws_subscribe(mutations: ["createChat"])
onDeleteChat: Chat @aws_subscribe(mutations: ["deleteChat"])
onUpdateChat(SK: String!):Chat
@aws_subscribe(mutations: ["updateChat"])
}
c.各キーの説明
PK：プライマリキー。
データの識別のために使用。
少し複雑な運用になるので次の記事で説明します。
SK：ソートキー。
今回はここにチャットルームのidを持たせます。
今回はこのチャットルームで絞り込んだチャットメッセージをGETできるようにしています。
createdAt：メッセージの作成日時
message: メッセージ本文
is_read: 未読 or 既読
sender_id: 送信者id
以降の流れ
フロントの実装については後編で説明致します〜。