Crearea unui server local accesibil dintr-o adresă publică

Am dezvoltat site-uri Web pentru cea mai mare parte de 10 ani și una dintre cele mai mari probleme a fost întotdeauna dezvoltarea locală și sincronizarea site-urilor locale pentru a trăi teste. Folosirea unui mediu local este excelentă deoarece este rapidă, dar nu este vizibilă din afară și transferând undeva înseamnă funcționarea bazei de date, redenumirea tabelelor, valori și așa mai departe.

În acest articol, vă voi arăta o cale ușoară rulați un server local pe care le puteți accesul de pe telefon și de la alte dispozitive mobile nativ, și, de asemenea, difuzate pe Internet, ceea ce înseamnă împărtășirea dvs. de lucru cu clienții, fără a lăsa bine ol 'localhost.

Folosirea vagabonților pentru a crea un mediu local

Cu puțin timp în urmă, am scris un articol aici pe Hongkiat despre folosirea Vagrantului, așa că voi trece doar la elementele de bază aici. Pentru mai multe informații, aruncați o privire la articol!

Pentru a începe, va trebui să apucați și să instalați VirtualBox și Vagrant. Ambele sunt gratuite și sunt folosite pentru a crea o mașină virtuală care va rula serverul dvs..

Acum, creați un dosar pentru stocarea site-urilor web. Să folosim un director numit “Site-uri” în directorul nostru principal de utilizatori. Asta ar fi / Users / [nume de utilizator] / Site-uri pe OS X și C: / Users / [nume de utilizator] / Site-uri pe Windows.

Creați un nou dosar numit wordpress. Aici voi crea mașina virtuală. Ideea este că fiecare dosar din interior Site-uri găzduiește o mașină virtuală separată. In timp ce tu poate sa puneți cât mai multe site-uri pe o mașină virtuală așa cum doriți, îmi place să le grupați pe platforme - de exemplu: WordPress, Laravel, Custom

În scopul acestui tutorial voi crea un site web WordPress.

În interiorul WordPress trebuie să creați două fișiere, Vagrantfile și install.sh. Acestea vor fi folosite pentru a configura mașinile noastre virtuale. Jeffrey Way a creat două fișiere excelente; puteți să-i luați fișierele Vagrantfile și install.sh.

Apoi, utilizând terminalul, navigați la WordPress director și tip vagrant sus. Acest lucru va dura ceva timp, deoarece caseta trebuie să fie descărcată și apoi instalată. Luați o ceașcă de cafea și verificați acest post pe 50 de sfaturi WordPress în timp ce așteptați.

Odată ce procesul este complet, ar trebui să puteți merge 192.168.33.21 și vedeți o pagină bine servită. Dosarul de conținut trebuie să fie folderul html din directorul WordPress. Acum puteți începe să adăugați fișiere, să instalați WordPress sau orice altceva doriți.

Nu uitați să citiți ghidul complet Vagrant pentru mai multe informații despre crearea de gazde virtuale, maparea unor domenii ca mytest.dev si asa mai departe.

Deschiderea site-urilor locale pe aceeași rețea folosind Gulp

În timp ce construiți un site, ar trebui să vă gândiți la reactivitate. Ecranele mici pot fi emulate într-o oarecare măsură prin îngustarea ferestrei browserului, dar nu este aceeași experiență, mai ales dacă aruncați ecranele retinei în mix.

În mod ideal, veți dori să deschideți site-ul dvs. local pe dispozitivele mobile. Acest lucru nu este prea greu de făcut, cu condiția ca dispozitivele dvs. să fie în aceeași rețea.

Pentru a face acest lucru vom folosi Gulp și Browsersync. Gulp este un instrument pentru automatizarea dezvoltării, Browsersync este un instrument excelent care nu numai că poate crea un server local, dar poate sincroniza derularea, clicurile, formularele și mai multe dispozitive.

Instalarea Gulp

Instalarea Gulp este foarte ușoară. Deplasați-vă la pagina Noțiuni de bază pentru instrucțiuni. O condiție prealabilă este NPM (Node Package Manager). Cea mai ușoară modalitate de a obține acest lucru este de a instala Nodul însuși. Deplasați-vă pe site-ul Nod pentru instrucțiuni.

Odată ce ați folosit npm install - gulp global comanda pentru a instala gulp global, trebuie să o adăugați la proiectul dvs. Modul de a face acest lucru este de a alerga npm instalează -save-dev gulp în directorul rădăcină al proiectului, apoi adăugați a gulpfile.js fișier acolo.

În acest moment, să adăugăm o singură linie de cod în interiorul acelui fișier, ceea ce indică faptul că vom folosi însuși Gulp.

var gulp = necesită ("gulp");

Dacă sunteți interesat de toate lucrurile minunate pe care le poate face Gulp, cum ar fi scrierea de scripturi, compilarea Sass și LESS, optimizarea imaginilor și așa mai departe, citiți Ghidul nostru către Gulp. În acest articol ne vom concentra pe crearea unui server.

Utilizând Browsersync

Browsersync are o extensie Gulp pe care o putem instala în două etape. Mai întâi, hai să folosim npm pentru ao descărca, apoi o adăugăm în Gulpfile noastre.

Eliberați npm instalare browser-sincronizare gulp --save-dev comandă în rădăcina proiectului în terminal; aceasta va descărca extensia. Apoi, deschideți Gulpfile și adăugați următoarea linie:

var browserSync = necesită ("browser-sync") create ();

Acest lucru îi permite lui Gulp să știe că vom folosi Browsersync. Apoi vom defini o sarcină care controlează modul în care va funcționa Browsersync.

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

După ce ați adăugat, puteți să tastați gulp browser-sync în terminal pentru a porni un server. Ar trebui să vedeți ceva asemănător imaginii de mai jos.

Există patru adrese URL separate, iată ce înseamnă acestea:

Local: Adresa URL locală este locul în care puteți ajunge la serverul de pe mașina pe care o rulați. În cazurile noastre puteți folosi 192.168.33.21 sau puteți folosi cel oferit de Borwsersync.
Extern: Aceasta este adresa URL pe care o puteți utiliza pe orice dispozitiv conectat la rețea pentru a ajunge pe site. Acesta va funcționa pe mașina dvs. locală, pe telefon, pe tabletă și așa mai departe.
UI: Această adresă URL indică opțiunile pentru serverul în desfășurare. Puteți vedea conexiuni, setați diminuarea rețelei, consultați istoricul sau opțiunile de sincronizare.
IO externă: Este același lucru cu interfața utilizator, dar este accesibil de la orice dispozitiv din rețea.

De ce folosiți Browsersync?

Acum, că am terminat cu această fază, s-ar putea să vă gândiți: de ce utilizați Browsersync deloc? Adresa URL 192.168.33.21 poate fi de asemenea accesată de pe orice dispozitiv. În timp ce acest lucru este valabil, va trebui să instalați WordPress la această adresă URL.

De obicei, folosesc virtuhosts și am domenii precum wordpress.local sau myproject.dev. Acestea se rezolvă local, astfel încât să nu puteți vizita wordpress.local pe telefonul dvs. mobil și să vedeți același rezultat ca pe computerul local.

Până acum, avem un site de test care poate fi accesat de pe orice dispozitiv din rețea. Acum este momentul să mergem la nivel mondial și să ne transmitem munca prin internet.

Utilizarea ngrok Pentru a partaja localhost noastre

ngrok este un instrument pe care îl puteți utiliza pentru a crea tunele securizate la localhost. Dacă vă înscrieți (încă liber), obțineți tuneluri protejate prin parolă, TCP și mai multe tuneluri simultane.

Instalarea ngrok

Accesați pagina de descărcare ngrok și apucați versiunea de care aveți nevoie. Puteți să-l rulați din folderul în care se află sau să îl mutați într-o locație care vă permite să o rulați de oriunde. Pe Mac / Linux puteți executa următoarea comandă:

sudo mv ngrok / usr / local / bin / ngrok

Dacă apare o eroare că această locație nu există, creați pur și simplu dosarele care lipsesc.

Folosind ngrok

Din fericire, această parte este extrem de simplă. După ce vă difuzați serverul prin Gulp, aruncați o privire la portul pe care îl utilizați. În exemplul de mai sus, serverul local rulează la http: // localhost: 3000 ceea ce înseamnă că utilizează portul 3000. Într-o nouă filă terminală, executați următoarea comandă:

ngrok http 3000

Acest lucru va crea un tunel accesibil pentru localhost, rezultatul ar trebui să fie ceva de genul:

Adresa URL pe care o vedeți lângă “Redirecționarea” este ceea ce puteți utiliza pentru a accesa site-ul dvs. de oriunde.

Concluzie

La sfârșitul zilei putem face acum trei lucruri:

Vedeți și lucrați la proiectul nostru local
Vizualizați site-ul nostru web prin intermediul oricărui dispozitiv din rețea
Permiteți altora să vizualizeze munca noastră oriunde cu un simplu link

Acest lucru vă va permite să vă axați pe dezvoltare în loc de curse pentru a păstra serverele locale și de testare în sincronizare, migrarea bazelor de date și alte sarcini îngrijorătoare.

Dacă aveți o metodă diferită de a lucra la nivel local și de a distribui rezultatul, anunțați-ne!