YMLib - Node.js - API Gateway+WebSocket

API Gateway+WebSocket

2025/12/12

API GatewayのWebSocketを使ってみます。

Lambdaの作成

API Gatewayの作成
接続確認
Resource stageに@connectionsを追加
ルートを追加
Lambdaプロキシ統合をON

Lambdaの作成

AWSマネジメントコンソールでLambdaを開き関数の作成をクリックします。

以下の情報を入力し関数を作成をクリックします。

関数名	helloWebSocket
ランタイム	Node.js 24.x
アーキテクチャ	x86_64

Dismissをクリックします。

Lambda関数が正常に作成されました。 200を返すコードが生成されていました。 console.logで開始のメッセージを表示するようにします。

index.mjs

1:
2:
3:
4:
5:
6:
7:
8:
9:

export const handler = async (event) => {
  // TODO implement
  console.log("START handler");
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

API Gatewayの作成

＋トリガーを追加をクリックします。

トリガーを追加のページが開きました。

API Gatewayを選択し以下の情報を入力し追加をクリックします。

インテント	新規のAPIを作成
APIタイプ	WebSocket API

トリガーが追加されました。

APIエンドポイントを確認します。

接続確認

クライアント側は以下のjsを実行して接続してみます。

Chromeで適当なWebページを開きF12でDeveloper Toolsを開きます。

jsを貼り付けようとしたところエラーが出ました。

allow pastingと入力しEnterを押します。

貼り付けてEnterを押したところエラーが出ました。

API Gatewayに表示されているhelloWebSocket-APIをクリックします。

API名をクリックします。

APIをデプロイをクリックします。

ステージでdefaultを選択します。

デプロイをクリックします。

デプロイされました。

再度コマンドを実行したところws.onopenは成功したようでConnected!と表示されましたが、ReceivedはForbiddenになりました。

Lambdaの設定のアクセス権限をクリックし実行ロールのロール名に表示されているhelloWebSocket-role-cnvl3oguをクリックします。

ロールのページが開きました。

許可を追加でインラインポリシーを作成をクリックします。

以下の情報を選択し下にスクロールさせます。

サービス	ExecuteAPI
アクション許可	ManageConnections

ARMを追加をクリックします。

以下の情報を設定しARMを追加をクリックします。

リソースのリージョン	ap-northeast-1
Resource api	*
Resource stage	default
Resource method	*
Resource api specific resource path	*
リソースARN	(自動入力)