AWS Chime SDKのAmplify版公式デモを動かしてみた！ #チュートリアル

AWS Chime SDK を触る機会がありとりあえず動かしてみようと思い探したところ、AWS Chime 公式デモが公開されていました。

全部入りのローカル完結のミーティングデモやチャットのデモ等がある中、魅力的な Amplify の文字を見つけたので実際に動かしてみた時の知見を残しておきます。

環境

README の通りに動かしてみる

以下ざっくり注意点とかだけを書いているので、細かい部分はREADMEを読んで補完してください。

amplify-cli をインストール

npm install -g @aws-amplify/cli

AWS Chime 公式デモを clone

git clone https://github.com/aws-samples/amazon-chime-sdk

クローンしてきた amazon-chime-sdk の AmplifyDemo を開く

cd amazon-chime-sdk/apps/AmplifyDemo

パッケージインストール

npm i

Amplify CLI 用のユーザーを作成する。既に AdministratorAccess のポリシーを持っている IAM ユーザーで AWS CLI の設定ができている場合スキップ可能。

amplify configure

ブラウザで AWS のログイン画面が開く。
マネジメントコンソールにログインしたらターミナルに戻り、Enter

###region:  ap-northeast-1
2 user name:  amplify-NFMHP
3 accessKeyId:  ********************
4 secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
5 Profile Name:  amplify

2. 新しく作る IAM ユーザーの名前を選択（任意）。マネコンに飛ばされるので IAM ユーザーを作成
特に何も考えず次へボタンを押していいと思う
タグに Name:amplify-iam-user を設定しておくと後から楽になる
ユーザーが作成されるとアクセスキーとかがみれるのでターミナルに戻って Enter
3.4. アクセスキーとシークレットアクセスキーを入力（ブラウザからコピペ）
5. プロファイル名を入力（default にすると--profile が要らなくなる）
ここでプロファイルを設定した場合、移行の amplify コマンドの後ろに--profile <設定したプロファイル名>をつけること
この記事では default で設定するので--profile は省略する

Amplify の初期設定を行う。これにより、生成されたバックエンドリソースの構成が存在するローカル Amplify 環境が作成されます。

amplify init

1 Enter a name for the project amplifyDemo
2 Initialize the project with the above configuration? No
3 Enter a name for the environment dev
4 Choose your default editor: Visual Studio Code
5 Choose the type of app that you're building javascript
6 What javascript framework are you using react
7 Source Directory Path:  src
8 Distribution Directory Path: dist
9 Build Command:  npm run-script build
10 Start Command: npm run-script start
11 Select the authentication method you want to use: AWS profile

1. プロジェクト名を入力
- 3~20 文字の英数字のみ
2. プロジェクトインフォメーションが表示され、Initialize the project with the above configuration?と聞かれるけど、n を入力して Enter
8. dist に変更
11. configure の際にプロファイルを設定した物を選択

ローカル Amplify 環境に Lambda を追加する

amplify add function

1 Select which capability you want to add: Lambda function (serverless function)
2 Provide an AWS Lambda function name: reactSampleLambda
3 Choose the runtime that you want to use: NodeJS
4 Choose the function template that you want to use: Hello World
5 Do you want to configure advanced settings? No
6 Do you want to edit the local lambda function now? Yes

2. 関数名を入力 必ず reactSampleLambda と入力
- ただし後から出てくる schema.graphql に書かれてる reactSampleLambda を別のものに変える場合はその名前にする
全部終わると VSCode でamplify/backend/function/reactSampleLambda/src/index.jsが開かれるので、`./lambda/index.js で上書きして保存（後からでもできる）

ローカル Amplify 環境にバックエンド GraphQL を追加する

amplify add api

1 Please select from one of the below mentioned services: GraphQL
2 Provide API name: reactSampleApi
3 Choose the default authorization type for the API API key
4 Enter a description for the API key:
5 After how many days from now the API key should expire (1-365): 7
6 Do you want to configure advanced settings for the GraphQL API No, I am done.
7 Do you have an annotated GraphQL schema? Yes
8 Provide your schema file path: schema.graphql

7. Yes を選択すると 8 の選択肢が出る
8. schema.graphql を指定

ローカルで設定したものをクラウドに反映する

amplify push

結構時間かかる

しばらくすると schema.graphql からソースを生成するかどうか聞かれる

1 Do you want to generate code for your newly created GraphQL API Yes
2 Choose the code generation language target typescript
3 Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
4 Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
5 Enter maximum statement depth [increase from default if your schema is deeply nested] 2
6 Enter the file name for the generated code src/graphql/types.ts

2. typescript を指定
6. お好みだけどここでは src/graphql/types.ts を指定

マネジメントコンソールで Lambda の IAM ロールに AmazonChimeFullAccess ポリシーをアタッチする

環境を構築した AWS アカウントのコンソールにログイン
IAM を表示
サイドメニューからロールをクリック
reactSampleLambdaRole-XXX-dev の名前で生成されたロールをクリック
「ポリシーをアタッチします」をクリック
検索ボックスに「AmazonChimeFullAccess」を入力
「AmazonChimeFullAccess」にチェックをつける
「ポリシーのアタッチ」をクリック

確認

これで準備万端です！
ローカル環境を立ち上げて確認しましょう！

ローカルの react サーバーを立ち上げる

npm run start

http://localhost:3000 にアクセス

スクリーンショット 2021-08-19 1.51.02.png

表示されました！！
一応同じブラウザ複数タブでなんちゃって複数人接続も可能です。

簡潔な機能ですが、しっかりビデオも音声もやり取りできていることがわかります。

ちなみにこのデモサンプルは（同リポジトリの他のサンプルもそうですが）amazon-chime-sdk-component-library-react を使っています。
Chime アプリを作るのに便利な React のコンポーネントや Hooks が揃っているので、使うことをお勧めします！

そのうち記事書きたいと思ってます。

リソースの削除

たぶんめちゃくちゃに使わない限りお金は発生しないんじゃないかなと思いますが、一応綺麗にしたいときは以下のコマンドでクラウド上のリソースが削除できます

amplify delete

ローカルの自動生成されたファイルも消えてしまうので注意してください。

後書き

今回は公式デモを動かしただけですが、公式の README が英語だけどわかりやすかったので、一部エラーが発生した以外は非常にシンプルに構築することができました。

最近は他のライブラリでもそうですが、サンプルが充実しているものが多くて助かります！
自分がもし OSS ライブラリを公開する時とかが来れば、絶対にサンプルはしっかりと作ろうと心に決めました！

Chime 自体はミーティング以外にもチャットとかもあるので、今後はこのデモに少しずつ機能を追加して行ってみようかなと思ってます。

またある程度固まったら記事にしようと思います。

AWS Chime SDKのAmplify版公式デモを動かしてみた！

環境