Ngrok: do Localhost para o Mundo

O Ngrok expõe serviços que estão sendo executados localmente (do seu computador) para a Internet, de forma rápida e segura.

O que é Ngrok?

O Ngrok é uma ferramenta CLI (Comand Line Interface) que te permite criar um túnel seguro, atrás de NATs e Firewalls, que expõem serviços locais para a Internet, tudo isso de forma fácil e segura.

ngrok - secure introspectable tunnels to localhost

Criar uma conexão via túnel pode ser bastante útil quando você precisa:

• Mostrar um preview remotamente da sua aplicação para alguém;
• Desenvolver integrações de Webhook;
• Testar aplicativos móveis conectados ao seu backend em execução local;
• Acessar seu Raspberry PI/Computador remotamente via SSH;
• Testar um chatbot durante o desenvolvimento;

Acho que você já entendeu… né? hehe

Como instalar o Ngrok?

O Ngrok é multiplataforma, ou seja, pode ser instalado no Linux, Mac OS ou no Windows. Para usar o Ngrok o primeiro passo é fazer o download (https://ngrok.com/download) conforme seu sistema operacional, você irá baixar um arquivo .zip, com o download concluído basta descompactar o arquivo .zip e executar via terminal o arquivo ngrok que foi extraído nesse processo — O Ngrok é uma ferramenta CLI lembra? Por tanto, funciona via terminal.

Uma dica é adicionar o ngrok no PATH do seu sistema operacional, dessa forma, você poderá executa-lo facilmente de qualquer terminal sem ter que 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:

Você pode usa-lo sem criar nenhum tipo de conta, porém você terá algumas limitações, como por exemplo, um tempo máximo que irá limitar suas seções após criar um túnel. 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 seção.

Para vincular o ngrok a sua conta, você precisa do Authtoken que é disponibilizado nas configurações de conta, com o token em mãos, basta executar o seguinte comando:

ngrok authtoken seu-authtoken-aqui

Expondo um web server local para a internet

Para fazer essa demonstração, vamos executar um simples servidor web em Node.js rodando em localhost na porta 8000. Para isso, eu criei um arquivo com o nome server.js, com o seguinte código:

// Arquivo server.js
const http = require('http');
const host = 'localhost';
const port = 8000;
const requestListener = function (req, res) {
    console.log('request received');
    res.setHeader('Content-Type', 'text/html');
    res.writeHead(200);
    res.end('<h1>This is Ngrok</h1>');
};
const server = http.createServer(requestListener);
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});

No terminal, execute o código do arquivo:

node server.js

Agora, o próximo passo é criar um túnel na porta 8000 expondo esse servidor web via ngrok, pra isso abra outra janela de terminal e execute o seguinte comando:

ngrok http 8000

Você irá visualizar algo semelhante a isso:

Na imagem acima, perceba as URLs de forwarding, são através desses links que seus serviços ficarão disponíveis para o mundo via internet (como bônus você ganha até um https). Compartilhe os links com quem você quiser ou integre-os com aplicações de terceiros conforme sua necessidade. Nesse exemplo, quando alguém acessar o endereço http://0d75f4fc85c0.ngrok.io o tráfego será retransmitido para http://localhost:8000 por meio do processo ngrok que está em execução na máquina.

Por padrão, no plano free, as URLs de Forwarding do Ngrok são randômicas, ou seja, elas sempre mudam quando você cria um novo túnel.

Protegendo seu túnel com senha

Com o Ngrok você pode proteger a aplicação exposta via autenticação HTTP Basic, para isso utilize o comando:

ngrok http -auth="username:password" 8000

Agora todas as solicitações para a URL de forwarding do Ngrok, irão exigir o usuário e senha que você especificou como argumento.

Inspecionando seu tráfego

Reparou no link Web Interface? O Ngrok disponibiliza uma interface web onde você pode inspecionar em tempo real todos os detalhes das requisições e respostas que estão trafegando no seu túnel. Pra isso, acesse:

http://127.0.0.1:4040

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

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

Além disso, você ainda tem a opção de repetir a solicitação através de um botão de "Replay".

Outros recursos e configurações

Pensou que era só isso? Pensou errado então… Pois o Ngrok possui diversos recursos e configurações.

Você pode criar um túnel via TCP e expor qualquer serviço que esteja executando localmente, por exemplo:

• Expor um servidor SSH configurado na porta padrão

ngrok tcp 22

• Expor um servidor Postgres escutando na sua porta padrão

ngrok tcp 5432

O Ngrok vem até com um file server embutido, ou seja, você pode criar um túnel HTTP apontando para um diretório do seu sistema de arquivo local, basta usar o file:// e o path absoluto para o diretório. Por exemplo:

ngrok http -auth="user:password" file:///Users/joao/share

Para conhecer todos os recursos e possibilidades que o Ngrok pode te oferecer, acesse o link abaixo:

ngrok - documentation

Conclusão

Eu conheço e uso o Ngrok já há alguns anos. É uma ferramenta bastante útil e na minha opinião, até indispensável em alguns casos…

E você, o que achou do artigo? já conhecia/usava o Ngrok? Me conta aí… deixe seu comentário.

Obrigado por ler! Se você chegou até aqui e gostou do artigo, dê um clap 👏!