【AWS公式チュートリアル】「WebSocket API、Lambda、DynamoDB を使用して WebSocket チャットアプリを作成する」対応メモ
はじめに
API Gatewayの、WebSocket APIについて理解を深めるべく、AWSの公式チュートリアルを進めていきます。
対象のチュートリアル
開発環境
MacPCにAWS CLIをインストールして進めます。
環境 | バージョンなど | 備考 |
---|---|---|
MacOS | Sonoma v14.5 | - |
AWS CLI | aws-cli/2.17.22 Python/3.11.9 Darwin/23.5.0 exe/x86_64 | - |
Node.js | v16.16.0 | - |
npm | v8.11.0 | Node.jsと一緒にインストールされたバージョンを利用 |
ステップ 1: Lambda 関数と DynamoDB テーブルを作成する
-
AWS CloudFormationのテンプレートダウンロード
チュートリアル内のリンクから、テンプレートをDL&解凍する
ws-chat-app-starter.zip -
AWS CloudFormationコンソールを開く
-
[スタックの作成] を選択し、[新しいリソースを使用 (標準)] を選択
-
[テンプレートの指定] で、[テンプレートファイルのアップロード] を選択し、[次へ] を選択
DL後に解凍したテンプレートファイルをアップロード(yamlファイルをアップロード)
-
[スタックの名前] で、"websocket-api-chat-app-tutorial" と入力し、[次へ] を選択
-
[スタックオプションの設定] で、[次へ] を選択
-
[機能]欄で、IAMリソース作成について承認し、[送信] を選択
-
AWS CloudFormationスタックのステータスが、"CREATE_COMPLETE" になったら完了
ステップ 2: WebSocket API を作成する
-
API Gateway コンソールを表示する
-
[API の作成] を選択し、[WebSocket API] で [構築] を選択
-
[API 名] に「websocket-chat-app-tutorial」と入力、
また、[ルート選択式] に「request.body.action」と入力して[Next] を選択
-
[事前定義されたルート]で、[
disconnect の追加]、[$default の追加] を選択connect の追加]、[
また、[カスタムルート] に「sendmessage」と入力して[Next] を選択
-
[統合をアタッチする]で、各ルートの [統合タイプ]ごとに、Lambda を選択
その後、CloudFormationを使用して作成した、対応するLambda関数を選択する
※Lambda関数名は、ルート名と一致する名称を含んだものを選択する
-
API Gateway が作成するステージを確認する
今回はデフォルト値であった "production"のままとし、[Next] を選択
-
確認画面で、[Create and deploy] を選択
ステップ 3: API をテストする
- 「wscat」ユーティリティをインストールする
※以下の公式ドキュメントに沿ってインストール実施した
公式ドキュメント: wscat を使用した WebSocket API への接続とメッセージの送信
npm install -g wscat
# インストール確認
wscat --version
# 5.2.1
-
API Gateway コンソールを開く
-
API一覧から、作成した「websocket-chat-app-tutorial」を選択する
その後、[ステージ] を選択し、[production] を選択
-
API の [WebSocket URL] をコピーし、メモ帳などに書き留めておく
-
ターミナルを2つ起動し、それぞれで以下コマンドを実行して、WebSocket接続を開始する
wscat -c <メモしておいたWebSocketURL>/production
例: wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production
- 片方のターミナルで以下テキストをコピペしてEnterキーを押下する
すると、もう片方のターミナルに「< hello, everyone!」というテキストが表示されたら、APIの疎通確認完了
- WebSocket接続を切りたい場合は、「command + C」で切断する
ステップ 4: クリーンアップする