Erstellen eines lokalen Servers, auf den über eine öffentliche Adresse zugegriffen werden kann

Ich habe seit mehr als 10 Jahren Websites entwickelt, und eines meiner größten Probleme war immer die lokale Entwicklung und das Synchronisieren von lokalen Websites mit Live-Tests. Die Verwendung einer lokalen Umgebung ist großartig, weil sie schnell ist, jedoch nicht von weitem sichtbar ist. Die Übertragung an einen Ort bedeutet Datenbankbetrieb, das Umbenennen von Tabellen, Werten usw..

In diesem Artikel zeige ich Ihnen einen einfachen Weg Führen Sie einen lokalen Server aus was du kannst Zugriff von Ihrem Telefon und anderen mobilen Geräten nativ und auch über das Internet verbreitet, was bedeutet, dass Sie Ihre Arbeit mit Kunden teilen, ohne den guten alten localhost zu verlassen.

Verwenden von Vagrant zum Erstellen einer lokalen Umgebung

Vor kurzem habe ich hier einen Artikel über Hongkiat über Vagrant geschrieben, so dass ich hier nur die Grundlagen bespreche. Weitere Informationen finden Sie in dem Artikel!

Zunächst müssen Sie VirtualBox und Vagrant installieren und installieren. Beide sind kostenlos und werden zum Erstellen einer virtuellen Maschine verwendet, auf der Ihr Server ausgeführt wird.

Erstellen Sie nun einen Ordner, in dem Ihre Websites gespeichert werden sollen. Verwenden Sie ein Verzeichnis mit dem Namen “Websites” in unserem Hauptbenutzerverzeichnis. Das wäre / Benutzer / [Benutzername] / Websites unter OS X und C: / Benutzer / [Benutzername] / Websites unter Windows.

Erstellen Sie einen neuen Ordner mit dem Namen WordPress. Hier werde ich die virtuelle Maschine erstellen. Die Idee ist, dass sich jeder Ordner darin befindet Websites beherbergt eine separate virtuelle Maschine. Während du können Legen Sie so viele Websites auf eine virtuelle Maschine, wie Sie möchten, gruppiere ich sie gerne nach Plattformen - zB: WordPress, Laravel, Custom

In diesem Tutorial werde ich eine WordPress-Website erstellen.

In der WordPress Ordner müssen wir zwei Dateien erstellen, Vagrantfile und install.sh. Diese werden zum Einrichten unserer virtuellen Maschinen verwendet. Jeffrey Way hat zwei großartige Starterdateien erstellt. Sie können sich seine Vagrantfile- und install.sh-Dateien holen.

Navigieren Sie dann mit Hilfe des Terminals zu WordPress Verzeichnis und Typ vagrant up. Dies dauert eine Weile, da die Box heruntergeladen und dann installiert werden muss. Nehmen Sie sich eine Tasse Kaffee und lesen Sie in diesem Beitrag 50 WordPress-Tipps, während Sie warten.

Sobald der Vorgang abgeschlossen ist, sollten Sie in der Lage sein 192.168.33.21 und sehen Sie eine ordnungsgemäß gelieferte Seite. Ihr Inhaltsordner sollte der HTML-Ordner im WordPress-Verzeichnis sein. Sie können jetzt mit dem Hinzufügen von Dateien beginnen, WordPress installieren oder alles andere, was Sie möchten.

Vergessen Sie nicht, das vollständige Vagrant-Handbuch zu lesen, um weitere Informationen zum Erstellen von virtuellen Hosts und zum Zuordnen von Domänen zu erhalten mytest.dev und so weiter.

Lokale Standorte im selben Netzwerk mit Gulp öffnen

Beim Erstellen einer Website sollten Sie über Reaktionsfähigkeit nachdenken. Kleine Bildschirme können durch das Eingrenzen des Browserfensters bis zu einem gewissen Grad emuliert werden. Dies ist jedoch nicht die gleiche Erfahrung, insbesondere wenn Sie Retina-Bildschirme in den Mix werfen.

Idealerweise möchten Sie Ihre lokale Website auf Ihren mobilen Geräten öffnen. Dies ist nicht zu schwierig, vorausgesetzt, Ihre Geräte befinden sich im selben Netzwerk.

Um dies zu erreichen, verwenden wir Gulp und Browsersync. Gulp ist ein Tool für die Automatisierung der Entwicklung. Browsersync ist ein großartiges Tool, mit dem Sie nicht nur einen lokalen Server erstellen, sondern auch Bildlauf, Klicks, Formulare und mehr über Geräte hinweg synchronisieren können.

Gulp installieren

Die Installation von Gulp ist sehr einfach. Die Anweisungen finden Sie auf der Seite "Erste Schritte". Eine Voraussetzung ist NPM (Node Package Manager). Der einfachste Weg, dies zu erhalten, besteht darin, den Knoten selbst zu installieren. Anweisungen erhalten Sie auf der Node-Website.

Sobald Sie die npm install --global gulp Wenn Sie gulp global installieren möchten, müssen Sie es Ihrem Projekt hinzufügen. Der Weg dazu ist zu laufen npm install --save-dev gulp Fügen Sie im Stammordner Ihres Projekts ein gulpfile.js Datei dort.

Im Moment fügen wir eine einzige Codezeile in diese Datei ein, die darauf hinweist, dass wir Gulp selbst verwenden werden.

var gulp = required ('gulp');

Wenn Sie an all den coolen Dingen interessiert sind, die Gulp tun kann, z. B. Skripts verketten, Sass und LESS kompilieren, Bilder optimieren usw., lesen Sie unseren Guide to Gulp. In diesem Artikel konzentrieren wir uns auf das Erstellen eines Servers.

Browsersync verwenden

Browsersync hat eine Gulp-Erweiterung, die wir in zwei Schritten installieren können. Zuerst laden wir sie mit npm herunter und fügen sie dann unserer Gulpfile hinzu.

Ausgabe der npm install browser-sync gulp --save-dev Befehl im Projektstamm im Terminal; Dadurch wird die Erweiterung heruntergeladen. Öffnen Sie dann das Gulpfile und fügen Sie die folgende Zeile hinzu:

var browserSync = required ('browser-sync'). create ();

Dies lässt Gulp wissen, dass wir Browsersync verwenden werden. Als Nächstes definieren wir eine Aufgabe, die steuert, wie Browsersync arbeiten wird.

gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21"););

Nach dem Hinzufügen können Sie tippen Schluck Browser-Sync in das Terminal, um einen Server zu starten. Sie sollten etwas wie das Bild unten sehen.

Es gibt vier separate URLs. Dies bedeutet Folgendes:

Lokal: Über die lokale URL können Sie den Server auf dem Computer erreichen, auf dem Sie ihn ausführen. In unseren Fällen können Sie verwenden 192.168.33.21 oder Sie können den von Borwsersync zur Verfügung gestellten verwenden.
Externe: Diese URL können Sie auf jedem mit dem Netzwerk verbundenen Gerät verwenden, um die Website zu erreichen. Es funktioniert auf Ihrem lokalen Computer, Ihrem Telefon, Tablet und so weiter.
UI: Diese URL verweist auf die Optionen für den aktuell laufenden Server. Sie können Verbindungen anzeigen, Netzwerkeinschränkungen einrichten, den Verlauf anzeigen oder Synchronisierungsoptionen anzeigen.
Externe Benutzeroberfläche: Dies ist dasselbe wie die Benutzeroberfläche, kann jedoch von jedem Gerät im Netzwerk aus aufgerufen werden.

Warum Browsersync verwenden??

Nun, da wir mit dieser Phase fertig sind, denken Sie vielleicht: Warum BrowserSync überhaupt verwenden? Die URL 192.168.33.21 ist auch von jedem Gerät aus erreichbar. In diesem Fall müssen Sie WordPress unter dieser URL installieren.

Ich verwende normalerweise virtualhosts und habe Domänen wie wordpress.local oder myproject.dev. Diese werden lokal aufgelöst, sodass Sie wordpress.local nicht auf Ihrem Mobiltelefon aufrufen können und dasselbe Ergebnis wie auf Ihrem lokalen Computer sehen.

So weit so gut, wir haben jetzt eine Test-Site, auf die von jedem Gerät im Netzwerk aus zugegriffen werden kann. Jetzt ist es an der Zeit, global zu arbeiten und unsere Arbeit über das Internet zu senden.

Verwenden von ngrok, um unseren Localhost zu teilen

ngrok ist ein Tool, mit dem Sie sichere Tunnel für Ihren localhost erstellen können. Wenn Sie sich (immer noch kostenlos) anmelden, erhalten Sie passwortgeschützte Tunnel, TCP und mehrere gleichzeitige Tunnel.

Ngrok wird installiert

Gehen Sie zur ngrok-Download-Seite und holen Sie sich die Version, die Sie benötigen. Sie können es von dem Ordner aus ausführen, in dem es sich befindet, oder es an einen Ort verschieben, an dem Sie es von überall ausführen können. Unter Mac / Linux können Sie den folgenden Befehl ausführen:

Sudo mv ngrok / usr / local / bin / ngrok

Wenn Sie eine Fehlermeldung erhalten, dass dieser Speicherort nicht vorhanden ist, erstellen Sie einfach die fehlenden Ordner.

Ngrok verwenden

Zum Glück ist dieser Teil extrem einfach. Wenn Sie Ihren Server über Gulp betreiben, werfen Sie einen Blick auf den verwendeten Port. Im obigen Beispiel läuft der lokale Server um http: // localhost: 3000 Dies bedeutet, dass der Port 3000 verwendet wird. Führen Sie in einer neuen Terminalregisterkarte den folgenden Befehl aus:

ngrok http 3000

Dadurch wird ein zugänglicher Tunnel für Ihren localhost erstellt. Das Ergebnis sollte in etwa folgendermaßen aussehen:

Die URL, die Sie neben sehen “Weiterleitung” können Sie von überall aus auf Ihre Website zugreifen.

Fazit

Am Ende des Tages können wir jetzt drei Dinge tun:

Sehen Sie sich unser Projekt vor Ort an und arbeiten Sie daran
Besuchen Sie unsere Website über ein beliebiges Gerät im Netzwerk
Lassen Sie andere unsere Arbeit überall mit einem einfachen Link betrachten

Auf diese Weise können Sie sich auf die Entwicklung konzentrieren, anstatt lokale und Testserver zu synchronisieren, Datenbanken zu migrieren und andere problematische Aufgaben zu erledigen.

Wenn Sie eine andere Methode haben, um lokal zu arbeiten und das Ergebnis zu teilen, lassen Sie es uns wissen!