Stvaranje dostupnog lokalnog poslužitelja s javne adrese
Većinu od 10 godina razvijam web-lokacije i jedno od mojih najvećih problema bilo je uvijek lokalni razvoj i sinkroniziranje lokalnih web-lokacija s testovima uživo. Korištenje lokalnog okruženja je izvrsno jer je brzo, ali se ne može vidjeti iz daljine i prenijeti negdje znači rad s bazom podataka, preimenovanje tablica, vrijednosti i tako dalje.
U ovom članku pokazat ću vam jednostavan način pokrenuti lokalni poslužitelj što možete pristup s telefona i drugih mobilnih uređaja izvorno, i također emitiraju putem interneta, što znači da dijelite svoj rad s klijentima, bez ostavljanja dobrog lokalnog hosta.
Korištenje Vagranta za stvaranje lokalnog okruženja
Nedavno sam napisao članak o Hongkjatu o korištenju Vagranta pa ću samo preći osnove ovdje. Za više informacija pogledajte članak!
Da biste započeli, morate zgrabiti i instalirati VirtualBox i Vagrant. Obje su besplatne i koriste se za stvaranje virtualnog stroja koji će pokrenuti vaš poslužitelj.
Sada stvorite mapu u koju ćete pohraniti svoje web-lokacije. Koristimo imenik “web stranice” unutar našeg glavnog korisničkog imenika. To bi bilo / korisnika / [korisničko ime] / stranice na OS X i C: / korisnika / [ime] / stranice u sustavu Windows.
Stvorite novu mapu pod nazivom wordPress. Ovdje ću stvoriti virtualni stroj. Ideja je da svaka mapa unutar web stranice ima poseban virtualni stroj. Dok ti limenka staviti onoliko web-lokacija na jedan virtualni stroj koliko želite, volim ih grupirati po platformama - npr. WordPress, Laravel, Custom
Za potrebe ovog tutoriala stvorit ću WordPress web stranicu.
Unutar WordPress trebat ćemo stvoriti dvije datoteke, Vagrantfile i install.sh. Oni će se koristiti za postavljanje virtualnih strojeva. Jeffrey Way stvorio je dvije sjajne početne datoteke; možete preuzeti njegove Vagrantfile i install.sh datoteke.
Zatim pomoću terminala idite na WordPress i vrstu skitnica gore. To će potrajati, budući da okvir treba preuzeti i instalirati. Uzmite šalicu kave i provjerite ovaj post na 50 WordPress savjeta dok čekate.
Kada se proces završi, trebali biste moći ići 192.168.33.21 i pogledajte ispravno prikazanu stranicu. Mapa sadržaja mora biti html mapa unutar WordPress direktorija. Sada možete početi dodavati datoteke, instalirati WordPress ili bilo što drugo.
Ne zaboravite pročitati cijeli Vagrant vodič za više informacija o stvaranju virtualnih hostova, poput mapiranja domena mytest.dev i tako dalje.
Otvaranje lokalnih web-mjesta na istoj mreži pomoću programa Gulp
Prilikom izgradnje stranice trebate razmišljati o reakciji. Mali ekrani se u određenoj mjeri mogu emulirati sužavanjem prozora preglednika, ali to jednostavno nije isto iskustvo, pogotovo ako bacite retina ekrane u mix.
Idealno bi bilo da otvorite svoju lokalnu web-lokaciju na svojim mobilnim uređajima. To nije teško učiniti, pod uvjetom da su vaši uređaji na istoj mreži.
Da bismo to učinili, koristit ćemo Gulp i Browsersync. Gulp je alat za automatizaciju razvoja, Browsersync je izvrstan alat koji ne samo da može stvoriti lokalni poslužitelj, već i sinkronizirati pomicanje, klikove, obrasce i više među uređajima.
Instaliranje Gulpa
Instaliranje Gulpa je vrlo jednostavno. Upute potražite na stranici Početak. Jedan od preduvjeta je NPM (Upravitelj paketa čvorova). Najlakši način da to dobijete jest da instalirate sam čvor. Upute potražite na web-mjestu čvora.
Nakon što upotrijebite npm install --global gutanje naredbu za instalaciju gulpa globalno, morate ga dodati u svoj projekt. Način da to učinite je da pokrenete npm install --save-dev gutanje u korijenskoj mapi vašeg projekta, a zatim dodajte gulpfile.js tamo.
U ovom trenutku dodamo jednu liniju koda unutar te datoteke koja ukazuje na to da ćemo sami koristiti Gulp.
var gulp = require ('gulp'); Ako vas zanimaju sve kul stvari koje Gulp može učiniti kao povezivanje skripti, kompiliranje Sass i LESS, optimiziranje slika i tako dalje, pročitajte naš Vodič za gutljaj. U ovom članku ćemo se usredotočiti na stvaranje poslužitelja.
Korištenje Browsersync
Browsersync ima Gulp ekstenziju koju možemo instalirati u dva koraka. Prvo, upotrijebimo npm da ga preuzmemo, a zatim ga dodamo našem Gulpfileu.
Izdajte npm install gulp --save-dev u pregledniku naredba u korijenu projekta u terminalu; ovo će preuzeti proširenje. Zatim otvorite Gulpfile i dodajte sljedeći redak:
var browserSync = require ('browser-sync'). create (); To omogućuje Gulpu da zna da ćemo koristiti Browsersync. Zatim ćemo definirati zadatak koji kontrolira kako će Browsersync raditi.
gulp.task ('browser-sync', funkcija () browserSync.init (proxy: "192.168.33.21");); Nakon dodavanja, možete upisati sinkronizacija preglednika u terminal za pokretanje poslužitelja. Trebali biste vidjeti nešto poput slike ispod.
Tamo postoje četiri zasebna URL-a, evo što oni znače:
- lokalne: Lokalni URL je mjesto na kojem možete doći do poslužitelja na računalu na kojem ga pokrećete. U našim slučajevima možete koristiti
192.168.33.21ili možete koristiti onu koju daje Borwsersync. - Vanjski: Ovo je URL koji možete koristiti na bilo kojem uređaju povezanom s mrežom da biste došli na web-lokaciju. Radit će na vašem lokalnom računalu, telefonu, tabletu i tako dalje.
- UI: Ovaj URL upućuje na opcije za trenutačno pokrenut poslužitelj. Možete vidjeti veze, postaviti ograničenje mreže, prikaz povijesti ili opcije sinkronizacije.
- Vanjski sučelje: Ovo je isto što i korisničko sučelje, ali je dostupno s bilo kojeg uređaja na mreži.
Zašto koristiti Browsersync?
Sada kada smo završili s ovom fazom možda razmišljate: zašto uopće koristiti Browsersync? URL 192.168.33.21 također se može pristupiti s bilo kojeg uređaja. Iako je to tako, morat ćete instalirati WordPress na ovaj URL.
Ja obično koristite virtualhosts i domene kao što su wordpress.local ili myproject.dev. To se rješava lokalno pa ne možete posjetiti wordpress.local na mobilnom telefonu i vidjeti isti rezultat kao i na lokalnom računalu.
Do sada je dobro, sada imamo test mjesto koje se može pristupiti s bilo kojeg uređaja na mreži. Sada je vrijeme da idemo globalno i emitiramo naš rad preko interneta.
Korištenje ngrok dijeljenja našeg Localhost
ngrok je alat koji možete koristiti za stvaranje sigurnih tunela za vaš lokalni host. Ako se prijavite (još uvijek besplatno) dobivate tunele zaštićene lozinkom, TCP i više istodobnih tunela.
Instaliranje ngrok
Idite na ngrok stranicu za preuzimanje i uzmite potrebnu verziju. Možete ga pokrenuti iz mape u kojoj se nalazi ili je premjestiti na mjesto koje vam omogućuje pokretanje s bilo kojeg mjesta. Na Mac / Linuxu možete pokrenuti sljedeću naredbu:
sudo mv ngrok / usr / local / bin / ngrok
Ako dobijete pogrešku da lokacija ne postoji, jednostavno stvorite mape koje nedostaju.
Korištenje ngrok
Srećom, ovaj dio je vrlo jednostavan. Kada pokrenete poslužitelj preko Gulpa, pogledajte port koji koristi. U gornjem primjeru, lokalni poslužitelj radi na http: // localhost: 3000 što znači da koristi priključak 3000. U novoj kartici terminala pokrenite sljedeću naredbu:
ngrok http 3000
To će stvoriti pristupačan tunel vašem localhostu, rezultat bi trebao biti nešto slično ovome:
URL koji vidite pored “prosljeđivanje” je ono što možete koristiti za pristup web-lokaciji s bilo kojeg mjesta.
Zaključak
Na kraju dana možemo učiniti tri stvari:
- Pogledajte i radite na našem projektu lokalno
- Pogledajte našu web-lokaciju putem bilo kojeg uređaja na mreži
- Neka drugi vide naš rad bilo gdje s jednostavnim linkom
To će vam omogućiti da se usredotočite na razvoj umjesto na utrke da biste sinkronizirali lokalne i testne poslužitelje, migrirali baze podataka i druge zabrinjavajuće zadatke.
Ako imate drugačiji način rada lokalno i dijelite rezultat, javite nam!
