Skapa en lokal server tillgänglig från en allmän adress

Jag har utvecklat webbplatser för mer än 10 år och en av mina största problem var alltid lokal utveckling och synkronisering av lokala webbplatser till levande tester. Att använda en lokal miljö är stor eftersom den är snabb, men den kan inte ses från fjärran och överför någonstans, databasoperation, byta namn på tabeller, värden och så vidare.

I den här artikeln visar jag dig ett enkelt sätt att kör en lokal server som du kan åtkomst från din telefon och andra mobila enheter nationellt, och även sänds via Internet, vilket innebär att du delar med dig av dina arbeten med kunder, utan att lämna god ol s localhost.

Använda Vagrant för att skapa en lokal miljö

För ett tag sedan skrev jag en artikel här på Hongkiat om att använda Vagrant så jag går bara över grunderna här. För mer information, ta en titt på artikeln!

För att komma igång måste du ta tag i och installera VirtualBox och Vagrant. Båda är gratis och används för att skapa en virtuell maskin som kommer att köra din server.

Skapa nu en mapp för att lagra dina webbplatser. Låt oss använda en katalog som heter “webbplatser” i vår huvudsakliga användarkatalog. Det skulle vara / Användare / [användarnamn] / hemsidor på OS X och C: / Användare / [användarnamn] / hemsidor på Windows.

Skapa en ny mapp som heter wordpress. Här skapar jag den virtuella maskinen. Tanken är att varje mapp inom webbplatser Hus en separat virtuell maskin. Medan du kan placera så många webbplatser på en virtuell maskin som du vill, jag gillar att gruppera dem ut via plattformar - t.ex.: WordPress, Laravel, Custom

I denna handledning ska jag skapa en WordPress-webbplats.

Inuti Wordpress mapp måste vi skapa två filer, Vagrantfile och install.sh. Dessa kommer att användas för att ställa in våra virtuella maskiner. Jeffrey Way har skapat två bra startfiler. du kan ta tag i hans Vagrantfile och install.sh-filer.

Därefter navigerar du till terminalen med hjälp av terminalen Wordpress katalog och typ vagrant upp. Det kommer ta en stund, eftersom rutan måste laddas ner och installeras. Ta en kopp kaffe och kolla in det här inlägget på 50 WordPress-tips medan du väntar.

När processen är klar ska du kunna gå till 192.168.33.21 och se en ordnad serverad sida. Din innehållsmapp ska vara html-mappen i WordPress-katalogen. Du kan nu börja lägga till filer, installera WordPress eller något annat du vill.

Glöm inte att läsa den fullständiga Vagrant-guiden för mer information om hur man skapar virtuella värdar, mapping-domäner som mytest.dev och så vidare.

Öppna lokala platser på samma nätverk med hjälp av Gulp

När du bygger en webbplats bör du tänka på lyhördhet. Små skärmar kan emuleras i viss utsträckning genom att begränsa webbläsarfönstret, men det är bara inte samma upplevelse, speciellt om man slänger näthinneskärmar i mixen.

Idealt sett vill du öppna din lokala webbplats på dina mobila enheter. Detta är inte för svårt att göra, förutsatt att dina enheter är i samma nätverk.

För att få det gjort använder vi Gulp and Browsersync. Gulp är ett verktyg för automatisering av utveckling, Browsersync är ett bra verktyg som inte bara kan skapa en lokal server utan synkronisera rullning, klick, formulär och mer över enheter.

Installera Gulp

Installera Gulp är väldigt enkelt. Gå vidare till sidan Komma igång för instruktionerna. En förutsättning är NPM (Node Package Manager). Det enklaste sättet att få det här är att installera Node själv. Gå vidare till nodwebbplatsen för instruktioner.

När du har använt npm installera - global gulp befaller att installera gulp globalt, måste du lägga till det i ditt projekt. Sättet att göra detta är att springa npm installera - save-dev gulp i rotmappen i ditt projekt, lägg sedan till en gulpfile.js filen där.

För tillfället lägger vi till en enda rad kod inuti den filen som indikerar att vi ska använda Gulp själv.

var gulp = kräver ("gulp");

Om du är intresserad av alla de coola sakerna kan Gulp göra som sammanlänkande skript, kompilera Sass och LESS, optimera bilder och så vidare, läs vår Guide To Gulp. I den här artikeln kommer vi att fokusera på att skapa en server.

Använda Browsersync

Browsersync har en Gulp-förlängning som vi kan installera i två steg. Låt oss först använda npm för att ladda ner det, då lägger vi till det i vår Gulpfile.

Utfärda npm installera browser-sync gulp - save-dev kommando i projektrot i terminalen; Detta hämtar förlängningen. Öppna sedan Gulpfile och lägg till följande rad:

var browserSync = kräver ('browser-sync'). skapa ();

Detta gör att Gulp vet att vi använder Browsersync. Därefter definierar vi en uppgift som styr hur Browsersync ska fungera.

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

När du väl har lagt till kan du skriva gulp-browser-synkronisering in i terminalen för att starta en server. Du borde se något som bilden nedan.

Det finns fyra separata webbadresser där, här är vad de menar:

Lokal: Den lokala webbadressen är där du kan nå servern på maskinen du kör den på. I våra fall kan du använda 192.168.33.21 eller du kan använda den som Borwsersync tillhandahåller.
Extern: Detta är den webbadress du kan använda på vilken enhet som är ansluten till nätverket för att nå webbplatsen. Det kommer att fungera på din lokala maskin, din telefon, surfplattan och så vidare.
UI: Den här URL-adressen pekar på alternativen för den nuvarande servern. Du kan se anslutningar, ställa in nätverksgasning, visa historik eller synkroniseringsalternativ.
Extern användargränssnitt: Detta är samma som användargränssnittet, men tillgängligt från vilken enhet som helst i nätverket.

Varför använd Browsersync?

Nu när vi är färdiga med den här fasen kanske du tänker: varför använder Browsersync alls? URL: n 192.168.33.21 kan också nås från vilken enhet som helst. Medan detta är så måste du installera WordPress till den här webbadressen.

Jag använder vanligtvis virtualhosts och har domäner som wordpress.local eller myproject.dev. Dessa löser lokalt så att du inte kan besöka wordpress.local på din mobiltelefon och se samma resultat som på din lokala dator.

Hittills så bra har vi nu en testplats som kan nås från vilken enhet som helst i nätverket. Nu är det dags att gå globalt och sända vårt arbete över internet.

Använda ngrok att dela med oss av vår lokala värd

ngrok är ett verktyg du kan använda för att skapa säkra tunnlar till ditt lokala värd. Om du registrerar dig (fortfarande fri) får du lösenordsskyddade tunnlar, TCP och flera samtidiga tunnlar.

Installera ngrok

Gå till ngrok-hämtningssidan och ta tag i den version du behöver. Du kan köra den från mappen den är i eller flytta den till en plats som låter dig springa från var som helst. På Mac / Linux kan du köra följande kommando:

sudo mv ngrok / usr / local / bin / ngrok

Om du får ett fel om att denna plats inte existerar, skapar du helt enkelt de saknade mapparna.

Använda ngrok

Tack och lov är den här delen extremt enkel. När du har kört din server via Gulp, ta en titt på den port som den använder. I exemplet ovan kör den lokala servern på http: // localhost: 3000 vilket innebär att det använder port 3000. I en ny terminal flik, kör följande kommando:

ngrok http 3000

Detta skapar en tillgänglig tunnel till ditt lokala värd, resultatet ska vara något så här:

Den webbadress du ser bredvid “Spedition” är vad du kan använda för att komma åt din webbplats var som helst.

Slutsats

I slutet av dagen kan vi nu göra tre saker:

Visa och arbeta på vårt projekt lokalt
Se vår hemsida via vilken enhet som helst i nätverket
Låt andra se vårt arbete var som helst med en enkel länk

Detta gör att du kan fokusera på utveckling istället för att köra för att hålla lokala och testservrar synkroniserade, migrera databaser och andra oroliga uppgifter.

Om du har en annan metod att arbeta lokalt och dela resultatet, låt oss veta!