この記事では、Azure Functions でサーバーレス モードの Web PubSub for Socket.IO を使用してチャット アプリを構築する方法について説明します。 このチュートリアルでは、オンラインで作業しながら、ID ベースの認証を使用してアプリをセキュリティ保護する方法を見ていきます。
プロジェクト ソースでは、Bicep を使って Azure にインフラストラクチャをデプロイし、Azure Functions Core Tools を使って関数アプリにコードをデプロイします。
前提条件
アクティブなサブスクリプションが含まれる Azure アカウント。 無料でアカウントを作成できます。
サンプル コードの入手
サンプル コードを見つけます: Socket.IO サーバーレス サンプル (TS)
git clone https://github.com/Azure/azure-webpubsub.git
cd ./sdk/webpubsub-socketio-extension/examples/chat-serverless-typescript
インフラストラクチャのデプロイ
このチャット サンプルでは、Azure に複数のサービスをデプロイする必要があります。
- Azure 関数アプリ
- Web PubSub for Socket.IO
- マネージド ID: サービス間の通信用の ID
インフラストラクチャをデプロイするには Bicep を使います。 ファイルは ./infra フォルダーにあります。 az コマンドを使ってそれをデプロイします。
az deployment sub create -n "<deployment-name>" -l "<deployment-location>" --template-file ./infra/main.bicep --parameters environmentName="<env-name>" location="<location>"
-
<deployment-name>: デプロイの名前。 -
<deployment-location>: デプロイ メタデータの場所。 リソースのデプロイ先の場所ではないことに注意してください。 -
<env-name>: 名前は、リソース グループ名とリソース名の一部です。 -
<location>: リソースの場所。
インフラストラクチャの確認
インフラストラクチャのリリースでは、従量課金プランの Azure 関数アプリと、関数アプリで必要なモニターとストレージ アカウントをデプロイします。 また、サーバーレス モードで Web PubSub for Socket.IO リソースをデプロイします。
ID ベースの認証のため、ユーザー割り当てマネージド ID を展開し、それを関数アプリと Socket.IO リソースの両方に割り当てて、いくつかのアクセス許可を付与します。
- ストレージ BLOB データ所有者ロール: 関数アプリ用のストレージにアクセスします
- 監視メトリック パブリッシャー ロール: 関数アプリ用のモニターにアクセスします
- Web PubSub サービス所有者ロール: 関数アプリ用の Web PubSub for Socket.IO にアクセスします
Microsoft Entra サインインを使うための Azure Functions アプリの構成に関する記事に従って、サービス プリンシパルを作成します。 サービス プリンシパルにシークレットを使わなくて済むよう、フェデレーション ID 資格情報を使います。
サンプルを関数アプリに展開する
サンプル コードを関数アプリに展開するための bash スクリプトを用意してあります。
# Deploy the project
./deploy/deploy.sh "<deployment-name>"
展開の詳細を確認する
サンプル アプリを展開するには、2 つのステップを行う必要があります。
関数アプリにコードを発行します (Azure Functions Core Tools を使います)
func extensions sync npm install npm run build func azure functionapp publish <function-app-name>Web PubSub for Socket.IO を構成して、関数アプリに要求を送信できるハブ設定を追加します。 関数アプリの Webhook プロバイダーの制限に従い、関数によって作成された拡張キーを取得する必要があります。 詳しくは、「トリガー バインド」をご覧ください。 また、ID ベースの認証を使うので、ハブの設定で、ターゲット リソース (前に作成したサービス プリンシパルの clientId) を割り当てる必要があります。
code=$(az functionapp keys list -g <resource-group> -n <function-name> --query systemKeys.socketio_extension -o tsv) az webpubsub hub create -n <socketio-name> -g <resource-group> --hub-name "hub" --event-handler url-template="https://${<function-name>}.azurewebsites.net/runtime/webhooks/socketio?code=${code}" user-event-pattern="*" auth-type="ManagedIdentity" auth-resource="<service-principal-client-id>"
サンプル アプリを実行する
コードが展開された後、Web サイトにアクセスしてサンプルを試します。
https://<function-endpoint>/api/index
次のステップ
次に、チュートリアルに従い、順を追ってアプリを記述できます。