Toegang tot localhost vanaf elke plaats

Je hebt uren besteed aan het werken op je lokale computer, om die nieuwe website-ontwerp er precies goed uit te laten zien. Je CMS is mooi ingesteld met voorbeeldcontent en je wilt het uitproberen op een paar mobiele apparaten en tablets. Je klant wil het ook bekijken – maar je hebt geen tijd om alles te migreren naar een publieke server om ze een snelle blik te gunnen.

Als je een webontwikkelaar bent, is het waarschijnlijk dat je in deze situatie al vaak bent terechtgekomen. En je hebt waarschijnlijk die tijden besteed aan het overbrengen van dingen naar een publiek toegankelijke server, terwijl je wenste dat er een gemakkelijkere manier was.

Voor al die vermoeide webontwikkelaars daar, ik ben hier om je te vertellen dat een gemakkelijkere manier is aangekomen! Sterker nog, er zijn een hele reeks applicaties en diensten beschikbaar om dit proces te vergemakkelijken door toegang te bieden tot je localhost vanaf het web. Deze die ik in dit artikel zal bespreken zijn:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

Belangrijkste Afleveringen

Hoe kan men localhost vanaf elke locatie benaderen?

Het is mogelijk via beveiligde tunnel diensten online! Dit zijn diensten die u een tunnel van het internet naar uw machine bieden.

Wat dat betekent is dat ze een publiek toegankelijke URL aanbieden, kijken naar oproepen op die URL en sturen die oproepen door naar uw localhost-server. Al het verwarrende instellen is voor u gedaan; u hoeft alleen maar een applicatie te installeren en deze te richten op uw localhost.

A Note About Using Virtual Hosts

Op mijn localhost heb ik virtuele hosts ingesteld. Zonder het adres van elke dienst hieronder opgegeven als een ServerAlias, zou mijn server niet goed meewerken. Een paar uur van verwarring volgden. Als u zich in dezelfde situatie bevindt, voeg dan een ServerAlias toe aan uw httpd.conf, en vervang het ngrok-adres dat u hieronder ziet door het adres van de dienst die u gebruikt:

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

ngrok

ngrok is een applicatie voor Windows, macOS en Linux die een tunnel creëert en ook toestaat om al het verkeer dat door de tunnel gaat te inspecteren en dat verkeer voor testen te herhalen.

Je kunt de basisfuncties gratis gebruiken en vervolgens registreren om toegang te krijgen tot meer geavanceerde functies. Om aangepaste subdomeinen en gereserveerde domeinen te gebruiken, moet je een betaald abonnement afsluiten. Anders kun je wel het dienstverlenend deel gebruiken, maar krijg je een willekeurig domein, zoals de 350c0f8e.ngrok.com URL in het virtuele hostvoorbeeld hierboven.

De abonnementen van Ngrok, zoals ze eruitzien in mei 2021, zijn als volgt:

Een belangrijk voordeel van ngrok is dat het geen afhankelijkheden heeft. Je installeert ngrok en draait het. Niets anders is vereist.

Hoe te gebruiken ngrok

Ga naar ngrok.com, download het archief en haal het uit naar waar je ngrok op je computer wilt hebben. Hieronder staan de basisstappen, maar als je meer details wilt, hebben we nog een ander artikel over “Hoe te gebruiken ngrok om een lokaal ontwikkelingssite te delen.”

Open een command-line terminal en ga naar de map waar je ngrok hebt uitgepakt. Voer de volgende opdracht uit om een tunnel naar je localhost op poort 80 te creëren:

./ngrok http 80

Je ziet een scherm zoals hieronder:

In het bovenstaande voorbeeld hebben we verkeer naar een willekeurig gegenereerd ngrok-adres van http://42e474ef9799.ngrok.com doorgestuurd naar onze localhost op 127.0.0.1:80.

Open die URL op elk apparaat met een internetverbinding en je zult je localhost vanaf het Web benaderen!

Een van de meer unieke aanbiedingen die ngrok biedt, is de mogelijkheid om verkeer uit het verleden te inspecteren. Om dat te doen, ga naar http://localhost:4040/ op je computer. Je zult een dashboard zien dat inkomende aanvragen weergeeft. Je kunt elke aanvraag aanklikken aan de linkerkant en details aan de rechterkant zien voor headers en ander gegevens. Mijn favoriete gebruik hiervan is het zien van JSON-gegevens die terugkomen van aanvragen. Het zeer eenvoudige ontwerp hiervan bij het laden van een simpel HTML-pagina ziet er zo uit:

Je kunt zelfs een aanvraag herhalen door op de Herhaal knop aan de rechterkant te klikken. Dat zal een aanvraag voor je opnieuw uitvoeren via de tunnel.

ngrok’s geavanceerde functies

Wachtwoordbeveiliging stelt je in staat om willekeurige leden van het publiek te voorkomen dat ze toegang hebben tot je site:

ngrok http -auth="username:password" 80

Aangepaste subdomeinen zijn voor wanneer je die willekeurig gegenereerde URL niet wilt onthouden! Als je je aanmeldt voor een betaalde ngrok-abonnement, kun je een subdomein reserveren zodat anderen het niet kunnen innemen. Het volgende stelt je in staat om je localhost te bekijken op nogophersinmytunnel.ngrok.com:

ngrok http -subdomain nogophersinmytunnel 80

Aangepaste domeinen zijn voor wanneer je “ngrok” liever niet in je URL voor de getunnelde project wilt hebben. Betaalde abonnementen stellen je in staat om je eigen domeinen te gebruiken, in plaats van ngrok.com te moeten gebruiken:

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

Je kunt zelfs tunnelen naar een IP-adres op je lokale netwerk dat anders niet toegankelijk zou zijn voor de buitenwereld:

ngrok http 192.168.0.27:80

Of je kunt een tunnel maken voor andere niet-HTTP-diensten:

ngrok tcp 22

Er zijn nog veel meer dingen die je kunt doen, van het tegelijkertijd uitvoeren van meerdere tunnels tot het maken van een configuratiebestand om al deze instellingen op te slaan voor toekomstig gebruik.

Om alle mogelijkheden te leren kennen, kijk dan eens naar de documentatie van ngrok.

PageKite

PageKite is een op Python gebaseerde “dynamische tunnelgebaseerde reverse proxy” die werkt op Windows, macOS, Linux en zelfs Android-apparaten! Het lijkt erg op ngrok, maar bestaat al langer en lijkt voor een veel groter aantal toepassingen stukken beter getest. Ze hebben het zelfs in werking gesteld met het Minecraft-protocol om mensen in staat te stellen een Minecraft-server op hun lokale machine te draaien.

Je kunt je aanmelden voor een gratis proefperiode van een maand en 2,5 GB aan overdrachtsqota. Daarna is er een “betaal wat je wilt”-systeem (een minimum van USD$4 per maand, of gratis als je werkt aan gratis open source software). Je moet echter meer betalen om meer te krijgen in dit geval, met degenen die grotere bedragen betalen die een grotere quota, een langere dienstverleningsperiode, aangepaste subdomeinen en zo verder krijgen.

PageKite lijkt geen verkeersinspector te hebben zoals ngrok, maar heeft wel opmerkelijke functies zoals een ingebouwde firewall die toegang blokkeert tot gemeenschappelijke aanvalsdoelen zoals /wp-admin, /xampp, phpMyAdmin pagina’s… enzovoort. Dit kan worden uitgeschakeld als je het prima vindt dat deze publiek zijn.

Ze hebben zelfs een front-end relais server in Sydney, Australië, dus dit zou snellere snelheden kunnen bieden voor Australische ontwikkelaars.

Hoe gebruik je PageKite

Ga naar PageKite.net en download de versie voor je besturingssysteem. Voor Windows-gebruikers moet je ervoor zorgen dat Python al geïnstalleerd is. Voor macOS en Linux kun je een eenvoudige cURL-opdracht gebruiken om het rechtstreeks vanuit je command line te installeren.

Nadat je het hebt gedownload, voer deze opdracht uit om een tunnel naar je localhost-server te starten. Je kiest een specifieke subdomeinnaam die je elke keer gebruikt (in plaats van de willekeurige toewijzing in ngrok). Ik heb hier hurrygetintothefancytunnel gekozen:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Op mijn Mac moest ik onlangs python3 aan het begin gebruiken, dus probeer dat als het bovenstaande niet werkt:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Het loopt door en registreert je bij de dienst als je nog niet bent aangemeld. Dan heb je localhost up and running voor de wereld!

Geavanceerde functies van PageKite

PageKite heeft enkele indrukwekkendere extra functies.

Een voorbeeld: er is geen web server nodig. Als je geen server draait, heeft het een ingebouwde web server die je statische bestanden zoals deze kan draaien:

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

Net als ngrok kun je toegang beperken via wachtwoord:

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

Of beperk de toegang via IP-adressen:

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

Zoals hierboven genoemd, kun je zelfs dit helemaal op je telefoon draaien. Ik heb een Android web server genaamd kWS geïnstalleerd en vervolgens PageKite gebruikt om deze naar het Web te exposeren:

Het is zeker niet iets dat ik elke dag zal doen, maar het is best gaaf om te zien dat dit nu mogelijk is alleen op een smartphone!

Net als ngrok kan PageKite meerdere tunnels tegelijk aanmaken, en het ondersteunt het gebruik van je eigen domein, en het is mogelijk om een configuratiebestand voor je tunnels op te stellen. Voor meer informatie, kijk dan eens naar hun Quick start guide en hun meer uitgebreide how-to page.

localtunnel

localtunnel is een tunnelingdienst die oorspronkelijk in Node gebouwd werd, maar ook over Go-gebaseerde en C#/.NET-clients beschikt.

Hoe te gebruiken localtunnel

Je kunt het wereldwijd installeren op je apparaat zoals de meeste npm-pakketten:

npm install -g localtunnel

Om een tunnel naar je localhost op poort 80 te starten, voer je deze opdracht uit:

lt --port 80

Het zal net als ngrok en PageKite werken! Het geeft je een subdomein, iets als het volgende dat ik kreeg: https://loud-ladybug-21.loca.lt.

Bij het eerste uitvoeren van localtunnel krijg je een vriendelijke herinnering dat deze actie je assets publiek toont op het Web. Druk gewoon op Klik om door te gaan.

Geavanceerde functies van localtunnel

Het verkrijgen van een gratis aangepast subdomein is hier volledig mogelijk, zolang het subdomein nog niet is ingenomen. Om een aangepast subdomein te gebruiken, voer het gewoon uit met de --subdomain parameter:

lt --port 80 --subdomain platypusestunneltoo

Een van de zeer handige functies die localtunnel biedt, is een Node API die het mogelijk maakt om localtunnels te genereren via JavaScript voor gebruik in je geautomatiseerde tests:

const localtunnel = require('localtunnel');

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

  // Uw tunnel-URL zal verschijnen als tunnel.url

  tunnel.on('close', () => {
    // Doe iets wanneer de tunnel wordt gesloten
  });
})();

boringproxy

boringproxy is een nieuwere optie die volledig gratis en open source is onder de MIT-licentie! Het belangrijkste doel lijkt te zijn het gemakkelijker te maken voor mensen om websites zelf te hosten op hun computers. Het wordt geleverd als een enkel uitvoerbaar bestand dat zowel als server als client functioneert. Er is een uitvoerbaar bestand voor een reeks Linux-systemen en Windows. macOS staat omschreven als “ongetest”. Ik heb er persoonlijk geen werkende versie voor mijn Mac kunnen vinden, maar als je toegang hebt tot een Linux-box of een Raspberry Pi, kan dit misschien wel de oplossing voor je zijn. Het is allemaal geschreven in Go en staat open voor bijdragers.

Een korte opsomming van zijn functies:

• 100% gratis en open source onder de MIT-licentie
• volledig zelfgehost
• heeft ingebouwde reverse proxy
• ondersteunt aangepaste domeinen/subdomeinen

Hoe te gebruiken boringproxy

De belangrijkste stappen zijn het gemakkelijkst te volgen op de boringproxy documentatie, aangezien het verschilt per platform.

Over het algemeen betreft het:

• het downloaden van de server-instantie via curl (bijvoorbeeld curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmoden van de geüploade uitvoerbare bestanden (bijvoorbeeld, chmod +x boringproxy-linux-x86_64)
• het instellen van bindings naar poorten 80 en 443 (bijvoorbeeld, sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• het installeren van de uitvoerbare bestanden op de client ook

Deze video van de maker van boringproxy behandelt het beste:

Geavanceerde functies van boringproxy

Auto HTTPS-certificaten worden automatisch voor u beheerd via Let’s Encrypt. Geen zorgen over het verkrijgen van certificaten voor testen, aangezien dit achter de schermen gebeurt.

Webinterface voor configuratie wordt automatisch ingesteld om u te laten beheren van gebruikers, toegangstokens en tunnels.

U kunt webtoepassingen gemakkelijk tunnelen. Self host web apps zoals Etherpad (zoals getoond in de video hierboven), geef ze hun eigen subdomein, en dan kunt u toegang krijgen vanaf elke locatie.

BrowserStack

BrowserStack biedt automatische screenshots en virtuele machines om uw website te testen tegen een reeks apparaten en browsers. Als de reden waarom u localhost wilt openen voor testen is, kan BrowserStack van belang zijn voor u.

U kunt de bovenstaande methoden gebruiken om localhost-sites te testen in de virtuele machines van BrowserStack, maar het biedt ook een browser-extensie voor Chrome en Firefox waarmee u toegang kunt bieden tot uw localhost vanaf hun servers.

Echter, deze functionaliteit is alleen voor de BrowserStack-diensten en is niet toegankelijk voor het grote publiek. BrowserStack biedt een gratis proefperiode, na welke het een maandelijkse vergoeding zal kosten om de dienst te gebruiken. Het zou handig zijn voor gevallen waar de enige reden dat u localhost wilt openen is voor apparaattesten.

Hoe te gebruiken BrowserStack

Meld u aan voor een proefperiode op BrowserStack.com. Ze hebben het proces van lokale testen eigenlijk vrij goed gedocumenteerd op hun website, dus lees dat als u geïnteresseerd bent in deze route te volgen.

Uiteindelijk zal het u toestaan om uw localhost-sites te testen in virtuele machines die via het Web worden uitgevoerd, zoals volgt:

Favorieten spelen

Na met al deze opties te hebben rondgespeeld, zouden mijn persoonlijke favorieten moeten zijn ngrok en PageKite.

PageKite lijkt op het eerste gezicht de meest veelzijdige oplossing met een enorme hoeveelheid potentieel. Het is in de loop der jaren ontwikkeld en uitgebreid om een reeks toepassingen te voldoen, waardoor het een echt indrukwekkend toepassing is!

ngrok is ook geweldig vanwege zijn eenvoud en de verkeerscontrole. Het heeft meer dan voldoende functies voor de meeste webontwikkelaars die hun localhost vanaf het Web willen openen.

Conclusie

Als u aan het werk bent op een computer met een actieve internetverbinding, kunt u nu toegang tot uw localhost instellen vanuit elke plek in slechts een paar minuten! Het is ongelooflijk eenvoudig om te beginnen en, zoals u hebt gezien, is er geen gebrek aan oplossingen!

Heb je al een van deze diensten gebruikt? Heb je andere favorieten? Ik zou graag willen weten wat je ervan op Twitter vindt!

 

Veelgestelde vragen over toegang tot localhost vanaf elke locatie