DEV Community

loading...
Cover image for Como expor seu localhost para teste em um cenário de desenvolvimento.

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

devneto profile image Miguel Updated on ・3 min read

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.

Alt Text

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}`)
})
Enter fullscreen mode Exit fullscreen mode

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:
Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Defina as permissões do arquivo com:

chmod +x ngrok
Enter fullscreen mode Exit fullscreen mode

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

./ngrok authtoken _SUA_HASH_
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

E voilà.

Alt Text

Alt Text

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:

image

image

image

Discussion (0)

pic
Editor guide