Vytvorenie lokálneho servera prístupného z verejnej adresy

Vyvíjam webové stránky na lepšiu časť desať rokov a jednou z mojich najväčších problémov bolo vždy lokálny vývoj a synchronizácia miestnych lokalít na testy naživo. Používanie lokálneho prostredia je skvelé, pretože je rýchle, ale nie je viditeľné z diaľky a prenos niekde znamená prevádzku databázy, premenovanie tabuliek, hodnôt atď..

V tomto článku vám ukážem jednoduchý spôsob spustiť lokálny server čo môžete prístup z telefónu a iných mobilných zariadení natívne a tiež vysielať cez internet, čo znamená zdieľať svoju prácu s klientmi bez toho, aby ste opustili dobré ol 'localhost.

Použitie súboru Vagrant na vytvorenie miestneho prostredia

Pred pár dňami som na Hongkiatu napísal článok o používaní Vagrant, aby som tu prešiel len základy. Viac informácií nájdete v článku!

Na začiatok budete musieť chytiť a nainštalovať VirtualBox a Vagrant. Obidva sú zadarmo a používajú sa na vytvorenie virtuálneho počítača, ktorý bude spúšťať váš server.

Teraz vytvorte priečinok na ukladanie vašich webových stránok. Použite adresár s názvom “webové stránky” v našom hlavnom adresári používateľov. To by bolo / Users / [používateľské meno] / webové stránky na OS X a C: / Users / [používateľské meno] / webové stránky v systéme Windows.

Vytvorte nový priečinok s názvom wordpress. Tu vytvorím virtuálny stroj. Myšlienka je, že každá zložka v rámci webové stránky obsahuje samostatný virtuálny stroj. Zatiaľ čo vy môcť vložte toľko webových stránok na jeden virtuálny počítač, ako by ste chceli, rada ich zoskupujem pomocou platforiem - napr .: WordPress, Laravel, Custom

Na účely tohto tutoriálu budem vytvárať webové stránky WordPress.

Vnútri WordPress zložky budeme musieť vytvoriť dva súbory, Vagrantfile a install.sh. Tieto sa použijú na nastavenie našich virtuálnych strojov. Jeffrey Way vytvoril dve skvelé štartovacie súbory; môžete chytiť jeho súbory Vagrantfile a install.sh.

Ďalej pomocou terminálu prejdite na WordPress adresár a typ hore. Bude to chvíľu trvať, pretože krabica musí byť stiahnutá a potom nainštalovaná. Chyť šálku kávy a pozrite sa na tento príspevok na 50 WordPress tipy, zatiaľ čo vy čakáte.

Po dokončení procesu by ste mali byť schopní ísť 192.168.33.21 a pozrite si správne zobrazenú stránku. Obsah adresára by mal byť priečinok html v adresári WordPress. Teraz môžete začať pridávať súbory, nainštalovať WordPress alebo čokoľvek iné, čo by ste chceli.

Nezabudnite si prečítať celý sprievodca Vagrant pre viac informácií o vytváraní virtuálnych hostiteľov, mapovanie domén ako napr mytest.dev a tak ďalej.

Otváranie miestnych lokalít na rovnakej sieti pomocou nástroja Gulp

Pri budovaní stránky by ste mali premýšľať o schopnosti reagovať. Malé obrazovky možno do určitej miery napodobniť zúžením okna prehliadača, ale nie je to rovnaký zážitok, najmä ak hodíte obrazovky sietnice do mixu.

V ideálnom prípade budete chcieť otvoriť lokálne webové stránky vo vašich mobilných zariadeniach. To nie je príliš ťažké robiť, za predpokladu, že vaše zariadenia sú v rovnakej sieti.

Ak to chcete urobiť, použijeme Gulp a Browsersync. Gulp je nástroj na automatizáciu vývoja, služba Browsersync je skvelý nástroj, ktorý môže nielen vytvoriť lokálny server, ale synchronizovať posúvanie, kliknutia, formuláre a ďalšie zariadenia.

Inštalácia Gulp

Inštalácia Gulp je veľmi jednoduché. Vráťte sa na stránku Začíname pre pokyny. Jedným z predpokladov je NPM (Node Package Manager). Najjednoduchší spôsob, ako to dosiahnuť, je inštalácia samotného uzla. Pokračujte smerom dolu na internetovú stránku Uzol pre pokyny.

Akonáhle ste použili npm install --global gulp príkaz na inštaláciu gulp globálne, musíte ho pridať do projektu. Spôsob, ako to urobiť, je spustiť npm nainštalujte --save-dev gulp v koreňovom priečinku projektu a potom pridajte súbor a gulpfile.js tam súbor.

Momentálne pridáme do tohto súboru jeden riadok kódu, ktorý naznačuje, že budeme používať samotný Gulp.

var gulp = vyžadujú ("gulp");

Ak máte záujem o všetky tie skvelé veci, ktoré Gulp dokáže robiť, ako je zlučovanie skriptov, kompilácia Sass a LESS, optimalizácia obrázkov atď., Prečítajte si našu príručku Gulp. V tomto článku sa budeme sústreďovať na vytvorenie servera.

Používanie aplikácie Browsersync

Služba Browsersync má rozšírenie Gulp, ktoré môžeme nainštalovať v dvoch krokoch. Po prvé, použite npm na jeho stiahnutie, potom ho pridáme do nášho Gulpfile.

Vydanie npm inštalovať prehliadač-synchronizácia gulp --save-dev príkaz v koreňovom projekte projektu v termináli; toto rozšírenie si stiahne. Potom otvorte súbor Gulpfile a pridajte nasledujúci riadok:

var browserSync = vyžadovať ('browser-sync') create ();

To umožňuje Gulpovi vedieť, že budeme používať službu Browsersync. Ďalej definujeme úlohu, ktorá kontroluje, ako bude služba Browsersync fungovať.

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

Po pridaní môžete zadať synchronizácia prehliadača gulp do terminálu na spustenie servera. Mali by ste vidieť niečo ako obrázok nižšie.

Existujú štyri samostatné adresy URL, tu je to, čo znamenajú:

miestna: Miestna adresa URL je miesto, kde sa môžete dostať na server na počítači, na ktorom ho spúšťate. V našich prípadoch môžete použiť 192.168.33.21 alebo môžete použiť ten, ktorý poskytuje spoločnosť Borwsersync.
externý: Toto je adresa URL, ktorú môžete použiť na akomkoľvek zariadení pripojenom k sieti, aby ste sa dostali na webovú stránku. Bude fungovať na vašom lokálnom počítači, telefóne, tablete atď.
UI: Táto URL odkazuje na možnosti aktuálne bežiaceho servera. Môžete vidieť pripojenia, nastaviť škrtenie siete, históriu zobrazenia alebo možnosti synchronizácie.
Externé používateľské rozhranie: Toto je rovnaké ako používateľské rozhranie, ale je prístupné z akéhokoľvek zariadenia v sieti.

Prečo používať aplikáciu Browsersync?

Teraz, keď sme skončili s touto fázou, môžete premýšľať: prečo používate Browsersync vôbec? Adresa URL 192.168.33.21 je tiež dostupná z ľubovoľného zariadenia. Aj keď je to tak, musíte na túto adresu URL nainštalovať program WordPress.

Obvykle používam virtuálne domény a domény ako wordpress.local alebo myproject.dev. Tieto riešenia sa riešia lokálne, takže nemôžete navštíviť wordpress.local na vašom mobilnom telefóne a vidieť rovnaký výsledok ako v lokálnom počítači.

Zatiaľ je to dobré, teraz máme testovacie miesto, ktoré je možné získať z akéhokoľvek zariadenia v sieti. Teraz je čas ísť globálne a vysielať svoju prácu cez internet.

Použitie ngrok Ak chcete zdieľať náš Localhost

ngrok je nástroj, ktorý môžete použiť na vytvorenie zabezpečených tunelov do vášho localhost. Ak sa zaregistrujete (stále máte zadarmo), získate tunely chránené heslom, protokol TCP a viaceré súčasné tunely.

Inštalácia ngrok

Prejdite na ngrok stránku na prevzatie a vyberte požadovanú verziu. Môžete ho spustiť zo zložky, v ktorej sa nachádzate, alebo ju presunúť na miesto, ktoré vám umožní spustiť ju kdekoľvek. Na počítači Mac / Linux môžete spustiť nasledujúci príkaz:

sudo mv ngrok / usr / local / bin / ngrok

Ak sa vyskytne chyba, že toto miesto neexistuje, stačí vytvoriť chýbajúce priečinky.

Použitie ngrok

Našťastie táto časť je veľmi jednoduchá. Po spustení servera cez Gulp sa pozrite na port, ktorý používa. Vo vyššie uvedenom príklade je lokálny server bežiaci na http: // localhost: 3000 čo znamená, že používa port 3000. Na novej karte terminálu spustite nasledujúci príkaz:

ngrok http 3000

Tým sa vytvorí prístupný tunel pre váš localhost, výsledok by mal byť takýto:

Adresa URL, ktorú vidíte vedľa “presmerovanie” je to, čo môžete použiť na prístup k vašim webovým stránkam odkiaľkoľvek.

záver

Na konci dňa môžeme teraz urobiť tri veci:

Prezrite si a pracujte na našom projekte lokálne
Pozrite si naše webové stránky prostredníctvom akéhokoľvek zariadenia v sieti
Nechajte ostatných pozrieť našu prácu kdekoľvek s jednoduchým odkazom

To vám umožní zamerať sa na vývoj namiesto pretekov, aby synchronizovali lokálne a testovacie servery, migrovali databázy a iné znepokojujúce úlohy.

Ak máte iný spôsob práce na mieste a zdieľanie výsledku, dajte nám vedieť!