Azure Web PubSub helyi alagúteszköz

  • Cikk

A Web PubSub helyi alagút helyi fejlesztési környezetet biztosít az ügyfelek számára a helyi fejlesztési élmény javítása érdekében. A helyi portok elérhetővé tételéhez nincs szükség külső eszközök használatára, a Web PubSub helyi alagút használata a Web PubSub szolgáltatás és a helyi kiszolgáló közötti alagútként a helyi fejlesztési környezet biztonságának és biztonságának megőrzése érdekében.

A Web PubSub helyi alagút a következő lehetőségeket biztosítja:

  • A Web PubSub és a helyi kiszolgáló közötti forgalom bújtatásának módja
  • Az ügyfél és a Web PubSub közötti végpontok közötti adatfolyam megtekintésének módja az alagúton és a helyi kiszolgálón keresztül
  • Beágyazott felsőbb rétegbeli kiszolgálót biztosít az első lépésekhez
  • Egyszerű ügyfelet biztosít a kiszolgálófejlesztés első lépéseihez

Előnyök:

  • Biztonságos helyi: nem kell nyilvánosan elérhetővé tenni a helyi kiszolgálót
  • Biztonságos kapcsolat: a Microsoft Entra ID és a Web PubSub hozzáférési szabályzat használata a csatlakozáshoz
  • Egyszerű konfiguráció: URL-sablonkészletek a következőre: tunnel:///<your_server_path>
  • Adatvizsgálat: az adatok és a munkafolyamat élénk megtekintése

Előfeltétel

  • Node.js 16-os vagy újabb verzió

Telepítés

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

Használat

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.

A hitelesítő adatok előkészítése

A kapcsolati sztring és a Microsoft Entra-azonosító is támogatott.

A kapcsolati sztring használata

  1. A Web PubSub szolgáltatásportálon másolja a kapcsolati sztring a Web PubSub szolgáltatásportálról.

  2. Állítsa a kapcsolati sztring a helyi környezeti változóra, és indítsa elawps-tunnel.

export WebPubSubConnectionString="<your connection string>"

Az Azure Identity használata

  1. A Web PubSub szolgáltatásportálon lépjen a Hozzáférés-vezérlés lapra, és vegyen fel szerepkört Web PubSub Service Owner az identitásába.

  2. A helyi terminálban az Azure CLIaz login használatával jelentkezzen be az identitásba.

  3. Másik lehetőségként beállíthatja a fiókadatokat meghatározott környezeti változókon keresztül, vagy használhat felügyelt identitáshitelesítést közvetlenül a támogatott Azure-szolgáltatásokhoz.

Futtatás

  1. A Web PubSub szolgáltatásportálon lépjen Gépház lapra, és adja meg az alagútkapcsolat engedélyezéséhez használni tunnel:/// kívánt eseménykezelő URL-sablont.

    Screenshot of setting the upstream URL in hub settings.

  2. Futtassa az eszközt a korábban beállított központtal, például csatlakozzon egy végponthoz https://<awps-host-name>.webpubsub.azure.com a központtal chat:

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

    A konfiguráció awps-tunnel runmentésére is használhatóawps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com.

  3. Megjelenik a kimenet, például Open webview at: http://127.0.0.1:4000, nyissa meg a hivatkozást a böngészőben, és láthatja az alagút állapotát és a munkafolyamatot.

  4. Váltson a Kiszolgáló lapra, és ellenőrizze a beépített Echo Servert , hogy elindítson egy beépített felsőbb rétegbeli kiszolgálót az alatta látható mintakódhoz hasonló kóddal.

    Screenshot of starting built-in echo server.

  5. Másik lehetőségként saját felsőbb rétegbeli kiszolgálót is elindíthat a http://localhost:3000. Azt is megadhatja--upstream http://localhost:<custom-port> , hogy mikor awps-tunnel run vagy awps-tunnel bind mikor konfigurálja saját felsőbb rétegbeli kiszolgálóját egy egyéni porton. Futtassa például az alábbi kódot a minta felsőbb rétegbeli kiszolgálójának elindításához, amikor elindul, a felsőbb réteg a következő kéréseket szolgálja ki: 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. Most váltson az Ügyfél lapra, és válassza a Connect WebSocket-tesztkapcsolat elindításához az Azure Web PubSub szolgáltatáshoz. Látni fogja, hogy a forgalom a Web PubSubon keresztül a Helyi alagútba halad, és végül eléri a felsőbb rétegbeli kiszolgálót. Az alagút lap a kérés és a válaszok részleteit tartalmazza, élénk képet nyújtva arról, hogy mi kéri a felsőbb rétegbeli kiszolgálót, és hogy mi történik a felsőbb rétegbeli kiszolgálóról való újraküldéssel.

    Screenshot of starting the test WebSocket connection and send message.

    Screenshot of showing the traffic inspection.

Technikai részletek

Hogyan működik az alagúteszköz? A motorháztető alatt alagútkapcsolatot létesít a Web PubSub szolgáltatással. Az alagútkapcsolat egy állandó kapcsolat (WebSocket), amely a /server/tunnel végponthoz csatlakozik, és egyfajta kiszolgálókapcsolatnak számít. A szolgáltatás ACL-szabályaival letilthatja az ilyen kapcsolatok csatlakozását.