Como expor seu localhost para teste em um cenário de desenvolvimento.
Tags: devops, tooling, productivity, security
Published: 2020-12-19 22:30:56

>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](https://ngrok.com)**, 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](https://dev-to-uploads.s3.amazonaws.com/i/p4nhi1plyuqbpnlqb5qs.png)

>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](https://en.wikipedia.org/wiki/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](https://ngrok.com)** 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](https://dev-to-uploads.s3.amazonaws.com/i/g56n4c4vjra61zmtwgpg.png)

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à.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/23rowc15jz2ijdfb83de.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t1azh0xqzxae2910gc5r.png)

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:  

<a href="https://github.com/devneto">![image](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)</a>

<a href="https://www.instagram.com/dev.neto">![image](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)</a>

<a href="https://twitter.com/https_rabbit">![image](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)</a>