Herramienta de túnel local de Azure Web PubSub

  • Artículo

El túnel local de Web PubSub proporciona un entorno de desarrollo local para que los clientes mejoren su experiencia de desarrollo local. Ya no es necesario usar herramientas de terceros para exponer puertos locales; use el túnel local de Web PubSub como túnel entre el servicio Web PubSub y el servidor local para mantener el entorno de desarrollo local seguro.

El túnel local de Web PubSub proporciona:

  • Una manera de tunelizar el tráfico desde Web PubSub al servidor local
  • Una manera de ver el flujo de datos de un extremo a otro desde el cliente a Web PubSub a través del túnel y al servidor local
  • Proporciona un servidor ascendente insertado para empezar a trabajar
  • Proporciona un cliente sencillo para empezar a trabajar con el desarrollo del servidor

Ventajas:

  • Servidor local protegido: no es necesario exponer el servidor local al público
  • Conexión protegida: use Microsoft Entra ID y la directiva de acceso de Web PubSub para conectarse
  • Configuración sencilla: plantilla de dirección URL establecida en tunnel:///<your_server_path>
  • Inspección de datos: vista vívida de los datos y el flujo de trabajo

Requisito previo

  • Node.js, versión 16 o posterior

Instalación

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

Uso

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.

Preparación de la credencial

Se admiten tanto la cadena de conexión como Microsoft Entra ID.

Uso de la cadena de conexión

  1. En el portal del servicio Web PubSub, copie la cadena de conexión desde el portal del servicio Web PubSub.

  2. Establezca la cadena de conexión en la variable de entorno local e inicie awps-tunnel.

export WebPubSubConnectionString="<your connection string>"

Uso de Azure Identity

  1. En el portal del servicio Web PubSub, vaya a la pestaña Control de acceso y agregue el rol Web PubSub Service Owner a la identidad.

  2. En el terminal local, use la CLI de Azureaz login para iniciar sesión en su identidad.

  3. Como alternativa, puede establecer la información de la cuenta a través de variables de entorno definidas o usar la autenticación de identidad administrada directamente para los servicios de Azure compatibles.

Ejecutar

  1. En el portal del servicio Web PubSub, vaya a la pestaña Configuración y especifique la plantilla de dirección URL del controlador de eventos para empezar con tunnel:/// y permitir la conexión de túnel.

    Screenshot of setting the upstream URL in hub settings.

  2. Ejecute la herramienta con el centro que estableció antes, por ejemplo, conéctese a un punto de conexión https://<awps-host-name>.webpubsub.azure.com con el centro chat:

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

    También puede usar awps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com para guardar la configuración y, a continuación, awps-tunnel run.

  3. Verá una salida como Open webview at: http://127.0.0.1:4000; abra el vínculo en el explorador y podrá ver el estado del túnel y el flujo de trabajo.

  4. Ahora cambie a la pestaña Servidor y active Servidor echo integrado para iniciar un servidor integrado ascendente con código similar al código de ejemplo que se muestra debajo.

    Screenshot of starting built-in echo server.

  5. Como alternativa, puede iniciar su propio servidor ascendente en http://localhost:3000. También puede especificar la opción --upstream http://localhost:<custom-port> cuando awps-tunnel run o awps-tunnel bind para configurar su propio servidor ascendente en un puerto personalizado. Por ejemplo, ejecute el código siguiente para iniciar este servidor ascendente de ejemplo; cuando se inicia, el servidor ascendente atiende las solicitudes en 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. Ahora cambie a la pestaña Cliente y seleccione Connect para iniciar una conexión WebSocket de prueba al servicio Azure Web PubSub. Verá que el tráfico pasa a través de Web PubSub al túnel local y, por último, llega al servidor ascendente. La pestaña Túnel proporciona los detalles de la solicitud y las respuestas, lo que proporciona una vista vívida de lo que solicita el servidor ascendente y lo que se responde desde el servidor ascendente.

    Screenshot of starting the test WebSocket connection and send message.

    Screenshot of showing the traffic inspection.

En segundo plano

¿Cómo funciona la herramienta de túnel? En segundo plano, inicia una conexión de túnel al servicio Web PubSub. La conexión de túnel es una conexión persistente (WebSocket) que se conecta al punto de conexión /server/tunnel y se considera un tipo de conexiones de servidor. También puede usar reglas de ACL en el servicio para deshabilitar la conexión de dichas conexiones.