Auf localhost von überall aus zugreifen

Du hast stundenlang lokal an deinem Computer gearbeitet, um dieses neue Webdesign genau so aussehen zu lassen. Deine CMS ist gut mit Beispielinhalten eingerichtet und du möchtest sie auf einigen Mobilgeräten und Tablets testen. Dein Kunde möchte sich das auch anschauen – aber du hast keine Zeit, alles auf einen öffentlichen Server zu migrieren, um ihnen einen kurzen Einblick zu gewähren.

Wenn du Webentwickler bist, ist es wahrscheinlich, dass du schon oft in solchen Situationen warst. Und wahrscheinlich hast du in diesen Zeiten ein bisschen um Mitternacht Öl verbrannt, indem du Dinge auf einen Server migrierst, der für die Öffentlichkeit zugänglich ist, und dich gewünscht hast, es gäbe einen einfacheren Weg.

Für alle müden Webentwickler da draußen möchte ich euch sagen, dass ein einfacherer Weg angekommen ist! Tatsächlich gibt es eine Vielzahl von Anwendungen und Diensten, die diesen Prozess erleichtern, indem sie den Zugriff auf dein localhost über das Web ermöglichen. Die, über die ich in diesem Artikel sprechen werde, sind:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

Schlüsselerkenntnisse

Wie ist es möglich, localhost von überall aus zu erreichen?

Es ist durch sichere Tunnel im Internet möglich! Diese Dienste bieten Ihnen einen Tunnel von Internet auf Ihren Rechner.

Das bedeutet, sie stellen eine öffentlich zugängliche URL bereit, beobachten Anrufe auf dieser URL und leiten diese Anrufe an Ihren localhost-Server weiter. Alle komplizierten Einrichtungsschritte wurden für Sie erledigt; alles, was Sie tun müssen, ist eine Anwendung zu installieren und sie auf Ihren localhost zu richten.

A Note About Using Virtual Hosts

Auf meinem localhost habe ich virtuelle Hosts eingerichtet. Ohne die Adresse von jeder unten aufgeführten Service als ServerAlias aufgelistet zu haben, würde mein Server nicht kooperieren. Es folgten einige Stunden der Verwirrung. Wenn Sie in der gleichen Situation sind, fügen Sie ein ServerAlias zu Ihrem httpd.conf hinzu, und ersetzen Sie die ngrok-Adresse, die Sie unten sehen, durch die Adresse des von Ihnen verwendeten Dienstes:

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

ngrok

ngrok ist eine Anwendung für Windows, macOS und Linux, die einen Tunnel erstellt und Ihnen auch ermöglicht, den gesamten Verkehr, der durch den Tunnel fließt, zu inspizieren und diesen Verkehr für Tests wiederzugeben.

Sie können die Grundfunktionen kostenlos nutzen und sich dann anmelden, um auf fortgeschrittene Funktionen zuzugreifen. Um benutzerdefinierte Subdomains und reservierte Domains zu verwenden, müssen Sie ein kostenpflichtiges Abonnement abschließen. Andernfalls können Sie den Dienst nutzen, aber eine zufällige Domain wie die 350c0f8e.ngrok.com URL im obigen virtuellen Host-Beispiel erhalten.

Die Abonnements von Ngrok sehen zum Stand Mai 2021 wie folgt aus:

Ein Hauptvorteil von ngrok ist, dass es keine Abhängigkeiten hat. Sie installieren ngrok und starten es. Es wird nichts anderes benötigt.

So verwenden Sie ngrok

Gehen Sie zu ngrok.com, laden Sie das Archiv herunter und extrahieren Sie es an dem Ort auf Ihrem Computer, an dem Sie ngrok haben möchten. Folgende grundlegende Schritte sind erforderlich, aber für weitere Details haben wir auch einen anderen Artikel mit dem Titel “Wie man ngrok verwendet, um eine lokal entwickelte Website zu teilen.”

Öffnen Sie eine Kommandozeile und navigieren Sie zum Ordner, in den Sie ngrok extrahiert haben. Führen Sie den folgenden Befehl aus, um einen Tunnel zu Ihrem localhost auf Port 80 zu erstellen:

./ngrok http 80

Sie werden eine Anzeige wie folgt erhalten:

Im obigen Beispiel haben wir Verkehr zu einer zufällig generierten ngrok-Adresse von http://42e474ef9799.ngrok.com, die an unser localhost auf 127.0.0.1:80 weitergeleitet wird.

Öffnen Sie diese URL auf jedem Gerät mit einer Internetverbindung, und Sie greifen über das Web auf Ihr localhost zu!

Eine der einzigartigeren Angebote von ngrok ist die Möglichkeit, vergangenen Datenverkehr zu inspizieren. Gehen Sie dazu auf http://localhost:4040/ auf Ihrem Computer. Sie erhalten eine Übersicht, die eingehende Anfragen zeigt. Sie können jede Anfrage auf der linken Seite anklicken und Details auf der rechten Seite zu den Kopfzeilen und anderen Daten sehen. Meine Lieblingsanwendung dieser Funktion ist das Betrachten von JSON-Daten, die von Anfragen zurückgegeben werden. Das sehr einfache Layout davon, wenn eine einfache HTML-Seite geladen wird, sieht so aus:

Sie können sogar eine Anfrage wiederholen, indem Sie auf die Schaltfläche Wiederholen auf der rechten Seite klicken. Das führt eine Anfrage für Sie über den Tunnel erneut aus.

ngroks erweiterte Funktionen

Passwortschutz ermöglicht es Ihnen, zufällige Mitglieder der Öffentlichkeit daran zu hindern, auf Ihre Seite zuzugreifen:

ngrok http -auth="username:password" 80

Benutzerdefinierte Subdomains sind für den Fall, dass Sie sich nicht an diese zufällig generierte URL erinnern möchten! Wenn Sie sich für ein bezahltes ngrok-Abonnement anmelden, können Sie eine Subdomain reservieren, damit andere sie nicht übernehmen können. Folgendes ermöglicht es Ihnen, Ihr localhost unter nogophersinmytunnel.ngrok.com zu betrachten:

ngrok http -subdomain nogophersinmytunnel 80

Benutzerdefinierte Domains sind für den Fall, dass Sie es vorziehen, nicht „ngrok“ in Ihrer URL für das getunnelte Projekt zu haben. Bezahlte Pläne ermöglichen es Ihnen, Ihre eigenen Domains zu verwenden, anstatt ngrok.com zu verwenden:

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

Sie können sogar zu einer IP-Adresse auf Ihrer lokalen Netzwerkinfrastruktur tunnelen, die ansonsten für die Außenwelt nicht zugänglich wäre:

ngrok http 192.168.0.27:80

Oder Sie können einen Tunnel für andere nicht-HTTP-Dienste erstellen:

ngrok tcp 22

Es gibt eine Reihe anderer Dinge, die Sie tun können, von der gleichzeitigen Ausführung mehrerer Tunnel bis hin zur Erstellung einer Konfigurationsdatei, um all diese Einstellungen für die Zukunft zu speichern.

Um sich über alle möglichen Funktionen zu informieren, siehe die Dokumentation von ngrok.

PageKite

PageKite ist eine Python-basierte „dynamische Tunnel-basierte Reverse-Proxy“, die auf Windows, macOS, Linux und sogar Android-Geräten funktioniert! Es ist sehr ähnlich wie ngrok, aber es gibt es schon eine ganze Weile länger und scheint für eine größere Palette von Anwendungen erheblich stärker erprobt zu sein. Sie haben es sogar mit dem Minecraft-Protokoll funktionieren lassen, um es Menschen zu ermöglichen, einen Minecraft-Server auf ihrem lokalen Computer zu betreiben.

Sie können sich für eine kostenlose Testversion für einen Monat und 2,5 GB Übertragungskontingent anmelden. Danach gibt es ein „bezahle was du willst“-System (ein Mindestbetrag von USD$4 pro Monat oder kostenlos, wenn Sie an freier Open-Source-Software arbeiten). Sie müssen jedoch mehr bezahlen, um mehr zu erhalten, wobei diejenigen, die größere Beträge zahlen, ein größeres Kontingent, eine längere Laufzeit, benutzerdefinierte Subdomains und so weiter erhalten.

PageKite scheint keinen Datenverkehrsinspektor wie ngrok zu haben, aber es verfügt über bemerkenswerte Funktionen wie einen integrierten Firewall, der den Zugriff auf häufige Angriffsziele wie /wp-admin, /xampp, phpMyAdmin-Seiten usw. blockiert. Dies kann deaktiviert werden, wenn Sie mit der Öffentlichkeit dieser Inhalte einverstanden sind.

Sie haben sogar einen Front-End-Relay-Server in Sydney, Australien, so dass dies möglicherweise schnellere Geschwindigkeiten für australische Entwickler bietet.

So verwenden Sie PageKite

Besuche PageKite.net und lade die Version für dein Betriebssystem herunter. Windows-Benutzer müssen sicherstellen, dass Python installiert ist. Für macOS und Linux können Sie einen einfachen cURL-Befehl verwenden, um es direkt über die Kommandozeile zu installieren.

Nach dem Herunterladen führen Sie diesen Befehl aus, um einen Tunnel zu Ihrem lokalen Server zu starten. Sie wählen ein spezifisches Subdomain, das Sie jedes Mal verwenden (anstelle der zufälligen Zuweisung in ngrok). Hier habe ich hurrygetintothefancytunnel gewählt:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Kürzlich auf meinem Mac musste ich mit python3 beginnen, also probieren Sie das aus, wenn der obige Befehl nicht funktioniert:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Es wird durchlaufen und Sie bei der Dienstleistung registrieren, wenn Sie noch nicht angemeldet sind. Dann haben Sie localhost für die Welt eingerichtet!

Erweiterte Funktionen von PageKite

PageKite verfügt über einige beeindruckendere zusätzliche Funktionen.

Ein Beispiel: Es ist kein Webserver erforderlich. Wenn Sie keinen Server ausführen, verfügt es über einen integrierten Webserver, der Ihre statischen Dateien so ausführen kann:

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

Wie bei ngrok können Sie den Zugriff über ein Passwort einschränken:

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

Oder den Zugriff über IP-Adressen einschränken:

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

Wie oben erwähnt, können Sie sogar all dies auf Ihrem Telefon ausführen. Ich habe einen Android-Webserver namens kWS installiert und dann PageKite verwendet, um ihn im Web zu exponieren:

Es ist sicherlich nicht etwas, was ich jeden Tag tun werde, aber es ist ziemlich cool zu sehen, dass dies nun ausschließlich auf einem Smartphone möglich ist!

Genau wie ngrok kann PageKite mehrere Tunnel gleichzeitig erstellen und es unterstützt die Verwendung eigener Domains sowie die Einrichtung einer Konfigurationsdatei für die Tunnel. Weitere Informationen dazu finden Sie in ihrer Schnellstartanleitung und ihrer umfassenderen Anleitungsseite.

localtunnel

localtunnel ist ein Tunneldienst, der ursprünglich in Node gebaut wurde, aber auch Go-basierte und C#/.NET-Clients hat.

Wie man localtunnel verwendet

Sie können es wie die meisten npm-Pakete global auf Ihrem Gerät installieren:

npm install -g localtunnel

Um einen Tunnel zu Ihrem localhost auf Port 80 zu starten, führen Sie diesen Befehl aus:

lt --port 80

Es läuft genau wie ngrok und PageKite! Sie erhalten ein Subdomain, ähnlich dem, was ich bekommen habe: https://loud-ladybug-21.loca.lt.

Beim ersten Starten von localtunnel erhalten Sie eine freundliche Erinnerung, dass diese Aktion Ihre Assets für das Web öffentlich macht. Drücken Sie einfach Klick hier, um fortzufahren.

Erweiterte Funktionen von localtunnel

Die Erstellung einer kostenlosen benutzerdefinierten Subdomain ist hier durchaus möglich, solange die Subdomain noch nicht vergeben ist. Um eine benutzerdefinierte Subdomain zu verwenden, führen Sie es einfach mit dem --subdomain Parameter aus:

lt --port 80 --subdomain platypusestunneltoo

Eine der sehr praktischen Funktionen, die localtunnel bietet, ist eine Node-API, die es Ihnen ermöglicht, localtunnels über JavaScript zu generieren, um sie in Ihren automatisierte Tests zu verwenden:

const localtunnel = require('localtunnel');

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

  // Ihre Tunnel-URL wird als tunnel.url angezeigt

  tunnel.on('close', () => {
    // Etwas tun, wenn der Tunnel geschlossen wird
  });
})();

boringproxy

boringproxy ist eine neuere Option, die völlig kostenlos und quelloffen unter der MIT-Lizenz ist! Ihr Hauptaugenmerk liegt darauf, es Menschen zu erleichtern, Websites auf ihren Computern selbst zu hosten. Es steht als einzelnes ausführbares Datei, die als Server und Client in einem fungiert. Es gibt ein ausführbares für eine Reihe von Linux-Systemen und Windows. macOS ist als „ungetestet“ aufgeführt. Ich konnte es persönlich nicht auf meinem Mac funktionieren lassen, aber wenn Sie Zugriff auf eine Linux-Box oder einen Raspberry Pi haben, könnte dies die Lösung für Sie sein. Es ist alles in Go geschrieben und steht zur Beitragsbereitstellung offen.

Kurzübersicht seiner Funktionen:

• 100% kostenlos und quelloffen unter der MIT-Lizenz
• kann vollständig selbst gehostet werden
• verfügt über einen integrierten Reverse-Proxy
• unterstützt benutzerdefinierte Domains/Subdomains

Wie man boringproxy verwendet

Die HauptSchritte sind am einfachsten auf der boringproxy Dokumentation nachzuvollziehen, da es für verschiedene Plattformen unterschiedlich ist.

Im Großen und Ganzen beinhaltet es:

• Herunterladen der Serverinstanz über curl (zum Beispiel curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmoding die heruntergeladene ausführbare Datei (zum Beispiel chmod +x boringproxy-linux-x86_64)
• Einrichten der Bindung an die Ports 80 und 443 (zum Beispiel sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• Einrichten der ausführbaren Datei auch auf dem Client

Dieses Video vom Schöpfer von boringproxy behandelt am besten die Vorgehensweise:

Erweiterte Funktionen von boringproxy

Automatisches HTTPS-Zertifikat wird automatisch über Let’s Encrypt verwaltet. Sollten Sie sich keine Sorgen machen müssen, Zertifikate für Tests zu erhalten, da dies im Hintergrund passiert.

Web-Oberfläche zur Konfiguration wird automatisch eingerichtet, um es Ihnen zu ermöglichen, Benutzer, Zugriffstoken und Tunnel zu verwalten.

Sie können Webanwendungen mit Leichtigkeit tunneln. Hosten Sie Web-Apps wie Etherpad (wie im Video oben gezeigt), geben Sie ihnen ein eigenes Subdomain und dann können Sie sie von überall aus aufrufen.

BrowserStack

BrowserStack bietet automatische Screenshots und virtuelle Maschinen zum Testen Ihrer Website gegen eine Reihe von Geräten und Browsern. Wenn der Grund, warum Sie auf localhost zugreifen möchten, zum Testen ist, könnte BrowserStack für Sie von Interesse sein.

Sie können die oben genannten Methoden verwenden, um localhost-Sites in den virtuellen Maschinen von BrowserStack zu testen, aber es gibt auch eine Browser-Erweiterung für Chrome und Firefox, die Ihnen ermöglicht, Ihre localhost-Zugriff von ihren Servern bereitzustellen.

Allerdings ist diese Funktionalität nur für die BrowserStack-Dienste und nicht für die breite Öffentlichkeit zugänglich. BrowserStack bietet eine kostenlose Testversion, nach der eine monatliche Gebühr fällig wird, um den Service zu nutzen. Es wäre praktisch für Fälle, bei denen der einzige Grund, localhost zu erreichen, die Gerätetests sind.

Wie man BrowserStack verwendet

Melden Sie sich für eine Testversion unter BrowserStack.com an. Sie haben den Prozess des lokalen Testens tatsächlich ziemlich gut auf ihrer Website dokumentiert, also schauen Sie sich das an, wenn Sie daran interessiert sind, diesen Weg zu gehen.

Letztendlich ermöglicht es Ihnen jedoch, Ihre localhost-Sites in virtuellen Maschinen zu testen, die über das Internet laufen, wie folgt:

Lieblinge

Nachdem ich mit all diesen Optionen herumgespielt habe, müssten meine persönlichen Favoriten ngrok und PageKite sein.

PageKite scheint die vielseitigste Lösung mit einem enormen Potenzial zu sein. Es wurde im Laufe der Jahre entwickelt und erweitert, um eine Vielzahl von Anwendungen zu erfüllen, was es zu einer wirklich beeindruckenden Anwendung macht!

ngrok ist auch großartig wegen seiner Einfachheit und dem Verkehrsinspektor. Es bietet mehr als genug Funktionen für die meisten Webentwickler, die ihre localhost von der Webseite aus erreichen möchten.

Zusammenfassung

Wenn Sie an einem Computer mit einer aktiven Internetverbindung arbeiten, können Sie nun innerhalb weniger Minuten Zugriff auf Ihre localhost von überall her einrichten! Es ist unglaublich einfach, loszulegen und, wie Sie gesehen haben, gibt es keinen Mangel an Lösungen!

Hast du jemals einen dieser Dienste genutzt? Gibt es andere, die du bevorzugst? Ich würde gerne deine Gedanken auf Twitter erfahren!

 

FAQs zum Zugriff auf localhost von überall