Como usar túneis de desenvolvimento no Visual Studio 2022 com aplicativos ASP.NET Core

O recurso túneis de desenvolvimento do Visual Studio 2022 permite conexões ad hoc entre computadores que não podem se conectar diretamente entre si. Uma URL é criada para permitir que qualquer dispositivo com uma conexão com a Internet se conecte a um projeto do ASP.NET Core enquanto ele é executado no localhost.

Casos de uso

Alguns dos cenários que os túneis de desenvolvimento permitem:

• Testar um aplicativo Web em outros dispositivos, como celulares e tablets.
• Testar um aplicativo com serviços externos. Por exemplo, testar e depurar Conectores do Power Platform, APIs dos Serviços de Comunicação do Azure ou webhooks do Twilio.
• Disponibilize temporariamente um aplicativo para outras pessoas pela Internet, para uma apresentação ou para convidar outras pessoas a revisar seu trabalho em um aplicativo Web ou API.
• Como alternativa a outras soluções de encaminhamento de porta.

Pré-requisitos

• Visual Studio 2022 versão 17.6 ou posterior com a carga de trabalho ASP.NET e desenvolvimento Web instalada. Você precisa estar conectado ao Visual Studio para criar e usar túneis de desenvolvimento. O recurso não está disponível no Visual Studio para Mac.
• Um ou mais projetos do ASP.NET Core. Este artigo usa uma solução com dois projetos de exemplo para demonstrar o recurso.

Criar um túnel

Para criar um túnel:

No Visual Studio 2022, abra um projeto Web do ASP.NET Core ou uma solução com pelo menos um projeto Web definido como um projeto de inicialização.

Na lista suspensa de depuração, selecione Túneis de Desenvolvimento>Criar um Túnel.

O diálogo de criação do túnel é aberto.

• Selecione a conta a ser usada para criar o túnel. Os tipos de conta que podem ser usados para criar túneis incluem o Azure, a MSA (Conta Microsoft) e o GitHub.
• Insira um nome para o túnel. Esse nome identifica o túnel na interface do usuário do Visual Studio.
• Escolha o tipo de túnel, Persistente ou Temporário:
  • Um túnel temporário obtém uma nova URL sempre que o Visual Studio é iniciado.
  • Um túnel persistente obtém a mesma URL sempre que o Visual Studio é iniciado. Para obter mais informações, confira Túneis persistentes X temporários mais adiante neste artigo.
• Escolha a autenticação necessária para acesso ao túnel. As seguintes opções estão disponíveis:
  • Privado: o túnel pode ser acessado apenas pela conta que o criou.
  • Organização: o túnel pode ser acessado por contas na mesma organização que o criou. Se essa opção estiver selecionada para uma MSA (Conta Microsoft pessoal), o efeito será o mesmo de selecionar Privado. Não há suporte da organização a contas do Github.
  • Público: nenhuma autenticação é necessária. Escolha essa opção somente se for seguro tornar o aplicativo Web ou a API acessível a qualquer pessoa na Internet.
• Selecione OK.

O Visual Studio exibe a confirmação da criação do túnel:

O túnel aparece no submenu suspenso de depuração Túneis de Desenvolvimento:

Especificar o túnel ativo

Um projeto ou uma solução pode ter vários túneis, mas apenas um está ativo de cada vez. O submenu Túneis de Desenvolvimento na lista suspensa de depuração pode especificar o túnel ativo. Quando há um túnel ativo, ele é usado em todos os projetos do ASP.NET Core que são iniciados no Visual Studio. Depois que um túnel é selecionado como ativo, ele permanece ativo até que o Visual Studio seja fechado. Na ilustração abaixo, Meu Túnel Temporário está ativo:

Escolha não usar um túnel selecionando Nenhum no submenu. Quando o Visual Studio é reiniciado, ele assume de novo o padrão de Nenhum.

Usar um túnel

Quando um túnel está ativo e o Visual Studio executa um aplicativo Web, o navegador da Web é aberto com uma URL de túnel em vez de uma URL localhost. A URL de túnel se parece com o seguinte exemplo:

https://0pbvlk3m-7032.usw2.devtunnels.ms

Agora, qualquer usuário autenticado pode abrir a mesma URL em qualquer outro dispositivo conectado à Internet. Enquanto o projeto continuar sendo executado localmente, todo dispositivo com uma conexão com a Internet poderá acessar o aplicativo Web em execução em um computador de desenvolvimento.

Para projetos Web que têm suporte ao navegador, uma página de aviso é mostrada na primeira solicitação enviada para a URL do túnel de cada dispositivo:

Depois que Continuar for selecionado, a solicitação será roteada para o aplicativo Web local. Esta página de notificação não é mostrada em solicitações de API que usam túneis de desenvolvimento.

Usar um túnel para testar em um telefone ou tablet

Para testar um aplicativo Web de um dispositivo externo, como um telefone ou tablet, navegue até a URL do túnel. Para facilitar a reprodução da URL no dispositivo externo:

• Navegue até a URL do túnel em um navegador do Edge no computador local.
• Gere um código QR para a URL no navegador Edge no computador local:
  • Selecione a barra de URL para exibir o botão de código QR.
  • Selecione o botão de código QR para gerar e exibir o código QR.
• Leia esse código QR com um telefone ou tablet para navegar até a URL.

Janela de saída dos Túneis de Desenvolvimento

Para mostrar a URL de um túnel de um projeto em execução, selecione Túneis de Desenvolvimento no menu suspenso Mostrar saída de.

Essa janela é especialmente útil em projetos que não abrem um navegador por padrão. Por exemplo, ao trabalhar com uma Função do Azure, essa pode ser a maneira mais fácil de descobrir a URL pública que está sendo usada pelo túnel de desenvolvimento.

Janela da ferramenta de Túneis de Desenvolvimento

Exibir e gerenciar túneis de desenvolvimento na janela da ferramenta Túneis de Desenvolvimento:

Para abrir a janela Túneis de Desenvolvimento, selecione a opção de menu Mostrar Janela de Túneis de Desenvolvimento na lista suspensa de depuração. Como alternativa, selecione Exibir>Outras Janelas>Túneis de Desenvolvimento.

Na janela Túneis de Desenvolvimento, crie um túnel selecionando o botão + verde.

Exclua um túnel usando o botão vermelho x à direita do túnel.

O menu de contexto de um túnel fornece as seguintes opções:

• Limpar túnel ativo: mostrado quando um túnel é configurado como ativo (indicado pela marca de seleção no lado esquerdo); isso o redefine para que a solução não use um túnel.
• Tornar o Túnel Ativo: mostrado para túneis que não estão configurados como ativos.
• Copiar Token de Acesso ao Túnel: fornecido a cenários em que um túnel é criado com acesso privado ou organizacional e o aplicativo é uma API Web. Para autenticar para o túnel, copie e cole o token de acesso do túnel como um cabeçalho do formulário X-Tunnel-Authorization tunnel <TOKEN> na solicitação. Se esse cabeçalho não for especificado, a solicitação será bloqueada porque a verificação de autenticação falhou.
• Remover

Variáveis de ambiente de URL do túnel

O recurso Túneis de desenvolvimento fornece uma maneira de obter a URL do túnel de um projeto programaticamente no tempo de execução. Quando um aplicativo é iniciado e usa um túnel, o Visual Studio cria a variável de ambiente VS_TUNNEL_URL. O valor VS_TUNNEL_URL é a URL do túnel usado no projeto atual. VS_TUNNEL_URL pode ser útil ao integrar o aplicativo a um serviço externo, em que a URL do túnel precisa ser transmitida ao serviço externo.

Se vários projetos do ASP.NET Core estiverem configurados para iniciar no Visual Studio, o aplicativo que está iniciando obterá uma variável de ambiente de qualquer projeto iniciado antes dele. O padrão para esse nome de variável é VS_TUNNEL_URL_{ProjectName}, em que {ProjectName} é o nome do outro projeto. Por exemplo, considere este exemplo mostrando dois projetos definidos para iniciar:

Como o MyWebApi está acima do MyWebApp, ele é iniciado antes do projeto MyWebApp. Quando o projeto MyWebApi é iniciado, ele recebe sua URL de túnel na variável de ambiente VS_TUNNEL_URL. Quando o projeto MyWebApp é iniciado, ele recebe sua própria URL de túnel em VS_TUNNEL_URL e a URL do túnel do outro projeto é fornecida na variável de ambiente VS_TUNNEL_URL_MyWebApi.

Para ilustrar, as seguintes linhas de código realçadas foram adicionadas ao arquivo Program.cs no MyWebApp:

public class Program
{
    public static void Main(string[] args)
    {
        Console.WriteLine($"Tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL")}");
        Console.WriteLine($"API project tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL_MyWebApi")}");

Quando o aplicativo Web é iniciado, a saída do console se parece com o seguinte exemplo:

Tunnel URL: https://lxm0ltdt-7175.usw2.devtunnels.ms/
API project tunnel URL: https://lxm0ltdt-7042.usw2.devtunnels.ms/
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7175
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5228
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\DevTunnelsDemo\MyWebApp

Para obter informações sobre como configurar vários projetos de inicialização, confira Como definir vários projetos de inicialização.

Túneis persistentes X temporários

Um túnel persistente é aquele que usa a mesma URL depois de sair e reiniciar o Visual Studio. Ter uma URL que não seja alterada pode ser útil na integração de um aplicativo Web a um serviço externo. Por exemplo, implementar um webhook do GitHub ou desenvolver uma API para se integrar a um aplicativo do Power Platform. Nesses casos, talvez seja necessário especificar a URL de retorno de chamada para o serviço externo. Com um túnel persistente, a URL de serviço externo só precisa ser configurada uma vez. No uso de um túnel temporário, a URL do túnel precisará ser configurada sempre que o Visual Studio for reiniciado.

Persistente não significa que o túnel funcionará quando o Visual Studio não estiver aberto. Uma URL de túnel se conectará ao computador local somente se o projeto ASP.NET Core ao qual a URL do túnel se conecta estiver em execução no Visual Studio.

Um túnel temporário é bom quando a URL do túnel de desenvolvimento precisa funcionar por um curto período de tempo. Por exemplo, o compartilhamento do trabalho em andamento em um aplicativo Web com outras pessoas ou o teste de um aplicativo em um dispositivo externo. Em alguns casos, talvez seja melhor obter uma nova URL sempre que o Visual Studio for iniciado.

Confira também

Os recursos abaixo usam uma versão prévia anterior do recurso de túneis de desenvolvimento, ou seja, partes deles estão desatualizadas:

• Usar túneis de desenvolvimento no Visual Studio para depurar as APIs Web
• Automação de chamadas do ACS e serviço OpenAI do Azure
• Usar túneis de desenvolvimento do Visual Studio para lidar com webhooks do Twilio.