チュートリアル: WebSocket API、Lambda、DynamoDB を使用したサーバーレスチャットアプリの構築

このチュートリアルでは、 WebSocket API を使用してサーバーレスチャットアプリケーションを作成します。 WebSocket API を使用すると、クライアント間の双方向通信をサポートできます。クライアントは、更新をポーリングしなくてもメッセージを受信できます。

このチュートリアルの完了には約 30 分かかります。まず、 AWS CloudFormation テンプレートを使用して、API リクエストを処理する Lambda 関数と、クライアント IDs を保存する DynamoDB テーブルを作成します。次に、API Gateway コンソールを使用して、Lambda 関数と統合する WebSocket API を作成します。最後に、API をテストして、メッセージが送受信されることを確認します。

このチュートリアルを完了するには、 AWS アカウントと、コンソールへのアクセス権を持つ AWS Identity and Access Management ユーザーが必要です。詳細については、「API Gateway の開始方法の前提条件」を参照してください。

また、API に接続するには wscat も必要です。詳細については、「wscat を使用した WebSocket API への接続とメッセージの送信」を参照してください。

ステップ 1: Lambda 関数と DynamoDB テーブルを作成する

のアプリケーション作成テンプレートをダウンロードして解凍します AWS CloudFormation。このテンプレートを使用して、アプリケーションのクライアント ID を保存する Amazon DynamoDB テーブルを作成します。接続されている各クライアントには、テーブルのパーティションキーとして使用する一意の ID があります。このテンプレートは、DynamoDB のクライアント接続を更新し、接続されたクライアントへのメッセージの送信を処理する Lambda 関数も作成します。

AWS CloudFormation スタックを作成するには

1. https://console.aws.amazon.com/cloudformation で AWS CloudFormation コンソールを開きます。

2. [スタックの作成] を選択し、[With new resources (standard) 新しいリソースを使用 (標準)] を選択します。

3. [Specify template (テンプレートの指定)] で、[Upload a template file (テンプレートファイルのアップロード)] を選択します。

4. ダウンロードしたテンプレートを選択します。

5. [Next (次へ)] を選択します。

6. [Stack name] (スタックの名前) で、websocket-api-chat-app-tutorial と入力し、[Next] (次へ) を選択します。

7. [Configure stack options] (スタックオプションの設定) で、[Next] (次へ) を選択します。

8. 機能 では、 がアカウントに IAM リソースを作成 AWS CloudFormation できることを確認します。

9. [スタックの作成] を選択します。

AWS CloudFormation は、テンプレートで指定されたリソースをプロビジョニングします。リソースのプロビジョニングには数分かかることがあります。 AWS CloudFormation スタックのステータスが CREATE_COMPLETE の場合、次のステップに進む準備が整います。

ステップ 2: WebSocket API を作成する

クライアント接続を処理し、ステップ 1 で作成した Lambda 関数にリクエストをルーティングする WebSocket API を作成します。

WebSocket API を作成するには

1. API Gateway コンソール (https://console.aws.amazon.com/apigateway) にサインインします。

2. [API の作成] を選択します。次に、WebSocket API でビルドを選択します。

3. [API 名] に「websocket-chat-app-tutorial」と入力します。

4. [Route selection expression] (ルート選択式) に「request.body.action」と入力します。ルート選択式は、クライアントがメッセージを送信したときに API Gateway が呼び出すルートを決定します。

5. [次へ] を選択します。

6. [Predefined routes] (定義済みのルート) で、[Add $connect] ($connect の追加)、[Add $disconnect] ($disconnect の追加)、および [Add $default] ($default の追加) を選択します。[$connect] および [$disconnect] ルートは、クライアントが API に接続または切断したときに API Gateway が自動的に呼び出す特別なルートです。API Gateway は、他のルートがリクエストに一致するルートがない場合に、$default ルートを呼び出します。

7. [Custom routes] (カスタムルート) で、[Add custom route] (カスタムルートの追加) を選択します。[Route key] (ルートキー) に「sendmessage」と入力します。このカスタムルートは、接続されたクライアントに送信されるメッセージを処理します。

8. [次へ] を選択します。

9. [Attach integrations] (統合のアタッチ) で、各ルートと [Integration type] (統合タイプ) ごとに、Lambda を選択します。

   Lambda の場合、ステップ 1 AWS CloudFormation で作成した対応する Lambda 関数を選択します。各関数の名前はルートと一致します。例えば、[$connect] ルートの場合は、websocket-chat-app-tutorial-ConnectHandler という名前の関数を選択します。

10. API Gateway が作成するステージを確認します。デフォルトでは、API Gateway はステージ名 production を作成し、API をそのステージに自動的にデプロイします。[次へ] を選択します。

11. [Create and deploy] (作成してデプロイ) を選択します。

ステップ 3: API をテストする

次に、API をテストして正しく動作していることを確認します。API に接続するには、wscat コマンドを使用します。

API の呼び出し URL を取得するには

1. https://console.aws.amazon.com/apigateway で API Gateway コンソールにサインインします。

2. API を選択します。

3. [Stages] (ステージ) を選択し、[production] (本稼働) を選択します。

4. API の WebSocket URL を書き留めます。URL は次のようになります。wss://abcdef123.execute-api.us-east-2.amazonaws.com/production

API に接続するには

1. API に接続するには、以下のコマンドを使用します。API に接続すると、API Gateway は $connect ルートを呼び出します。このルートが呼び出されると、DynamoDB に接続 ID を保存する Lambda 関数が呼び出されます。

   wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production

   Connected (press CTRL+C to quit)

2. 新しいターミナルを開き、次のパラメータを指定して wscat コマンドを再度実行します。

   wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production

   Connected (press CTRL+C to quit)

   これにより、メッセージを交換できる 2 つの接続されたクライアントが提供されます。

単一のメッセージを送信するには

• API Gateway は、API のルート選択式に基づいて、呼び出すルートを決定します。API のルート選択式は $request.body.action です。その結果、API Gateway は次のメッセージを送信したときに sendmessage ルートを呼び出します。

  {"action": "sendmessage", "message": "hello, everyone!"}

  呼び出されたルートに関連付けられた Lambda 関数は、DynamoDB からクライアント ID を収集します。次に、Lambda 関数は API Gateway Management API を呼び出し、それらのクライアントにメッセージを送信します。接続されているすべてのクライアントが、次のメッセージを受け取ります。

  < hello, everyone!

API の $default ルートを呼び出すには

• API Gateway は、定義されたルートと一致しないメッセージをクライアントが送信すると、API のデフォルトルートを呼び出します。$default ルートに関連付けられた Lambda 関数 は、API Gateway Management API を使用して、接続に関するクライアント情報を送信します。

  test

  Use the sendmessage route to send a message. Your info: {"ConnectedAt":"2022-01-25T18:50:04.673Z","Identity":{"SourceIp":"192.0.2.1","UserAgent":null},"LastActiveAt":"2022-01-25T18:50:07.642Z","connectionID":"Mg_ugfpqPHcCIVA="}

API から切断するには

• API から切断するには、CTRL+C を押します。クライアントが API から切断されると、API Gateway は API の $disconnect ルートを呼び出します。API の $disconnect ルートの Lambda 統合は、DynamoDB から接続 ID を削除します。

ステップ 4: クリーンアップする

不要なコストを回避するには、このチュートリアルで作成したリソースを削除します。次の手順では、 AWS CloudFormation スタックと WebSocket API を削除します。

WebSocket API を削除するには

1. https://console.aws.amazon.com/apigateway で API Gateway コンソールにサインインします。

2. [API] ページで websocket-chat-app-tutorial API を選択します。[Actions] (アクション)、[Delete] (削除) の順に選択し、選択を確定します。

AWS CloudFormation スタックを削除するには

1. https://console.aws.amazon.com/cloudformation で AWS CloudFormation コンソールを開きます。

2. AWS CloudFormation スタックを選択します。

3. [Delete] (削除) を選択し、選択を確定します。

次のステップ: で を自動化する AWS CloudFormation

このチュートリアルに関係するすべての AWS リソースの作成とクリーンアップを自動化できます。この API およびすべての関連リソースを作成する AWS CloudFormation テンプレートについては、「chat-app.yaml」を参照してください。