次の方法で共有

Azure Web PubSub ローカル トンネル ツール

  • [アーティクル]

Web PubSub ローカル トンネルは、お客様がローカル開発エクスペリエンスを強化するためのローカル開発環境を提供します。 サードパーティ製のツールを使用してローカル ポートを公開する必要はなくなりました。Web PubSub ローカル トンネルを Web PubSub サービスとローカル サーバーの間のトンネルとして使用することで、ローカル開発環境をセキュリティで保護された安全な状態に保つことができます。

Web PubSub ローカル トンネルは、次の機能を備えています。

  • Web PubSub からローカル サーバーにトラフィックをトンネリングする方法
  • トンネルを経由してクライアントから Web PubSub に至り、ローカル サーバーに至るエンドツーエンドのデータ フローを表示する方法
  • 利用を開始するための埋め込みアップストリーム サーバーを提供します
  • サーバー開発を開始するためのシンプルなクライアントを提供します

利点:

  • セキュリティで保護されたローカル: ローカル サーバーをパブリックに公開する必要はありません
  • セキュリティで保護された接続: Microsoft Entra ID と Web PubSub アクセス ポリシーを使用して接続を行います
  • 単純な構成: URL テンプレートを tunnel:///<your_server_path> に設定します
  • データ検査: データとワークフローを明確に表示します

前提条件

  • Node.js バージョン 16 以降

インストール

npm install -g @azure/web-pubsub-tunnel-tool

使用方法

Usage: awps-tunnel [options] [command]

A local tool to help tunnel Azure Web PubSub traffic to local web app and provide a vivid view to the end to end workflow.

Options:
  -v, --version   Show the version number.
  -h, --help      Show help details.

Commands:
  status          Show the current configuration status.
  bind [options]  Bind configurations to the tool so that you don't need to specify them every time running the tool.
  run [options]   Run the tool.
  help [command]  Display help details for subcommand.

You could also set WebPubSubConnectionString environment variable if you don't want to configure endpoint.

資格情報を準備する

接続文字列と Microsoft Entra ID の両方がサポートされています。

接続文字列の使用

  1. Web PubSub サービス ポータルで、Web PubSub サービス ポータルから接続文字列をコピーします。

  2. 接続文字列をローカル環境変数に設定し、awps-tunnel を開始します。

export WebPubSubConnectionString="<your connection string>"

Azure ID の使用

  1. Web PubSub サービス ポータルで、[アクセス制御] タブに移動し、ID に Web PubSub Service Owner ロールを追加します。

  2. ローカル ターミナルで、Azure CLIaz login を使用して ID にサインインします。

  3. または、定義済みの環境変数を使用してアカウント情報を設定するか、サポートされている Azure サービスに対してマネージド ID 認証を直接使用することもできます。

[ファイル名を指定して実行]

  1. Web PubSub サービス ポータルで、[設定] タブに移動し、トンネル接続を許可するために tunnel:/// で始まるるイベント ハンドラー URL テンプレートを指定します。

    Screenshot of setting the upstream URL in hub settings.

  2. 前に設定したハブを使用してツールを実行します。たとえば、ハブ chat を使用してエンドポイント https://<awps-host-name>.webpubsub.azure.com に接続します。

    awps-tunnel run --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com

    awps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com を使用して構成を保存し、awps-tunnel run を実行することもできます。

  3. Open webview at: http://127.0.0.1:4000 のような出力が表示されます。ブラウザーでリンクを開くと、トンネルの状態とワークフローを確認できます。

  4. 次に、[サーバー] タブに切り替え、組み込みの Echo Server をオンにして、その下に表示されるサンプル コードと同様のコードで組み込みのアップストリーム サーバーを起動します。

    Screenshot of starting built-in echo server.

  5. または、http://localhost:3000. で独自のアップストリーム サーバーを起動することもできます。 awps-tunnel run または awps-tunnel bind のときにオプション --upstream http://localhost:<custom-port> を指定して、カスタム ポートで独自のアップストリーム サーバーを構成することもできます。 たとえば、以下のコードを実行してこのサンプル アップストリーム サーバーを起動します。起動すると、アップストリーム サーバーは http://localhost:3000/eventhandler/. に対する要求を行います。

    git clone https://github.com/Azure/azure-webpubsub.git
cd tools/awps-tunnel/server/samples/upstream
npm install
npm start

  6. 次に、[クライアント] タブに切り替えて、Connect を選択し、Azure Web PubSub サービスへのテスト WebSocket 接続を開始します。 トラフィックが Web PubSub を経由してローカル トンネルに到達し、最後にアップストリーム サーバーに到達することがわかります。 [トンネル] タブに要求と応答の詳細が表示され、アップストリーム サーバーに何が要求されているか、アップストリーム サーバーから何が応答されているかが明確に表示されます。

    Screenshot of starting the test WebSocket connection and send message.

    Screenshot of showing the traffic inspection.

しくみ

トンネル ツールはどのようなしくみで機能するのでしょうか。 トンネル ツールは内部で Web PubSub サービスへのトンネル接続を開始します。 トンネル接続は、/server/tunnel エンドポイントに接続する永続的な接続 (WebSocket) であり、サーバー接続の一種と見なすことができます。 サービスで ACL 規則を使用して、そのような接続による接続を無効にすることもできます。