DEV Community

Cover image for Transforme Seu Servidor Local em um Site Público com Ngrok
Alexandre Justen Filho
Alexandre Justen Filho

Posted on

1

Transforme Seu Servidor Local em um Site Público com Ngrok

Quando desenvolvemos uma aplicação web localmente e queremos compartilhá-la para testes ou demonstrações, encontramos uma barreira comum: a aplicação só está acessível em nossa rede local. É aqui que entra o ngrok!

O Que é Tunelamento?

O tunelamento permite expor um servidor local para a internet através de um canal seguro. Isso é especialmente útil em ambientes de desenvolvimento, onde você deseja compartilhar seu servidor com clientes ou testá-lo em outros dispositivos sem ter que fazer o deploy completo.

Por Que Usar o Ngrok?

O ngrok é uma das ferramentas mais populares para tunelamento, e por boas razões:

  1. Rápido e Fácil de Usar: Com apenas uma linha de comando, você pode criar um túnel para o seu servidor local.
  2. Segurança: Cria uma conexão segura (HTTPS) automaticamente.
  3. Flexível: Funciona com HTTP, HTTPS, TCP e até WebSockets.
  4. Insights e Depuração: Permite monitorar e depurar requisições recebidas em tempo real.

Como Usar o Ngrok?

  • Baixe e Instale o Ngrok:

Acesse ngrok.com e baixe a versão adequada para o seu sistema.

Após o download, descompacte o arquivo e coloque o executável em uma pasta de fácil acesso.

  • Autenticação (opcional, mas recomendado):

Crie uma conta no ngrok e copie seu token de autenticação.
No terminal, execute:

ngrok authtoken SEU_TOKEN
Enter fullscreen mode Exit fullscreen mode

Image description

  • Iniciando o Túnel:

Com o servidor da sua aplicação rodando (por exemplo, na porta 3000), inicie o túnel com o comando:

ngrok http 3000
Enter fullscreen mode Exit fullscreen mode

Image description

Este comando cria um túnel HTTP e HTTPS para a porta 3000 do seu localhost. Você verá um endereço público no formato https://xxxx.ngrok.io que pode ser acessado de qualquer lugar.

  • Visualize e Depure o Tráfego:

Acesse http://localhost:4040 para ver informações detalhadas sobre cada requisição recebida, incluindo cabeçalhos, payload e status de resposta. Essa visualização é ótima para depurar APIs.

  • Encerrando o Túnel:

Para parar o ngrok, basta fechar o terminal ou pressionar Ctrl+C.

  • Exemplos de Uso do Ngrok
  1. Testes de Webhooks: Ideal para desenvolver e testar webhooks de serviços externos como Stripe, PayPal e GitHub, sem precisar fazer o deploy do código.
  2. Demonstrar Aplicações em Tempo Real: Compartilhe seu progresso com colegas ou clientes em uma aplicação em execução localmente.
  3. Desenvolvimento de APIs: Teste e depure endpoints localmente antes de enviá-los para produção.

O ngrok é uma ferramenta indispensável para quem desenvolve aplicações web e precisa de acesso rápido, seguro e fácil a um servidor local a partir da internet. Com ele, o tunelamento se torna simples, ampliando as possibilidades de desenvolvimento e teste.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay