Desvendando os benefícios do ngrok: Como a ferramenta pode ajudar em casos de falta de ambiente de backend e agilizar fluxos de trabalho

O que é o ngrok?

O ngrok é uma ferramenta CLI que cria um túnel seguro entre a máquina local e a internet, permitindo que um servidor local seja exposto e acessado de qualquer lugar do mundo. Ele fornece uma interface de usuário da web em tempo real para examinar todo o tráfego HTTP em execução nos seus túneis e repetir qualquer pedido contra o seu túnel com um clique. O ngrok torna fácil e seguro expor serviços locais para a internet, mesmo atrás de NATs e firewalls.

Quais são as situações em que podemos utilizá-lo?

🚀 Você precisa mostrar uma aplicação para o cliente e não quer passar pelo processo de deploy em um servidor para obter feedback? O ngrok pode ajudar! Com ele, você cria um túnel e compartilha a URI com o cliente para visualizar sua aplicação remotamente. E depois de concluir a reunião, você pode fechar a conexão.

👨‍💻 Precisa criar uma conexão remota para sua aplicação? O ngrok pode ser útil em várias situações: mostrando uma prévia para alguém, desenvolvendo integrações de Webhook ou testando aplicativos móveis conectados ao seu backend local.

🌎 O ngrok é perfeito para testar seu software em ambientes distribuídos. Os desenvolvedores e testadores podem acessar um servidor local de qualquer lugar do mundo, sem precisar publicá-lo em um ambiente de produção.

🔍 O ngrok pode desbloquear muitas tarefas de front-end! Se o backend estiver impedido de subir algum código para ambientes de beta ou master, pode ser usado para validar layouts com o designer, testar e debugar aplicativos com o time de QA.

Qual é a motivação por trás da implementação desta ferramenta nos times da Mercafácil?

A motivação por trazê-la para nossos times é facilitar e agilizar o processo de implementação de features que necessitem de backend e frontend. Atualmente, muitos times trabalham em um mesmo microserviço e utilizamos dois ambientes, beta e master. O ambiente de produção é executado em master, enquanto beta é utilizado para testes. Isso pode gerar bloqueios quando um time sobe um código para beta e outro time não consegue devido a conflitos ou quebras de fluxo em determinadas features. Isso acaba criando um efeito dominó, onde o front-end não pode usar o microserviço e o QA não consegue testar a feature por completo. Além disso, a ferramenta também irá agilizar o processo de validação de layout e design, permitir a validação de query e mutations e facilitar o pair programming. Esperamos que essa ferramenta nos ajude a tornar nossos times cada vez mais ágeis!

Como instalar ?

O ngrok é multiplataforma e pode ser instalada no Linux, Mac OS ou no Windows.

Para começar a usar, o primeiro passo é baixar o arquivo de instalação adequado ao seu sistema operacional no site oficial (https://ngrok.com/download). Após o download, você encontrará um arquivo .zip que deverá ser descompactado.

Para executar o ngrok, basta abrir o terminal e acessar o diretório onde foi descompactado o arquivo e executar o comando “ngrok”. Vale lembrar que o ngrok é uma ferramenta CLI, ou seja, funciona via terminal.

Ainda é possível instalar o ngrok pelo Chocolatey ou Snap:

• Chocolatey:

choco install ngrok

• Snap:

sudo snap install ngrok

Uma dica importante é adicionar o ngrok no PATH do seu sistema operacional, assim você poderá executá-lo facilmente de qualquer terminal, sem precisar especificar o caminho completo para o arquivo.

Feito isso, o ngrok já estará disponível para uso, basta digitar “ngrok” no seu terminal para ver as opções que ele oferece e começar a utilizá-lo:

Documentação do ngrok no terminal

Você pode utilizar o ngrok sem precisar criar uma conta, no entanto, algumas funcionalidades podem estar limitadas, como o tempo máximo para usar cada sessão depois de criar um túnel. Por isso, eu recomendo que você crie uma conta e assine o plano gratuito, pois ao executar o ngrok com uma conta vinculada, você elimina essa restrição de tempo limite por sessão.

Para vincular o ngrok à sua conta, você precisa do AuthToken, que pode ser encontrado nas configurações da sua conta no site do ngrok. Com o token em mãos, basta executar o seguinte comando no terminal:

ngrok config add-authtoken <token>

Utilizando e aprofundando-se no ngrok:

Expondo um microserviço via ngrok:

Para criar um túnel expondo a porta do seu microserviço basta executar o seguinte comando:

sudo ngrok http 4022

Você irá visualizar algo semelhante a isso:

Dados relacionado ao túnel que foi criado

Dê uma olhada na imagem acima e perceba as URLs de forwarding. Esses links são a chave para tornar seus serviços disponíveis para o mundo e o melhor de tudo, você ainda ganha um HTTPS! 🌐🔒

Compartilhe os links com quem você quiser ou integre-os com aplicações de terceiros conforme sua necessidade.

No exemplo acima, quando alguém acessa o endereço https://82ff-2804-14c-65a0-5070-2fb-86f7-f8c-6a9d.ngrok-free.app, o tráfego é retransmitido para http://localhost:4022 por meio do processo ngrok que está em execução na máquina.

No plano free do ngrok, as URLs de forwarding são sempre aleatórias, isso mesmo, elas mudam toda vez que você cria um novo túnel!

Inspecionando seu tráfego:

Antes de começar a inspecionar nosso tráfego, vamos utilizar esse túnel criado pelo ngrok numa aplicação front-end.

Túnel sendo utilizando numa aplicação front-end

Na imagem acima, podemos visualizar que a requisição para o nosso túnel foi executada com sucesso. Agora, vamos dar uma olhada em como podemos visualizar o tráfego gerado pelo front-end.

Você reparou no link “Web Interface”? Com o ngrok, você pode acessar uma interface web em tempo real para inspecionar todos os detalhes das requisições e respostas que estão trafegando no seu túnel! Incrível, não é?

Para acessar a interface, basta clicar no link (http://127.0.0.1:4040) e você será levado diretamente para a página de visualização. É uma ferramenta muito útil para testar e depurar suas aplicações, além de garantir que tudo esteja sendo integrado corretamente.

Ferramenta de inspecionar tráfego

Você verá todos os detalhes da requisição e da resposta, incluindo:

• Tempo duração
• Headers
• Payload
• Parâmetros de consulta
• Bytes brutos

Outros recursos e configurações:

Para criar um túnel expondo a porta de uma aplicação front-end é um pouco diferente, porque alguns front-ends utilizam o host-header para determinar qual site de desenvolvimento exibir. Por esse motivo, o ngrok pode reescrever suas solicitações com um host-header modificado.

Use o comando — host-header para reescrever as solicitações HTTP.

ngrok http 8080 --host-header="localhost:8080"

Ao externalizar uma porta de serviço front-end, desative o inspector para aumentar a velocidade de carregamento dos recursos. Isso ocorre porque, quando o inspector está ativo, ele utiliza parte desses recursos.

A primeira renderização do front-end pode ser mais demorada, especialmente se for um SPA (Single Page Application), porque é necessário enviar todo o bundle ou chunk na primeira renderização. Mas, após essa primeira renderização, todo o código já está presente no lado do cliente e a navegação se torna rápida como o de costume.

Use o comando — inspect=false para desativar o inspector:

ngrok http 8080 --host-header="localhost:8080" --inspect=false

Com o aumento do número de microserviços e aplicações front-end sendo expostos, pode ser um desafio executar todos esses comandos e identificar todas as portas. Mas, para esses casos, o ngrok tem uma solução que simplifica a sua vida!

Com o ngrok, você pode criar um arquivo .yml com todas as configurações dos seus microserviços e aplicações, incluindo suas respectivas portas e opções. Isso significa que você pode expor várias portas de uma única vez e gerenciar tudo em um único arquivo.

Essa é uma ótima maneira de economizar tempo e tornar o processo de exposição de portas mais eficiente.

Para encontrar o caminho para o arquivo de configuração no seu sistema operacional, execute o comando:

ngrok config check

A resposta gerada será algo semelhante a isso:

Valid configuration file at /root/snap/ngrok/98/.config/ngrok/ngrok.yml

Agora que já sabemos onde está salvo o nosso arquivo de configuração, adicione as informações de cada túnel que você deseja criar da seguinte maneira:

Configurações dos tunnels

Pronto! Agora você pode executar todos os seus túneis de uma única vez com o simples comando:

ngrok start --all

Conclusão:

Hoje trouxe um artigo sobre uma ferramenta que conheço e uso há alguns anos: o ngrok. Na minha opinião, ela é bastante útil e até mesmo indispensável em alguns casos. Com ela, podemos agilizar fluxos de pair programming, testes e alinhamentos. É importante lembrar que ela não substitui totalmente a falta de um ambiente de backend, mas pode ajudar em algumas situações de bloqueios de tarefas ou de certos alinhamentos e apresentações.

E você, já conhecia ou usava o ngrok? Deixe seu comentário!

E se gostou do artigo, dê um clap 👏.

Valeuu!

Aproveito o espaço para me apresentar…

Eu me chamo Lucas Porto e sou Team Lead Front-end na Mercafacil, uma empresa GPTW com missão de potencializar a conversão de vendas no varejo a partir da melhor experiência de consumo.

Nossos valores são:

• A partir das pessoas;
• Transparência em tudo;
• Impulsionados pela criatividade;
• Ser sempre melhor que ontem;
• Obcecados pelo WOW;
• Inteligência inspiradora;
• Criadores de experiências positivas.

Para quem se interessar, temos muitas vagas em aberto para nosso time de Engenharia!

Mercafacil

E para quem gostou desse artigo, temos muitos outros como:

• Avançando com JS: Escopo & Closures.
• Django e Arquitetura Limpa — A verdadeira batalha.
• Polimorfismo em Componentes Web — Uma maneira errada de escrever componentes.