Acessando localhost de qualquer lugar

Você passou horas trabalhando localmente no seu computador, ajustando o design do novo site para ficar perfeito. Seu CMS está devidamente configurado com conteúdo de amostra e você deseja testá-lo em alguns dispositivos móveis e tablets. Seu cliente também quer dar uma olhada — mas você não tem tempo para migrar tudo para um servidor público para oferecer uma rápida vista.

Se você é desenvolvedor web, é provável que tenha estado nessa situação várias vezes. E provavelmente passou aqueles momentos queimando um pouco de óleo da meia-noite migrando coisas para um servidor voltado ao público, desejando que houvesse uma maneira mais fácil.

Para todos os desenvolvedores web cansados, estou aqui para lhes dizer que uma maneira mais fácil chegou! De fato, uma série de aplicativos e serviços estão disponíveis para facilitar esse processo, fornecendo acesso ao seu localhost pela Web. Aqueles que vou discutir neste artigo são:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

Principais Considerações

Como é Possível Acessar localhost de Qualquer Lugar?

É possível através de túneis seguros online! Estes são serviços que fornecem uma conexão entre a Internet e sua máquina.

O que isso significa é que eles fornecem um URL acessível publicamente, monitoram as chamadas nesse URL e encaminham essas chamadas para seu servidor localhost. Todo o complicado processo de configuração foi feito para você; tudo o que precisa fazer é instalar um aplicativo e apontá-lo para seu localhost.

A Note About Using Virtual Hosts

No meu localhost, tenho hosts virtuais configurados. Sem ter o endereço de cada serviço listado como um ServerAlias, meu servidor recusaria funcionar corretamente. Alguns horas de confusão se seguiram. Se você está na mesma situação, adicione um ServerAlias ao seu httpd.conf, substituindo o endereço ngrok que você vê abaixo pelo endereço do serviço que está usando:

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrok é uma aplicação para Windows, macOS e Linux que cria um túnel, mas também permite inspecionar todo o tráfego que passa pelo túnel e reenviar esse tráfego para testes.

Você pode usar recursos básicos gratuitamente e, em seguida, inscrever-se para acessar recursos mais avançados. Para usar subdomínios personalizados e domínios reservados, você precisará assinar um plano pago. Caso contrário, poderá usar o serviço, mas receberá um domínio aleatório, como o URL 350c0f8e.ngrok.com no exemplo de host virtual acima.

Os planos do Ngrok em maio de 2021 são assim:

Uma vantagem chave do ngrok é que ele não possui dependências. Você instala o ngrok e o executa. Nada mais é necessário.

Como usar o ngrok

Vá ao ngrok.com, baixe o arquivo e extraia-o para onde você gostaria que o ngrok residisse no seu computador. Abaixo estão os passos básicos, mas se você deseja mais detalhes, temos outro artigo sobre “Como usar o ngrok para compartilhar um site de desenvolvimento local“.

Abra um terminal de linha de comando e vá para a pasta onde extraiu o ngrok. Execute o seguinte comando para criar um túnel para o seu localhost na porta 80:

./ngrok http 80

Você verá uma tela como esta:

No exemplo acima, temos tráfego para um endereço ngrok gerado aleatoriamente de http://42e474ef9799.ngrok.com sendo redirecionado para nosso localhost em 127.0.0.1:80.

Abra esse URL em qualquer dispositivo com conexão à internet e você estará acessando seu localhost pela Web!

Uma das ofertas mais únicas que o ngrok proporciona é a capacidade de inspecionar o tráfego passado. Para fazer isso, acesse http://localhost:4040/ no seu computador. Você terá acesso a um painel mostrando as requisições de entrada. Pode clicar em cada requisição à esquerda e ver detalhes à direita sobre os cabeçalhos e outros dados. Minha utilização favorita disso é ver os dados JSON retornados das requisições. A aparência básica disso ao carregar uma página HTML simples é assim:

Você pode até reproduzir uma requisição clicando no botão Replay à direita. Isso irá reexecutar uma requisição para você através do túnel.

Recursos avançados do ngrok

Proteção por senha permite que você impeça que membros aleatórios do público acessem seu site:

ngrok http -auth="username:password" 80

Subdomínios personalizados são para quando você não quer ter que lembrar desse URL gerado aleatoriamente! Se você assinar um plano pago do ngrok, pode reservar um subdomínio para que outros não o possam apoderar. O seguinte permite que você visualize seu localhost em nogophersinmytunnel.ngrok.com:

ngrok http -subdomain nogophersinmytunnel 80

Domínios personalizados são para quando você prefere não ter “ngrok” em seu URL para o projeto encaminhado. Planos pagos permitem que você use seus próprios domínios, em vez de precisar usar ngrok.com:

ngrok http -hostname="tunnel.yourdomain.com" 80

Você pode até encaminhar para um endereço IP em sua rede local que de outra forma não estaria acessível ao mundo exterior:

ngrok http 192.168.0.27:80

Ou você pode criar um túnel para outros serviços não HTTP:

ngrok tcp 22

Existem várias outras coisas que você pode fazer, desde executar vários túneis ao mesmo tempo até criar um arquivo de configuração para salvar todas essas configurações para uso futuro.

Para se informar sobre todas as possibilidades, consulte a documentação do ngrok.

PageKite

PageKite é uma “proxy reverso baseado em túnel dinâmico” baseada em Python que funciona no Windows, macOS, Linux e até mesmo dispositivos Android! É muito semelhante ao ngrok, mas existe há muito mais tempo e parece bastante mais testado em combate para um conjunto maior de usos. Eles até conseguiram fazê-lo funcionar com o protocolo Minecraft, permitindo que as pessoas executem um servidor Minecraft em sua máquina local.

Você pode se inscrever para uma avaliação gratuita de um mês e 2,5GB de quota de transferência. Depois disso, tem um sistema de “pague o que quiser” (um mínimo de USD$4 por mês, ou gratuito se você trabalha em software de código aberto gratuito). No entanto, você precisa pagar mais para obter mais neste caso, com aqueles que pagam quantias maiores recebendo uma quota maior, um prazo de serviço mais longo, subdomínios personalizados, e assim por diante.

O PageKite não parece ter um inspetor de tráfego como o ngrok, mas possui recursos incríveis como um firewall integrado que bloqueia o acesso a alvos de ataque comuns como /wp-admin, /xampp, phpMyAdmin páginas… e assim por diante. Pode ser desabilitado se você estiver bem com esses sendo públicos.

Eles até têm um servidor de retransmissão de front-end em Sydney, Austrália, então isso poderia potencialmente fornecer velocidades mais rápidas para desenvolvedores australianos.

Como usar o PageKite

Vá para PageKite.net e baixe a versão para o seu sistema operacional. Para usuários do Windows, você precisará ter o Python instalado primeiro. Para macOS e Linux, você pode usar um simples comando cURL para instalá-lo diretamente da sua linha de comando.

Após baixar, execute este comando para criar um túnel até o servidor localhost. Você escolhe um subdomínio específico que usa cada vez (em vez da alocação aleatória no ngrok). Escolhi hurrygetintothefancytunnel aqui:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Recentemente no meu Mac, precisei executar com python3 no início, então tente isso se o acima não funcionar:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Ele irá executar e inscrever você no serviço se você ainda não estiver inscrito. Então você terá o localhost funcionando para o mundo!

Recursos Avançados do PageKite

O PageKite possui alguns recursos adicionais mais impressionantes.

Um exemplo: não há necessidade de um servidor web. Se você não tem um servidor em execução, ele possui um servidor web embutido que pode executar seus arquivos estáticos assim:

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

Como o ngrok, você pode restringir o acesso via senha:

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

Ou restringir o acesso via endereços IP:

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

Como mencionado acima, você pode até executar tudo isso no seu telefone. Instalei um servidor web Android chamado kWS e depois executei o PageKite para expor-lo à Web:

Certamente não é algo que farei todos os dias, mas é muito legal ver que essas coisas agora são possíveis apenas em um smartphone!

Assim como o ngrok, o PageKite pode fazer vários túneis ao mesmo tempo, e suporta ter seu próprio domínio, e suporta configurar um arquivo de configuração para seus túneis. Para mais informações sobre isso, confira o seu Guia de Início Rápido e a sua página mais detalhada de como-fazer.

localtunnel

localtunnel é um serviço de túnel que foi inicialmente construído em Node, mas também possui clientes baseados em Go e C#/.NET.

Como usar localtunnel

Você pode instalá-lo globalmente no seu dispositivo como a maioria dos pacotes npm:

npm install -g localtunnel

Para iniciar um túnel para o seu localhost na porta 80, você executa este comando:

lt --port 80

Funcionará como o ngrok e o PageKite! Ele fornece um subdomínio parecido com o que recebi: https://loud-ladybug-21.loca.lt.

Ao executar localtunnel pela primeira vez, você receberá um lembrete amigável de que esta ação está tornando seus ativos públicos na Web. Basta clicar em Clique para Continuar.

Recursos avançados do localtunnel

Conseguir um subdomínio personalizado gratuito é totalmente possível aqui, desde que o subdomínio não tenha sido tomado. Para usar um subdomínio personalizado, basta executá-lo com o parâmetro --subdomain:

lt --port 80 --subdomain platypusestunneltoo

Um dos recursos muito úteis que o localtunnel fornece é uma API Node que permite gerar localtunnels via JavaScript para usar em seus testes automatizados:

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // Sua URL de túnel aparecerá como tunnel.url

  tunnel.on('close', () => {
    // Faça algo quando o túnel for fechado
  });
})();

boringproxy

boringproxy é uma opção mais recente que é totalmente gratuita e de código aberto sob a licença MIT! Seu principal foco parece ser facilitar a hospedagem de sites em computadores pessoais. Ele vem como um único arquivo executável que atua como servidor e cliente em um. Há um executável para uma variedade de sistemas Linux e Windows. macOS está listado como “não testado”. Não consegui fazê-lo funcionar no meu Mac pessoalmente, mas se você tem acesso a uma caixa Linux ou um Raspberry Pi, esta pode ser a solução para você. Está escrito em Go e está aberto para contribuintes.

Seus recursos em resumo:

• 100% gratuito e de código aberto sob a licença MIT
• pode ser totalmente auto-hospedado
• possui proxy reverso embutido
• suporta domínios/subdomínios personalizados

Como Usar boringproxy

Os principais passos são mais fáceis de seguir na documentação de boringproxy, pois é diferente para diferentes plataformas.

No geral, envolve:

• baixar a instância do servidor via curl (por exemplo, curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmodando o executável baixado (por exemplo, chmod +x boringproxy-linux-x86_64)
• configurando o encaminhamento para as portas 80 e 443 (por exemplo, sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• configurando o executável também no cliente

Este vídeo do criador do boringproxy aborda como fazer isso da melhor maneira:

Recursos avançados do boringproxy

Certificados HTTPS automáticos são gerenciados automaticamente para você através do Let’s Encrypt. Não há necessidade de se preocupar em obter certificados para testes, pois isso acontece nos bastidores.

Interface web para configuração é automaticamente configurada para permitir que você gerencie usuários, tokens de acesso e túneis.

Você pode encaminhar aplicativos web com facilidade. Hospede aplicativos web como o Etherpad (mostrado no vídeo acima), atribua-lhes um subdomínio próprio e, em seguida, você pode acessá-los de qualquer lugar.

BrowserStack

BrowserStack fornece capturas de tela automatizadas e máquinas virtuais para testar seu site em uma variedade de dispositivos e navegadores. Se o motivo pelo qual você deseja acessar o localhost é para testes, o BrowserStack pode ser de interesse para você.

Você pode usar os métodos acima para testar sites localhost nas máquinas virtuais do BrowserStack, mas também possui uma extensão de navegador para Chrome e Firefox permitindo que você forneça acesso ao seu localhost a partir de seus servidores.

No entanto, essa funcionalidade é exclusiva para os serviços do BrowserStack e não está acessível ao público em geral. O BrowserStack oferece uma avaliação gratuita, após a qual será necessário pagar uma taxa mensal para usar o serviço. Seria útil em casos em que o único motivo para acessar localhost é fazer testes em dispositivos.

Como usar o BrowserStack

Inscreva-se para uma avaliação gratuita em BrowserStack.com. Eles realmente documentaram bem o processo de teste local em seu site, então leia isso se estiver interessado nessa opção.

No final, no entanto, permitirá que você teste seus sites localhost em máquinas virtuais executadas na Web da seguinte forma:

Escolhendo Favoritos

Depois de experimentar todas essas opções, minhas favoritas pessoais seriam o ngrok e o PageKite.

O PageKite parece ser a solução mais multifacetada com muito potencial. Foi desenvolvido e expandido para atender a uma variedade de usos ao longo dos anos, tornando-o uma aplicação realmente impressionante!

O ngrok também é ótimo por sua simplicidade e pelo inspetor de tráfego. Possui mais do que recursos suficientes para a maioria dos desenvolvedores web que desejam acessar seu localhost na Web.

Conclusão

Se você está trabalhando em um computador com conexão à internet ativa, agora pode configurar o acesso ao seu localhost de qualquer lugar em apenas alguns minutos! É incrivelmente simples começar e, como você viu, não há falta de soluções!

Você já usou algum desses serviços? Você tem outros que prefere? Eu adoraria saber suas opiniões no Twitter!

 

Perguntas Frequentes sobre acessar localhost de qualquer lugar