Een lokale server maken die toegankelijk is vanaf een openbaar adres

Ik ontwikkel websites voor het grootste deel van 10 jaar en een van mijn grootste problemen was altijd lokale ontwikkeling en het synchroniseren van lokale sites met live tests. Het gebruik van een lokale omgeving is geweldig omdat het snel is, maar het is niet zichtbaar vanaf een afstand en ergens overbrengen betekent databasebewerking, hernoemen van tabellen, waarden enzovoort.

In dit artikel laat ik je een eenvoudige manier zien voer een lokale server uit wat je kunt toegang vanaf uw telefoon en andere mobiele apparaten native, en ook uitgezonden via internet, wat betekent dat u uw werk deelt met klanten, zonder de vertrouwde lokale host te verlaten.

Vagrant gebruiken om een lokale omgeving te creëren

Enige tijd geleden schreef ik hier een artikel over Hongkiat over het gebruik van Vagrant, dus ik zal hier alleen over de basis gaan. Kijk voor meer informatie bij het artikel!

Om te beginnen, moet u VirtualBox en Vagrant pakken en installeren. Beide zijn gratis en worden gebruikt om een virtuele machine te maken waarop uw server wordt uitgevoerd.

Maak nu een map om uw websites in op te slaan. Laten we een map gebruiken met de naam “websites” in onze hoofdgebruikersdirectory. Dat zou zijn / Users / [gebruikersnaam] / Websites op OS X en C: / Users / [gebruikersnaam] / Websites op Windows.

Maak een nieuwe map met de naam wordpress. Dit is waar ik de virtuele machine ga maken. Het idee is dat elke map binnenin websites huisvest een afzonderlijke virtuele machine. Terwijl jij kan zet zoveel websites op één virtuele machine als je wilt, ik deel ze graag op platforms - bijvoorbeeld: WordPress, Laravel, Custom

Voor deze tutorial zal ik een WordPress-website maken.

Binnen in de WordPress map moeten we twee bestanden maken, Vagrantfile en install.sh. Deze zullen worden gebruikt om onze virtuele machines in te richten. Jeffrey Way heeft twee geweldige startersbestanden gemaakt; je kunt zijn Vagrantfile en install.sh bestanden pakken.

Gebruik vervolgens de terminal om naar de WordPress map en type zwerver op. Dit duurt even, omdat de box moet worden gedownload en geïnstalleerd. Pak een kopje koffie en bekijk dit bericht op 50 WordPress-tips terwijl je wacht.

Zodra het proces is voltooid, moet je kunnen gaan 192.168.33.21 en een goed weergegeven pagina te zien. De inhoudsmap moet de html-map in de WordPress-map zijn. U kunt nu beginnen met het toevoegen van bestanden, het installeren van WordPress of wat u maar wilt.

Vergeet niet om de volledige Vagrant-gids te lezen voor meer informatie over het maken van virtuele hosts, het toewijzen van domeinen zoals mytest.dev enzovoorts.

Lokale sites op hetzelfde netwerk openen met Gulp

Bij het bouwen van een site moet je denken aan reactievermogen. Kleine schermen kunnen tot op zekere hoogte worden geëmuleerd door het browservenster te verkleinen, maar het is gewoon niet dezelfde ervaring, vooral als je retinaschermen in de mix gooit.

In het ideale geval wilt u uw lokale website openen op uw mobiele apparaten. Dit is niet zo moeilijk om te doen, op voorwaarde dat uw apparaten op hetzelfde netwerk zijn aangesloten.

Om dit voor elkaar te krijgen gebruiken we Gulp en Browsersync. Gulp is een hulpmiddel voor het automatiseren van ontwikkeling, Browsersync is een geweldige tool die niet alleen een lokale server kan maken, maar ook scrollen, klikken, formulieren en meer syncroniseert op verschillende apparaten.

Gulp installeren

Gulp installeren is heel eenvoudig. Ga naar de Aan de slag-pagina voor de instructies. Een eerste vereiste is NPM (Node Package Manager). De gemakkelijkste manier om dit te krijgen is om Node zelf te installeren. Ga naar de Node-website voor instructies.

Zodra u de npm installeren - mondiale slok opdracht om gulp globaal te installeren, moet u het aan uw project toevoegen. De manier om dit te doen is rennen npm install --save-dev gulp in de hoofdmap van uw project en voeg vervolgens een toe gulpfile.js bestand daar.

Laten we op dit moment een enkele regel code in dat bestand toevoegen die aangeeft dat we Gulp zelf gaan gebruiken.

var gulp = vereisen ('gulp');

Als je geïnteresseerd bent in alle leuke dingen die Gulp kan doen, zoals het samenvoegen van scripts, het samenstellen van Sass en LESS, het optimaliseren van afbeeldingen enzovoort, lees dan onze Guide To Gulp. In dit artikel zullen we ons concentreren op het maken van een server.

Browsersync gebruiken

Browsersync heeft een Gulp-extensie die we in twee stappen kunnen installeren. Laten we eerst npm gebruiken om het te downloaden en dan voegen we het toe aan onze Gulpfile.

Geef de npm installeer browser-sync gulp --save-dev commando in de project root in de terminal; Hiermee wordt de extensie gedownload. Open vervolgens het Gulpfile en voeg de volgende regel toe:

var browserSync = require ('browsersynchronisatie'). create ();

Hierdoor weet Gulp dat we Browsersync gaan gebruiken. Vervolgens zullen we een taak definiëren die bepaalt hoe Browsersync zal werken.

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

Eenmaal toegevoegd, kunt u typen slurpen browsersynchronisatie naar de terminal om een server te starten. Je zou iets als de afbeelding hieronder moeten zien.

Er zijn vier afzonderlijke URL's, dit is wat ze betekenen:

lokaal: Met de lokale URL kunt u de server bereiken op de computer waarop u hem gebruikt. In onze gevallen kunt u gebruiken 192.168.33.21 of je kunt die gebruiken die door Borwsersync wordt aangeboden.
extern: Dit is de URL die u kunt gebruiken op elk apparaat dat is verbonden met het netwerk om de website te bereiken. Het werkt op uw lokale computer, uw telefoon, tablet enzovoort.
UI: Deze URL verwijst naar de opties voor de momenteel actieve server. U kunt verbindingen zien, netwerkbeperking instellen, geschiedenis bekijken of opties synchroniseren.
Externe gebruikersinterface: Dit is hetzelfde als de gebruikersinterface, maar toegankelijk vanaf elk apparaat op het netwerk.

Waarom Browsersync gebruiken?

Nu we klaar zijn met deze fase, denk je misschien: waarom zou je Browsersync helemaal gebruiken? De URL 192.168.33.21 is ook vanaf elk apparaat te bereiken. Hoewel dit zo is, moet u WordPress installeren op deze URL.

Ik gebruik meestal virtualhosts en heb domeinen zoals wordpress.local of myproject.dev. Deze worden lokaal opgelost, zodat u Wordpress.local niet op uw mobiele telefoon kunt bezoeken en hetzelfde resultaat kunt zien als op uw lokale computer.

Tot nu toe is het goed, we hebben nu een testsite die toegankelijk is vanaf elk apparaat op het netwerk. Nu is het tijd om wereldwijd te gaan werken en ons werk via internet uit te zenden.

Ngrok gebruiken om onze lokale host te delen

ngrok is een tool die u kunt gebruiken om veilige tunnels te maken voor uw lokale host. Als u zich aanmeldt (nog steeds gratis) krijgt u met een wachtwoord beveiligde tunnels, TCP en meerdere gelijktijdige tunnels.

Ngrok installeren

Ga naar de ngrok downloadpagina en pak de versie die je nodig hebt. U kunt het uitvoeren vanuit de map waarin het zich bevindt of het naar een locatie verplaatsen waarmee u het vanaf elke locatie kunt uitvoeren. Op Mac / Linux kunt u de volgende opdracht uitvoeren:

sudo mv ngrok / usr / local / bin / ngrok

Als u een foutmelding krijgt dat deze locatie niet bestaat, maakt u gewoon de ontbrekende mappen aan.

Ngrok gebruiken

Gelukkig is dit deel uiterst eenvoudig. Zodra u uw server via Gulp beheert, bekijkt u de poort die wordt gebruikt. In het bovenstaande voorbeeld wordt de lokale server uitgevoerd http: // localhost: 3000 wat betekent dat het poort 3000 gebruikt. Voer op een nieuw tabblad de volgende opdracht uit:

ngrok http 3000

Hiermee wordt een toegankelijke tunnel voor uw lokale host gemaakt, het resultaat zou ongeveer als volgt moeten zijn:

De URL die u naast ziet “expeditie” is wat u kunt gebruiken om overal toegang te krijgen tot uw website.

Conclusie

Aan het eind van de dag kunnen we nu drie dingen doen:

Bekijk en werk lokaal aan ons project
Bekijk onze website via elk apparaat op het netwerk
Laat anderen ons werk overal bekijken met een eenvoudige link

Hierdoor kunt u zich concentreren op ontwikkeling in plaats van racen om lokale servers en servers synchroon te houden, en databases en andere zorgwekkende taken te migreren.

Als je een andere methode hebt om lokaal te werken en het resultaat te delen, laat het ons dan weten!