Accedere a localhost da Ovunque

Hai passato ore a lavorare localmente sul tuo computer, perfezionando il nuovo design del sito web. Il tuo CMS è ben configurato con contenuto di esempio e vuoi testarlo su alcuni dispositivi mobili e tablet. Il tuo cliente vuole anche dare un’occhiata — ma non hai il tempo di trasferirlo tutto su un server pubblico per farli dare un rapido sguardo.

Se sei un web developer, è probabile che ti sia trovato in questa situazione molte volte. E probabilmente hai passato quelle ore a spremere un po’ di olio di notte per trasferire le cose su un server accessibile al pubblico, sperando in un modo più semplice.

A tutti voi web developer con gli occhi stanchi, sono qui per dirvi che un modo più semplice è arrivato! Infatti, sono disponibili un’intera serie di applicazioni e servizi che aiutano a rendere questo processo più facile fornendo l’accesso al tuo localhost dalla Web. Quelli di cui parlerò in questo articolo sono:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

Key Takeaways

Come è Possibile Accedere a localhost da Ovunque?

È possibile attraverso tunnel sicuri online! Questi sono servizi che forniscono un tunnel dall’Internet alla tua macchina.

Ciò significa che forniscono un URL accessibile pubblicamente, monitorano le chiamate su quell’URL e le reindirizzano al tuo server localhost. Tutta la configurazione complicata è stata fatta per te; tutto ciò che devi fare è installare un’applicazione e indirizzarla al tuo localhost.

A Note About Using Virtual Hosts

Sul mio localhost, ho impostato host virtuali. Senza avere l’indirizzo di ciascuno dei servizi elencati sotto come ServerAlias, il mio server rifiuterebbe di collaborare. Sono seguiti alcune ore di confusione. Se ti trovi nella stessa situazione, aggiungi un ServerAlias al tuo httpd.conf, sostituendo l’indirizzo di ngrok che vedi sotto con l’indirizzo del servizio che stai utilizzando:

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

ngrok

ngrok è un’applicazione per Windows, macOS e Linux che crea un tunnel e consente anche di ispezionare tutto il traffico che passa attraverso il tunnel e riprodurre quel traffico per i test.

Puoi utilizzare le funzionalità di base gratuitamente e poi registrarti per accedere a funzionalità più avanzate. Per utilizzare sottodomini personalizzati e domini riservati, dovrai sottoscrivere un piano a pagamento. Altrimenti, sarai in grado di utilizzare il servizio, ma ti verrà assegnato un dominio casuale come l’URL 350c0f8e.ngrok.com nell’esempio di host virtuale sopra.

I piani di ngrok a partire da maggio 2021 sono così:

Un vantaggio chiave di ngrok è che non ha dipendenze. Installi ngrok e lo esegui. Non è richiesto nulla di più.

Come utilizzare ngrok

Vai su ngrok.com, scarica l’archivio ed estralo ovunque desideri che ngrok risieda sul tuo computer. Di seguito sono riportati i passaggi basilari, ma se desideri maggiori dettagli, abbiamo un’altra guida su “Come utilizzare ngrok per condividere un sito di sviluppo locale“.

Apri un terminale a riga di comando e vai alla cartella in cui hai estratto ngrok. Esegui il seguente comando per creare un tunnel al tuo localhost sulla porta 80:

./ngrok http 80

Vedrai uno schermo simile a questo:

Nell’esempio sopra, abbiamo il traffico indirizzato a un indirizzo ngrok generato casualmente di http://42e474ef9799.ngrok.com che viene instradato al nostro localhost su 127.0.0.1:80.

Apri quel URL su qualsiasi dispositivo con una connessione Internet e accederai al tuo localhost dal Web!

Una delle offerte più uniche che ngrok offre è la possibilità di ispezionare il traffico passato. Per farlo, vai su http://localhost:4040/ sul tuo computer. Accederai a un dashboard che mostra le richieste in ingresso. Puoi fare clic su ciascuna richiesta sulla sinistra e vedere i dettagli sulla destra per i header e altri dati. Il mio uso preferito di questo è vedere i dati JSON restituiti dalle richieste. La disposizione molto basilare di questo quando si carica una semplice pagina HTML è simile a questa:

Puoi persino riprodurre una richiesta facendo clic sul pulsante Replay a destra. Questo ricaricherà una richiesta per te attraverso il tunnel.

Caratteristiche avanzate di ngrok

Protezione con password ti permette di impedire che membri casuali del pubblico accedano al tuo sito:

ngrok http -auth="username:password" 80

Sottodomini personalizzati sono per quando non vuoi dover ricordare quel URL generato casualmente! Se ti registri per un piano a pagamento di ngrok, puoi riservare un sottodominio in modo che altri non possano prenderlo. Il seguente ti permette di visualizzare il tuo localhost su nogophersinmytunnel.ngrok.com:

ngrok http -subdomain nogophersinmytunnel 80

Domini personalizzati sono per quando preferisci non avere “ngrok” nel tuo URL per il progetto tunnelizzato. I piani a pagamento ti consentono di utilizzare i tuoi domini, piuttosto che dover utilizzare ngrok.com:

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

Puoi persino creare un tunnel verso un indirizzo IP nella tua rete locale che altrimenti non sarebbe accessibile dal mondo esterno:

ngrok http 192.168.0.27:80

Oppure puoi creare un tunnel per altri servizi non HTTP:

ngrok tcp 22

Ci sono un sacco di altre cose che puoi fare, dall’esecuzione di più tunnel contemporaneamente alla creazione di un file di configurazione per salvare tutte queste impostazioni per un uso futuro.

Per informazioni dettagliate su tutto ciò che è possibile, consulta la documentazione di ngrok.

PageKite

PageKite è un “reverse proxy dinamico basato su tunnel” basato su Python che funziona su Windows, macOS, Linux e anche dispositivi Android! È molto simile a ngrok ma è stato intorno per molto più tempo, e sembra molto più collaudato per un insieme di usi più ampio. Lo hanno persino integrato con il protocollo Minecraft per consentire alle persone di eseguire un server Minecraft sul loro computer locale.

Puoi iscriverti a una prova gratuita per un mese e 2,5 GB di quota di trasferimento. Dopo di che ha un sistema a pagamento a piacere (un minimo di 4 USD al mese, o gratuito se lavori su software open source gratuito). Tuttavia, è necessario pagare di più per ottenere di più in questo caso, con quelli che pagano importi maggiori che ottengono una quota più grande, un periodo di servizio più lungo, sottodomini personalizzati e così via.

PageKite non sembra avere uno strumento di ispezione del traffico come ngrok, ma ha caratteristiche piuttosto incredibili come un firewall integrato che blocca l’accesso a bersagli di attacco comuni come /wp-admin, /xampp, phpMyAdmin pagine… e così via. Può essere disabilitato se sei d’accordo con questi che sono pubblici.

Hanno anche un server di relè front-end a Sydney, Australia, quindi questo potrebbe potenzialmente fornire velocità più rapide per i sviluppatori australiani.

Come utilizzare PageKite

Vai su PageKite.net e scarica la versione per il tuo sistema operativo. Per gli utenti di Windows, assicurati di avere Python installato prima. Per macOS e Linux, puoi utilizzare un semplice comando cURL per installarlo direttamente dalla tua riga di comando.

Una volta scaricato, esegui questo comando per eseguire un tunnel verso il tuo server localhost. Scegli un sottodominio specifico che utilizzerai ogni volta (invece della allocazione casuale in ngrok). Qui ho scelto hurrygetintothefancytunnel:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Recentemente sul mio Mac, ho dovuto eseguire con python3 all’inizio, quindi prova questo se il sopra non funziona:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Funzionerà attraverso e ti iscriverà al servizio se non sei già iscritto. Quindi avrai localhost attivo e funzionante per il mondo!

Funzionalità Avanzate di PageKite

PageKite ha alcune funzionalità aggiuntive più impressionanti.

Un esempio: non c’è bisogno di un server web. Se non hai un server in esecuzione, ha un server web integrato che può eseguire i tuoi file statici in questo modo:

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

Come ngrok, puoi limitare l’accesso tramite password:

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

O limitare l’accesso tramite indirizzi IP:

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

Come menzionato sopra, puoi anche eseguire tutto questo sul tuo telefono. Ho installato un server web Android chiamato kWS e poi ho eseguito PageKite per esporlo a Internet:

Di sicuro non è qualcosa che farò ogni giorno, ma è piuttosto interessante vedere che queste cose sono ora possibili esclusivamente su uno smartphone!

Proprio come ngrok, PageKite può gestire più tunnel contemporaneamente, supporta l’utilizzo di un proprio dominio e consente di impostare un file di configurazione per i tunnel. Per maggiori informazioni, consulta il loro Guida introduttiva e la loro pagina più completa di istruzioni dettagliate.

localtunnel

localtunnel è un servizio di tunneling originariamente sviluppato in Node ma che offre anche client basati su Go e C#/.NET.

Come utilizzare localtunnel

Puoi installarlo globalmente sul tuo dispositivo come la maggior parte dei pacchetti npm:

npm install -g localtunnel

Per avviare un tunnel verso il tuo localhost sulla porta 80, esegui questo comando:

lt --port 80

Funzionerà allo stesso modo di ngrok e PageKite! Ti fornisce un sottodominio simile a quello che ho ricevuto: https://loud-ladybug-21.loca.lt.

La prima volta che esegui localtunnel, riceverai un avvertimento amichevole che questa azione rende i tuoi asset pubblici su Web. Basta premere Clicca per Continuare.

Funzionalità avanzate di localtunnel

Ottenere un sottodominio personalizzato gratuito è del tutto possibile qui, purché il sottodominio non sia già stato preso. Per utilizzare un sottodominio personalizzato, esegui il comando con il parametro --subdomain:

lt --port 80 --subdomain platypusestunneltoo

Una delle caratteristiche molto utili che localtunnel offre è una API Node che ti permette di generare localtunnels attraverso JavaScript per utilizzarli nei tuoi test automatizzati:

const localtunnel = require('localtunnel');

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

  // La tua URL del tunnel apparirà come tunnel.url

  tunnel.on('close', () => {
    // Fai qualcosa una volta che il tunnel viene chiuso
  });
})();

boringproxy

boringproxy è un’opzione più recente completamente gratuita e open source con licenza MIT! Il suo obiettivo principale sembra essere quello di facilitare il self hosting di siti web sulle proprie macchine. Viene fornito come un unico file eseguibile che funge da server e client insieme. C’è un file eseguibile per una gamma di sistemi Linux e Windows. macOS è elencato come “non testato”. Personalmente non sono riuscito a farlo funzionare sul mio Mac, ma se hai accesso a una scatola Linux o a una Raspberry Pi, questa potrebbe essere la soluzione per te. È scritto interamente in Go ed è aperto per i contributori.

Le sue caratteristiche in breve:

• 100% gratuito e open source con licenza MIT
• può essere completamente self hosted
• ha un reverse proxy integrato
• supporta domini/sottodomini personalizzati

Come Utilizzare boringproxy

I principali passaggi sono più semplici da seguire nella documentazione di boringproxy, poiché è diverso per ogni piattaforma.

In generale, comporta:

• il download dell’istanza server tramite curl (ad esempio, curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmodando l’eseguibile scaricato (ad esempio, chmod +x boringproxy-linux-x86_64)
• configurazione dell’associazione ai porte 80 e 443 (ad esempio, sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• configurazione dell’eseguibile anche sul client

Questo video del creatore di boringproxy spiega al meglio come fare:

Funzionalità avanzate di boringproxy

Certificati HTTPS automatici vengono gestiti automaticamente per te tramite Let’s Encrypt. Non c’è bisogno di preoccuparsi di ottenere certificati per i test, poiché avviene dietro le quinte.

Interfaccia web per la configurazione è automaticamente impostata per consentirti di gestire utenti, token di accesso e tunnel.

Puoi creare tunnel per applicazioni web facilmente. Ospita web app come Etherpad (mostrato nel video sopra), assegna loro un proprio sottodominio, e poi puoi accedervi da qualsiasi luogo.

BrowserStack

BrowserStack fornisce screenshot automatizzati e macchine virtuali per testare il tuo sito web contro una gamma di dispositivi e browser. Se il motivo per cui vuoi accedere a localhost è per testare, BrowserStack potrebbe interessarti.

Puoi utilizzare i metodi sopra per testare siti localhost nelle macchine virtuali di BrowserStack, ma dispone anche di un’estensione per browser per Chrome e Firefox che ti consente di fornire accesso al tuo localhost dai loro server.

Tuttavia, questa funzionalità è disponibile solo per i servizi BrowserStack e non è accessibile al grande pubblico. BrowserStack offre una prova gratuita, dopo la quale dovrai pagare un costo mensile per utilizzare il servizio. Sarebbe utile nei casi in cui l’unica ragione per cui cerchi di accedere a localhost è fare test su dispositivi.

Come utilizzare BrowserStack

Registrati per una prova gratuita su BrowserStack.com. Hanno effettivamente documentato il processo di test locale in modo abbastanza dettagliato sul loro sito web, quindi fai una lettura di quello se sei interessato a seguire questa strada.

Alla fine, tuttavia, ti permetterà di testare i tuoi siti localhost su macchine virtuali eseguite su Web in questo modo:

Preferenze personali

Dopo aver provato tutte queste opzioni, le mie preferite personalmente sarebbero ngrok e PageKite.

PageKite sembra la soluzione più versatile con un enorme potenziale. È stato sviluppato ed esteso per adattarsi a una gamma di usi nel corso degli anni, rendendolo un’applicazione davvero impressionante!

ngrok è ottimo anche per la sua semplicità e l’inspector del traffico. Ha più che sufficienti funzionalità per la maggior parte dei web developer che cercano di accedere al loro localhost dal Web.

Conclusione

Se stai lavorando su un computer con una connessione Internet attiva, ora puoi configurare l’accesso al tuo localhost da qualsiasi parte in pochi minuti! È incredibilmente semplice iniziare e, come hai visto, non mancano di soluzioni!

Hai mai usato uno di questi servizi? Preferisci altri? Mi piacerebbe conoscere le tue opinioni su Twitter!

 

Domande frequenti su come accedere a localhost da qualsiasi luogo