Criando um tunel de desenvolvimento com Visual Studio

Assim como eu, você já deve ter precisado expor uma API que estava sendo executada localmente, para realizar algum teste de Webhook, chatbot, etc.

E para isso eu sempre usei o bom e velho ngrok, esse cara, basicamente cria um túnel seguro que expõe serviços locais na Web de uma forma bem simples, e com poucas configurações.

Recentemente o Visual Studio liberou algo bastante interessante para quem usa o ngrok, o Dev Tunnels que de uma forma bem simples, até mais simples que o ngrok, cria o nosso túnel e no decorrer deste post vou mostrar como configura-ló e como usar esse cara que vai facilitar demais nossa vida de agora para frente.

Primeiramente vamos aos pré-requisitos, retirado da documentação da Microsoft:

Visual Studio 2022 Versão prévia 17.5 com os módulos do ASP.NET e desenvolvimento web instalados. O recurso não está disponível no Visual Studio para Mac.

Recurso de visualização de túneis de desenvolvimento habilitado. Selecione Ferramentas > Opções > Recursos > Visualização do Ambiente > Habilitar túneis de desenvolvimento para aplicativos Web.
Além da configuração, o que diferencia Dev Tunnels do ngrok é a possibilidade de se criar um túnel persistente o qual URL não será alterada após a reinicialização da aplicação(o que convenhamos é ótimo para gente rsrsrs evitando a reconfiguração na parte do webhook).

Tendo tudo configurado vamos criar nosso túnel:

No VS 2022 vamos criar um projeto ASP.Net Core Web API e após o projeto criado vamos criar nosso tunnel pelo caminho mostrado na imagem abaixo:

E em seguida será mostrada a imagem abaixo:

Nela vamos configurar:

Account: A conta a ser usada para criar o túnel. Os tipos de conta que podem ser usados para criar túneis incluem Azure, MSA (Conta Microsoft) e GitHub.

Name: Aqui inserimos um nome amigável para nosso túnel, ele poderá ser visto na interface do usuário do Visual Studio.

Tunnel Type: Aqui vamos informar se o nosso túnel será Persistente ou Temporário:

• Em um túnel temporário, a URL será alterada sempre que o Visual Studio for iniciado.
• Um túnel persistente terá sempre a mesma URL.

Access: Aqui informamos o tipo de autenticação necessária para acesso ao túnel e temos as seguintes opções:

• Privado: o túnel é acessível apenas para a conta que o criou.
• Organização: o túnel é acessível para contas na mesma organização que a que o criou. Se essa opção estiver selecionada para uma MSA (conta Microsoft pessoal), o efeito será o mesmo que selecionar Privado. Não há suporte para o suporte da organização para 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.

Ao informar os dados acima, clicamos em ok e recebemos uma mensagem de sucesso pelo VS.

Usando o túnel:

Com nosso túnel criado, para utilizá-lo é bem simples, o primeiro passo é informar qual túnel será utilizado:

Quando um túnel está ativo e o Visual Studio executa o nosso aplicativo, o navegador abrirá a URL do túnel em vez da URL local. A URL do túnel vai se parecer como a do exemplo:

https://7dn4gg1r-7094.brs.devtunnels.ms

Como nosso túnel é público, qualquer usuário que tenha a URL pode acessá-la, desde que ele esteja conectado à Internet, óbvio rsrsrs. E vale ressaltar que a URL estará disponível enquanto o projeto estiver em execução.

Acessando nossa aplicação diretamente no navegador, uma página de aviso será mostrada na primeira solicitação:

Ao clicarmos em continuar o navegador nos redirecionará para a URL da nossa aplicação e teremos o seguinte resultado:

E se quisermos acessar essa URL de um celular?

Excelente pergunta! Temos duas opções:

Digitar a URL no nosso navegador mobile; Gerar um QR code de acesso pelo Microsoft Edge. Caso opte pela segunda opção, abra o navegador Edge, navegue até a URL e clique no botão para gerar o QR code, depois escaneio pelo seu celular.

Gerenciamento dos túneis:

Para gerenciarmos os túneis criados, temos uma janela específica para eles.

Caso não esteja à vista, você pode incluí-la pelo caminho Exibir > Outras Janelas > Túneis de Desenvolvimento. Na janela de gerenciamento dos túneis, podemos criar/excluir túneis e até mesmo mudar o túnel ativo.

Finalizando:

Outro recurso interessante que o Dev Tunnel nos disponibiliza é a variável de ambiente VS_TUNNEL_URL, que nos mostra o valor da URL do túnel do projeto. Esse recurso é muito interessante caso tenhamos mais de um projeto de inicialização. Se este for seu caso a variável VS_TUNNEL_URL sempre será o valor do primeiro projeto que starta, e serão posteriormente criadas as variáveis VS_TUNNEL_URL_{ProjectName} onde o ProjectName é o nome do(s) projeto(s) startado(s) posteriormente.

Esse foi um post bem resumido sobre essa feature bacanuda que o Visual Studio liberou, espero que esteja de fácil entendimento e que te ajude, caso queria saber mais sobre a feature, segue o link da documentação da Microsoft.