Como expor seu localhost para teste em um cenário de desenvolvimento.

Bom dia site,

Venho hoje compartilhar uma ferramenta que outrora utilizava para outros fins acadêmicos e que hoje utilizo para compartilhar informações como minha equipe de desenvolvimento, como o preview de uma aplicação local ou o compartilhamento de um banco de dados através de uma api sem a realização prévia de um deploy.

Isso tudo é possível através de uma ferramenta chamada ngrok, o mesmo tem como finalidade criar proxy reverso que estabelece um túnel seguro de um localhost para um serviço da web, como a captura e analise de todo o tráfego no túnel para inspeção e reprodução.

Mas e o firewall?

Como o ngrok é baseado em tuneis, a conexão preliminar é feita sempre do lado do cliente criando uma conexão tcp, onde muitos soquetes lógicos são criados por meio de conexões de soquete físicas, essa técnica é chamada Multiplexing.

Como criar um túnel para minha aplicação?

Imagine o determinado cenário de uma pequena api com uma rota get:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('ngrok server!')
})

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`)
})

Nota-se que nosso servidor está escutando a porta 3000, guarde essa informação pois ela é importante.

Bom, agora precisamos baixar o ngrok para realizar a exposição.

Let's start with alchemy 🧙🏽‍♂️

Entre no site oficial da ferramenta ngrok e crie uma conta, esse processo é bem simples uma vez que ela oferece suporte de inscrição pelo github e demais serviços.

Após o registro, você deve estar vendo uma tela parecida com essa:

Faça o download para seu ambiente de uso.

Por padrão a ferramenta vem compactada e se você estiver usando linux pode realizar o processo de descompactação com o seguinte comando:

unzip /path/to/ngrok.zip

Defina as permissões do arquivo com:

chmod +x ngrok

e execute o mesmo com a hash disponível no seu perfil do site oficial.

./ngrok authtoken _SUA_HASH_

Por fim, vamos realizar o processo de exposição com a ferramenta, como nossa aplicação está rodando na porta 3000 o processo terá que ser feito da seguinte maneira:

./ngrok http 3000

E voilà.

Agora temos nosso servidor prontinho e exposto para toda web!

Considerações finais

Esse é meu primeiro post aqui, desde já, peço desculpa caso tenha errado em algum momento. Estou aberto a criticas e podem me acompanhar ou bater uma prosa através das minhas redes sociais: