Azure Web PubSub 本機通道工具

發行項
12/18/2024

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。

使用連接字串

在 Web PubSub 服務入口網站，從 Web PubSub 服務入口網站複製連接字串。
將連接字串設定為本機環境變數，然後開始 awps-tunnel。

Linux 或 macOS
Windows

export WebPubSubConnectionString="<your connection string>"

SET WebPubSubConnectionString=<your connection string>

使用 Azure 身分識別

在 Web PubSub 服務入口網站，移至 [存取控制] 索引標籤，然後將角色 Web PubSub Service Owner 新增至您的身分識別。
在您的本機終端機中，使用 Azure CLI az login 登入您的身分識別。
或者，您也可以透過定義的環境變數設定帳戶資訊，或是直接針對支援的 Azure 服務使用受控識別驗證。

執行

在 Web PubSub 服務入口網站，移至 [設定] 索引標籤，並指定事件處理常式 URL 範本從 tunnel:/// 開始，即可允許通道連線。
使用您之前設定的中樞執行工具，例如，使用中樞 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。
您會看到類似 Open webview at: http://127.0.0.1:4000 的輸出，請在瀏覽器開啟連結，您便可看到通道狀態和工作流程。
現在切換至 [伺服器] 索引標籤，並檢查內建 Echo Server，啟動內建上游伺服器，其程式碼類似下方所示的範例程式碼。
或者，您可以在 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
```
現在切換至 [用戶端] 索引標籤並選取 [Connect]，啟動與 Azure Web PubSub 服務的測試 WebSocket 連線。您會看到流量通過 Web PubSub 到本機通道，最後到達上游伺服器。 [通道] 索引標籤會提供要求和回應的詳細數據，讓您生動地檢視要求上游伺服器的內容，以及從上游伺服器回應的內容。