Compartilhar via


Ferramenta de túnel local do Azure Web PubSub

O túnel local do Web PubSub fornece um ambiente de desenvolvimento local para os clientes aprimorarem sua experiência de desenvolvimento local. Não é mais necessário usar ferramentas de terceiros para expor portas locais. Use o túnel local do Web PubSub como o túnel entre o serviço Web PubSub e seu servidor local para manter seu ambiente de desenvolvimento local seguro.

O túnel local do Web PubSub fornece:

  • Uma maneira de encapsular o tráfego do Web PubSub para o seu servidor local
  • Uma maneira de exibir o fluxo de dados de ponta a ponta do cliente para o Web PubSub por meio do túnel e para o servidor local
  • Fornece um servidor upstream inserido para você começar
  • Fornece um cliente simples para você começar a usar o desenvolvimento do servidor

Benefícios:

  • Local seguro: não é necessário expor o servidor local ao público
  • Conexão segura: use o Microsoft Entra ID e a política de acesso do Web PubSub para se conectar
  • Configuração simples: o modelo de URL é definido como tunnel:///<your_server_path>
  • Inspeção de dados: exibição clara dos dados e do fluxo de trabalho

Pré-requisito

Instalar

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.

Preparar a credencial

Há suporte para a cadeia de conexão e o Microsoft Entra ID.

Usar a cadeia de conexão

  1. No portal de serviços do Web PubSub, copie a cadeia de conexão do portal de serviços do Web PubSub.

  2. Defina a cadeia de conexão como sua variável de ambiente local e inicie awps-tunnel.

export WebPubSubConnectionString="<your connection string>"

Usar a identidade do Azure

  1. No portal de serviços do Web PubSub, acesse a guia Controle de acesso e adicione a função Web PubSub Service Owner à sua identidade.

  2. No terminal local, use a CLI do Azure az login para entrar na sua identidade.

  3. Como alternativa, você pode definir informações de conta por meio de variáveis de ambiente definidasou usar autenticação de identidade gerenciada diretamente para serviços compatíveis do Azure.

Executar

  1. No portal de serviços do Web PubSub, acesse a guia Configurações, especifique o modelo de URL do manipulador de eventos para começar com tunnel:/// para permitir a conexão de túnel.

    Captura de tela da configuração do URL de upstream nas configurações do hub.

  2. Execute a ferramenta com o hub definido anteriormente, por exemplo, conecte-se a um ponto de extremidade https://<awps-host-name>.webpubsub.azure.com com o hub chat:

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

    Você também pode usar awps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com para salvar a configuração e awps-tunnel run.

  3. Você vai ver a saída como Open webview at: http://127.0.0.1:4000, abrir o link no navegador e pode ver o status do túnel e o fluxo de trabalho.

  4. Agora, alterne para a guia Servidor e verifique o Servidor de Eco Interno para iniciar um servidor upstream interno com código semelhante ao código de exemplo mostrado abaixo dele.

    Captura de tela da inicialização do servidor de eco interno.

  5. Como alternativa, você pode iniciar seu próprio servidor upstream em http://localhost:3000. Também é possível especificar a opção --upstream http://localhost:<custom-port> quando awps-tunnel run ou awps-tunnel bind para configurar seu próprio servidor upstream em uma porta personalizada. Por exemplo, execute o código abaixo para iniciar esta amostra de servidor upstream; quando ele é iniciado, o upstream atende a solicitações para 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. Agora, alterne para a guia Cliente, selecione Connect para iniciar uma conexão do WebSocket de teste com o serviço Azure Web PubSub. Você verá o tráfego passar pelo Web PubSub até o túnel local e, finalmente, atingir o servidor upstream. A guia de túnel fornece os detalhes das solicitações e respostas, oferecendo uma visão clara do que está solicitando seu servidor upstream e do que está respondendo do servidor upstream.

    Captura de tela de como iniciar a conexão WebSocket de teste e enviar mensagem.

    Captura de tela mostrando a inspeção de trânsito.

Nos bastidores

Como funciona a ferramenta de túnel? Nos bastidores, ela inicia uma conexão de túnel com o serviço Web PubSub. A conexão de túnel é uma conexão persistente (WebSocket) com o ponto de extremidade /server/tunnel e é considerada como um tipo de conexão de servidor. Também é possível usar regras de ACL no serviço para desabilitar essas conexões.