Closed6

【AWS公式チュートリアル】「WebSocket API、Lambda、DynamoDB を使用して WebSocket チャットアプリを作成する」対応メモ

noknok

開発環境

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と一緒にインストールされたバージョンを利用
noknok

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

  1. AWS CloudFormationのテンプレートダウンロード
    チュートリアル内のリンクから、テンプレートをDL&解凍する
    ws-chat-app-starter.zip

  2. AWS CloudFormationコンソールを開く

  3. [スタックの作成] を選択し、[新しいリソースを使用 (標準)] を選択
    Step3

  4. [テンプレートの指定] で、[テンプレートファイルのアップロード] を選択し、[次へ] を選択
    DL後に解凍したテンプレートファイルをアップロード(yamlファイルをアップロード)
    Step4

  5. [スタックの名前] で、"websocket-api-chat-app-tutorial" と入力し、[次へ] を選択
    Step5

  6. [スタックオプションの設定] で、[次へ] を選択
    Step6

  7. [機能]欄で、IAMリソース作成について承認し、[送信] を選択
    Step7

  8. AWS CloudFormationスタックのステータスが、"CREATE_COMPLETE" になったら完了
    Step8

noknok

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

  1. API Gateway コンソールを表示する

  2. [API の作成] を選択し、[WebSocket API] で [構築] を選択
    Step2-2
    Step2-2

  3. [API 名] に「websocket-chat-app-tutorial」と入力、
    また、[ルート選択式] に「request.body.action」と入力して[Next] を選択
    Step2-3

  4. [事前定義されたルート]で、[connect の追加]、[disconnect の追加]、[$default の追加] を選択
    また、[カスタムルート] に「sendmessage」と入力して[Next] を選択
    Step2-4

  5. [統合をアタッチする]で、各ルートの [統合タイプ]ごとに、Lambda を選択
    その後、CloudFormationを使用して作成した、対応するLambda関数を選択する
    ※Lambda関数名は、ルート名と一致する名称を含んだものを選択する
    Step2-5

  6. API Gateway が作成するステージを確認する
    今回はデフォルト値であった "production"のままとし、[Next] を選択
    Step2-6

  7. 確認画面で、[Create and deploy] を選択
    Step2-7

noknok

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

  1. 「wscat」ユーティリティをインストールする
    ※以下の公式ドキュメントに沿ってインストール実施した
    公式ドキュメント: wscat を使用した WebSocket API への接続とメッセージの送信
ターミナル
npm install -g wscat
ターミナル
# インストール確認
wscat --version
# 5.2.1
  1. API Gateway コンソールを開く

  2. API一覧から、作成した「websocket-chat-app-tutorial」を選択する
    その後、[ステージ] を選択し、[production] を選択
    Step3-3

  3. API の [WebSocket URL] をコピーし、メモ帳などに書き留めておく

  4. ターミナルを2つ起動し、それぞれで以下コマンドを実行して、WebSocket接続を開始する

ターミナル
wscat -c <メモしておいたWebSocketURL>/production
例: wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production
  1. 片方のターミナルで以下テキストをコピペしてEnterキーを押下する
    すると、もう片方のターミナルに「< hello, everyone!」というテキストが表示されたら、APIの疎通確認完了
    Step3-6
  2. WebSocket接続を切りたい場合は、「command + C」で切断する
このスクラップは3ヶ月前にクローズされました