Freigeben über

Lokales Azure Web PubSub-Tunneltool

  • Artikel

Der lokale Web PubSub-Tunnel bietet Kunden eine lokale Entwicklungsumgebung, um ihre lokale Entwicklungserfahrung zu verbessern. Es ist nicht mehr notwendig, Tools von Drittanbietern zu verwenden, um lokale Ports verfügbar zu machen. Verwenden Sie den lokalen Web PubSub-Tunnel als Tunnel zwischen dem Web PubSub-Dienst und Ihrem lokalen Server, um Ihre lokale Entwicklungsumgebung sicher zu halten.

Der lokale Web PubSub-Tunnel bietet Folgendes:

  • Eine Möglichkeit zum Tunneln von Datenverkehr von Web PubSub zu Ihrem lokalen Server
  • Eine Möglichkeit zum Anzeigen des End-to-End-Datenflows von Ihrem Client zu Web PubSub durch den Tunnel und zu Ihrem lokalen Server
  • Stellt einen eingebetteten Upstream-Server bereit, mit dem Sie beginnen können
  • Stellt einen einfachen Client bereit, mit dem Sie mit der Serverentwicklung beginnen können

Vorteile:

  • Lokal sicher: Sie müssen ihren lokalen Server nicht öffentlich verfügbar machen
  • Sichere Verbindung: verwenden Sie Microsoft Entra ID und die Web PubSub-Zugriffsrichtlinie zum Herstellen einer Verbindung
  • Einfache Konfiguration: URL-Vorlagensätze zu tunnel:///<your_server_path>
  • Datenüberprüfung: lebendige Ansicht der Daten und des Workflows

Voraussetzungen

Installieren

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

Verbrauch

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.

Vorbereiten der Anmeldeinformationen

Sowohl Verbindungszeichenfolgen als auch Microsoft Entra ID werden unterstützt.

Verwenden einer Verbindungszeichenfolge

  1. Kopieren Sie in Ihrem Web PubSub-Dienstportal Ihre Verbindungszeichenfolge aus Ihrem Web PubSub-Dienstportal.

  2. Legen Sie die Verbindungszeichenfolge auf Ihre lokale Umgebungsvariable fest, und starten Sie awps-tunnel.

export WebPubSubConnectionString="<your connection string>"

Verwenden der Azure-Identität

  1. Wechseln Sie in Ihrem Web PubSub-Dienstportal zur Registerkarte „Zugriffssteuerung“, und fügen Sie Ihrer Identität die Rolle Web PubSub Service Owner hinzu.

  2. Verwenden Sie in Ihrem lokalen Terminal Azure CLIaz login, um sich bei Ihrer Identität anzumelden.

  3. Alternativ könnten Sie Kontoinformationen über definierte Umgebungsvariablen festlegen oder die Verwaltete Identitätsauthentifizierung direkt für unterstützte Azure-Dienste verwenden.

Ausführung

  1. Wechseln Sie in Ihrem Web PubSub-Dienstportal zur Registerkarte „Einstellungen“, und geben Sie die URL-Vorlage des Ereignishandlers an, der mit tunnel:/// beginnen soll, um eine Tunnelverbindung zu ermöglichen.

    Screenshot of setting the upstream URL in hub settings.

  2. Führen Sie das Tool mit dem Hub aus, den Sie zuvor festgelegt haben, z. B. Herstellen einer Verbindung mit einem Endpunkt https://<awps-host-name>.webpubsub.azure.com mit Hub chat:

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

    Sie können auch awps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com verwenden, um die Konfiguration zu speichern, und dann awps-tunnel run.

  3. Sie sehen eine Ausgabe wie Open webview at: http://127.0.0.1:4000, öffnen den Link in Ihrem Browser, und Sie könnten den Tunnelstatus und den Workflow sehen.

  4. Wechseln Sie nun zur Registerkarte Server, und überprüfen Sie den integrierten Echo-Server, um einen integrierten Upstream-Server mit Code zu starten, der dem unten gezeigten Beispielcode ähnelt.

    Screenshot of starting built-in echo server.

  5. Alternativ können Sie ihren eigenen Upstream-Server unter http://localhost:3000. starten Sie können auch die Option --upstream http://localhost:<custom-port> angeben mit awps-tunnel run oder awps-tunnel bind, um Ihren eigenen Upstream-Server an einem benutzerdefinierten Port zu konfigurieren. Führen Sie z. B. den folgenden Code aus, um diesen Beispiel-Upstream-Server zu starten, und wenn er gestartet wird, liefert der Upstream Anforderungen an 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. Wechseln Sie nun zur Registerkarte Client, wählen Sie Connect aus, um eine WebSocket-Testverbindung mit dem Azure Web PubSub-Dienst zu starten. Sie würden sehen, dass der Datenverkehr durch Web PubSub zum lokalen Tunnel läuft und schließlich den Upstream-Server erreicht. Die Registerkarte „Tunnel“ enthält die Details der Anforderung und Antworten und bietet Ihnen einen lebendigen Überblick darüber, was Anforderungen an Ihren Upstream-Server stellt und was Antworten vom Upstream-Server zurückgibt.

    Screenshot of starting the test WebSocket connection and send message.

    Screenshot of showing the traffic inspection.

Hinter den Kulissen

Wie funktioniert das Tunneltool? Unterhalb der Oberfläche startet es eine Tunnelverbindung mit dem Web PubSub-Dienst. Die Tunnelverbindung ist eine dauerhafte Verbindung (WebSocket), stellt eine Verbindung mit dem /server/tunnel-Endpunkt her und wird als eine Art von Serververbindungen betrachtet. Sie können auch ACL-Regeln im Dienst verwenden, um solche Verbindungen and der Verbindungsherstellung zu hindern.