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á bem configurado com conteúdo de amostra e você quer 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 dar a eles uma rápida espiada.

Se você é um desenvolvedor web, é provável que já tenha passado por essa situação várias vezes. E provavelmente passou aqueles momentos queimando um pouco de óleo da meia-noite migrando coisas para um servidor voltado para o 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 inteira 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! Esses são serviços que fornecem um túnel da Internet até sua máquina.

O que isso significa é que eles fornecem um URL acessível publicamente, monitoram chamadas nesse URL e encaminham essas chamadas para seu servidor localhost. Todo o complicado setup 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 abaixo 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 do 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 reproduzir 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 a 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 assim:

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 oferece é a capacidade de inspecionar o tráfego passado. Para fazer isso, vá para http://localhost:4040/ no seu computador. Você terá acesso a um painel mostrando solicitações de entrada. Você pode clicar em cada solicitação à esquerda e ver detalhes à direita para os cabeçalhos e outros dados. Minha utilização favorita disso é ver dados JSON retornados de solicitações. A disposição básica disso ao carregar uma página HTML simples é assim:

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

Recursos avançados do ngrok

Proteção por senha permite impedir 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ê se inscrever em um plano pago do ngrok, poderá reservar um subdomínio para que outras pessoas não possam pegá-lo. 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 túnelado. 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é mesmo túnel 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 tem existido por 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 inscrever-se para uma avaliação gratuita de um mês e 2,5GB de cota de transferência. Após isso, há um sistema de “pague o que quiser” (um mínimo de USD$4 por mês, ou gratuito se você trabalha em software livre de código aberto). No entanto, você precisa pagar mais para obter mais neste caso, com aqueles que pagam quantias maiores recebendo uma cota maior, um período 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 desativado 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, o que potencialmente poderia fornecer velocidades mais rápidas para desenvolvedores australianos.

Como usar o PageKite

Vá para PageKite.net e faça o download da versão para o seu sistema operacional. Para usuários do Windows, é preciso garantir que o Python já esteja instalado. Para macOS e Linux, você pode usar um simples comando cURL para instalá-lo diretamente pelo seu terminal.

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

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Recentemente, no meu Mac, precisei iniciar com python3, então tente isso se o anterior não funcionar:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Ele irá executar e inscrever você no serviço, caso ainda não esteja 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 rodar seus arquivos estáticos assim:

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

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

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

Ou restringir o acesso por 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 celular. 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 é bastante legal ver que essas coisas agora são possíveis apenas com um smartphone!

Assim como o ngrok, o PageKite pode criar múltiplos túneis ao mesmo tempo, suporta a utilização de seu próprio domínio e permite configurar um arquivo de configuração para seus túneis. Para mais informações, consulte a Guia de Início Rápido e a página mais detalhada de instruções.

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 o localtunnel

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

npm install -g localtunnel

Para iniciar um túnel para seu localhost na porta 80, execute 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 o localtunnel pela primeira vez, você receberá um lembrete amigável de que essa ação está tornando seus ativos públicos na Web. Basta clicar em Clique para Continuar.

Recursos avançados do localtunnel

Obter um subdomínio personalizado gratuito é 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 oferece é uma API Node que permite gerar localtunnels via JavaScript para uso 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 que as pessoas hospedem sites em seus computadores. Ele vem como um único arquivo executável que funciona 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”. Eu 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ê. Tudo está escrito em Go e está aberto para contribuintes.

Suas características 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 o boringproxy

Os principais passos são mais fáceis de seguir na documentação do 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)
• chmoding o executável que foi 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 no cliente também

Este vídeo do criador do boringproxy aborda o melhor procedimento:

Recursos avançados do boringproxy

Certificados Auto HTTPS são gerenciados automaticamente para você via 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 gama de dispositivos e navegadores. Se o motivo pelo qual você deseja acessar 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 o 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, porém, permitirá que você teste seus sites localhost em máquinas virtuais executadas na Web assim:

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 um enorme potencial. Foi desenvolvido e expandido para atender 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 suficientes recursos 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