Receita - expondo seu localhost ao mundo com Ngrok
Tags: braziliandevs, ptbr, tutorial, ngrok
Published: 2021-06-16 12:39:07

---
title: Receita - expondo seu localhost ao mundo com Ngrok 
published: true
description: Receita - expondo seu localhost ao mundo com Ngrok
tags: braziliandevs, ptbr, tutorial, ngrok
cover_image: https://itexto.com.br/wp-content/uploads/2020/04/receita_sonarqube.png
---

<!-- wp:paragraph -->
<p>Em tempos de quarentena esta é uma receita bastante útil. Eis a situação: você desenvolve sua aplicação localmente e gostaria que outras pessoas a acessassem remotamente mas sem a necessidade de implantá-la em um servidor. Como fazer?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Esta receita tem dois ingredientes: Linux e Ngrok, mas você pode substituir o primeiro por Windows ou MacOS se preferir.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","width":450,"height":299} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://uploads.metropoles.com/wp-content/uploads/2019/02/12115422/belagil2.jpg" alt="Bela Gil lança obra com receitas que levam raízes, folhas e sementes" width="450" height="299"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>O que é o Ngrok?</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":1602,"width":317,"height":321,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="http://beta.itexto.com.br/wp-content/uploads/2020/04/receita_ngrok.png" alt="" class="wp-image-1602" width="317" height="321"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Trata-se de um serviço gratuito (há limitações, mas para uma demonstração ou implementação de uma integração dá bem pro gasto) que permite ao desenvolvedor abrir um túnel que exporá serviços executados localmente em sua máquina para o mundo. Seu uso é bastante simples.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Inicie o serviço local em sua máquina.</li><li>Execute o Ngrok para expor a porta do serviço ao mundo. Será gerada uma URL que você deverá compartilhar com quem deseja acessar seu serviço.</li><li>Compartilhe a URL que será gerada para você.</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Primeiro passo: instale em seu computador local</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Acesse <a href="https://ngrok.com">https://ngrok.com</a> e crie uma conta no serviço. Opte pela opção gratuita e, na sequência, se autentique na plataforma. Baixe o cliente de acordo com seu sistema operacional (há versões pra Linux, Windows e MacOS).</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1604,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/site/wp-content/uploads/2020/04/image.png" alt="" class="wp-image-1604"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>O processo de instalação pode variar de acordo com seu sistema operacional. No caso do Linux é um arquivo zipado que você descompacta no diretório de sua preferência.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Descompactado no diretório de sua preferência, execute o comando que irá aparecer, na página de download do cliente Ngrok, tal como na imagem a seguir:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1605,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/site/wp-content/uploads/2020/04/image-1.png" alt="" class="wp-image-1605"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Segundo passo: execute o Ngrok e compartilhe o acesso</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O Ngrok pode apresentar ao mundo os protocolos HTTP, HTTPS e TCP executados em sua máquina. Em nossa receita iremos apresentar apenas o protocolo HTTP. Se sua aplicação estiver executando na porta 8080, basta executar o comando a seguir:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">./ngrok http 8080</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Você verá uma saída similar à apresentada à imagem a seguir:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1606,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.itexto.com.br/site/wp-content/uploads/2020/04/image-2.png" alt="" class="wp-image-1606"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Tá vendo aquelas URLs de forwarding (notou que uma delas é inclusive HTTPS???)? Compartilhe com quem você quer que acesse seu serviço executado localmente e voilá: seu cliente pode ver o resultado em sua máquina sem a necessidade de um servidor.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Experimente também aquele endereço apresentado como "Web Interface", pode ser uma mão na roda. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Esta receita na versão gratuita do Ngrok manterá a URL gerada por até 8 horas, mas nas versões pagas do serviço este tempo pode ser esticado.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Modos de servir</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Ngrok é muito útil não só quando você quer expor a alguém seu trabalho remotamente, mas também quando precisa implementar integrações. Já precisou, por exemplo, integrar com serviços como meios de pagamento que te mandam notificações por HTTP? Com Ngrok este trabalho fica muito mais fácil.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Também é muito útil quando você precisa resolver um bug com seu cliente ou QA e quer reproduzir a situação localmente para resolver o problema.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>As deliciosas receitas da itexto</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":1589,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://beta.itexto.com.br/wp-content/uploads/2020/04/receitas_itexto-1.png" alt="" class="wp-image-1589"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Recentemente começamos a divulgar nossas receitas ao grande público para compartilhar soluções rápidas para problemas comuns. Você pode aprender mais sobre nossa metodologia neste <a href="https://www.itexto.com.br/site/receitas-da-itexto/">link</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Espero que esta lhes seja útil. Até a próxima!</p>
<!-- /wp:paragraph -->