Ustvarjanje lokalnega strežnika, dostopnega z javnega naslova

Razvijala sem spletne strani že več kot 10 let in ena od mojih največjih težav je bila vedno lokalni razvoj in sinhronizacija lokalnih spletnih strani z živimi testi. Uporaba lokalnega okolja je odlična, ker je hitra, vendar ni vidna od daleč in se prenaša nekje, kar pomeni delovanje baze podatkov, preimenovanje tabel, vrednosti in tako naprej.

V tem članku vam bom pokazal preprost način zaženite lokalni strežnik ki jih lahko dostop iz telefona in drugih mobilnih naprav izvorno in tudi preko interneta, kar pomeni, da delite svoje delo s strankami, ne da bi pustili dober lokalni gostitelj.

Uporaba Vagranta za ustvarjanje lokalnega okolja

Pred kratkim sem na Hongkiatu napisal članek o uporabi Vagranta, tako da bom tukaj le pregledoval osnove. Za več informacij si oglejte članek!

Če želite začeti, morate zagrabiti in namestiti VirtualBox in Vagrant. Oba sta brezplačna in se uporabljata za ustvarjanje virtualnega računalnika, ki bo poganjal vaš strežnik.

Zdaj ustvarite mapo za shranjevanje vaših spletnih mest. Uporabimo imenik z imenom “Spletne strani” v glavnem imeniku uporabnikov. To bi bilo / Users / [username] / spletne strani na OS X in C: / Users / [username] / spletne strani v sistemu Windows.

Ustvarite novo imenovano mapo wordpress. Tukaj bom ustvaril virtualni stroj. Ideja je, da vsaka mapa znotraj Spletne strani hrani ločen virtualni stroj. Medtem ko ste lahko postavite toliko spletnih strani na en virtualni stroj, kot želite, rad bi jih razvrstil po platformah - npr. WordPress, Laravel, Custom

Za namene te vadnice bom ustvaril WordPress spletno stran.

V notranjosti WordPress moramo ustvariti dve datoteki, Vagrantfile in install.sh. Ti bodo uporabljeni za nastavitev naših virtualnih strojev. Jeffrey Way je ustvaril dve odlični začetniški datoteki; lahko vzamete njegove datoteke Vagrantfile in install.sh.

Nato se s terminalom pomaknite do WordPress in vrsto potapljač. To bo trajalo nekaj časa, saj je treba škatlo prenesti in nato namestiti. Zgrabi skodelico kave in preverite to objavo na 50 WordPress nasvetov, medtem ko čakate.

Ko je postopek končan, morate biti sposobni iti 192.168.33.21 in si oglejte stran, ki ste jo pravilno vnesli. Mapa z vsebino mora biti mapa html v imeniku WordPress. Sedaj lahko začnete dodajati datoteke, namestiti WordPress ali karkoli drugega.

Ne pozabite prebrati celotnega Vagrant vodnika za več informacij o ustvarjanju navideznih gostiteljev, kot so domene za preslikavo mytest.dev in tako naprej.

Odpiranje lokalnih mest na isto omrežje z uporabo Gulp

Med gradnjo spletnega mesta morate razmišljati o odzivnosti. Majhni zasloni se lahko do neke mere posnemajo z zožitvijo okna brskalnika, vendar to ni enaka izkušnja, še posebej, če v mrežo vržete zaslonke mrežnice..

V idealnem primeru boste želeli odpreti lokalno spletno mesto v mobilnih napravah. To ni pretežko, če so vaše naprave v istem omrežju.

Da bi to naredili, bomo uporabili Gulp in Browsersync. Gulp je orodje za avtomatizacijo razvoja, Browsersync je odlično orodje, ki lahko ne samo ustvari lokalni strežnik, temveč sinhronizira pomikanje, klike, obrazce in več med napravami.

Namestitev Gulpa

Namestitev Gulpa je zelo preprosta. Navodila pojdite na stran za začetek. Predpogoj je NPM (Node Package Manager). Najlažji način je, da namestite samo Node. Za navodila se obrnite na spletno stran vozlišča.

Ko uporabite npm install --global gulp ukaz za globalno namestitev gulpa, ga morate dodati projektu. Način za to je teči npm Namestitev --save-dev v korenski mapi projekta in dodajte a gulpfile.js datoteko tam.

V to datoteko dodamo še eno vrstico kode, ki kaže, da bomo Gulp uporabljali sami.

var gulp = require ('gulp');

Če vas zanimajo vse kul stvari, ki jih Gulp lahko naredi kot združevanje skript, zbiranje Sass in LESS, optimiziranje slik in tako naprej, preberite naš Vodnik po Gulpu. V tem članku se bomo osredotočili na ustvarjanje strežnika.

Uporaba brskalnika

Browsersync ima podaljšek Gulp, ki ga lahko namestimo v dveh korakih. Najprej uporabimo npm za prenos, nato pa jo dodamo v naš Gulpfile.

Izdaja npm install br-sinhronizacija gulp --save-dev ukaz v korenu projekta v terminalu; to bo preneslo razširitev. Nato odprite Gulpfile in mu dodajte naslednjo vrstico:

var browserSync = require ('browser-sync'). create ();

S tem Gulp lahko ve, da bomo uporabljali Browsersync. Nato bomo definirali nalogo, ki bo nadzorovala, kako bo Browsersync deloval.

gulp.task ("brskalnik-sinhronizacija", funkcija () browserSync.init (proxy: "192.168.33.21"););

Ko ste dodali, lahko vnesete sinhronizacija brskalnika v terminal za zagon strežnika. Videti morate nekaj podobnega kot spodnja slika.

V njej so štirje ločeni URL-ji, kar pomeni:

Lokalno: Lokalni URL je mesto, kjer lahko dosežete strežnik na računalniku, v katerem ga izvajate. V naših primerih lahko uporabite 192.168.33.21 ali pa uporabite tisto, ki jo je posredoval Borwsersync.
Zunanji: To je URL, ki ga lahko uporabite za katero koli napravo, povezano z omrežjem, da pridete do spletnega mesta. Deloval bo na vašem lokalnem računalniku, telefonu, tabličnem računalniku in tako naprej.
UI: Ta URL kaže na možnosti za trenutno nameščen strežnik. Vidite lahko povezave, nastavite dušenje omrežja, ogled zgodovine ali možnosti sinhronizacije.
Zunanji uporabniški vmesnik: To je enako kot uporabniški vmesnik, vendar je dostopno iz katere koli naprave v omrežju.

Zakaj uporabljati brskalnik?

Zdaj, ko smo končali s to fazo, morda razmišljate: zakaj sploh uporabljate Browsersync? Do naslova 192.168.33.21 lahko dostopate tudi iz katere koli naprave. Čeprav je to tako, morate na ta URL namestiti WordPress.

Ponavadi uporabljam virtualhosts in imam domene, kot so wordpress.local ali myproject.dev. Te rešitve se rešujejo lokalno, tako da ne morete obiskati wordpress.local v mobilnem telefonu in videti enake rezultate kot na lokalnem računalniku.

Do zdaj je dobro, zdaj imamo testno mesto, do katerega lahko dostopate iz katere koli naprave v omrežju. Zdaj je čas, da gremo globalno in oddajamo naše delo preko interneta.

Uporaba ngrok za skupno rabo našega lokalnega gostitelja

ngrok je orodje, ki ga lahko uporabite za ustvarjanje varnih predorov za vaš lokalni gostitelj. Če se prijavite (še vedno brezplačno), dobite tunele, zaščitene z geslom, TCP in več istočasnih predorov.

Namestitev ngrok

Pojdite na stran za prenos ngrok in zgrabite različico, ki jo potrebujete. Lahko ga zaženete iz mape, v kateri je, ali jo premaknete na lokacijo, ki vam omogoča, da jo izvajate od koder koli. V sistemu Mac / Linux lahko zaženete naslednji ukaz:

sudo mv ngrok / usr / local / bin / ngrok

Če se prikaže napaka, da ta lokacija ne obstaja, preprosto ustvarite manjkajoče mape.

Uporaba ngrok

Na srečo je ta del zelo preprost. Ko zaženete strežnik preko Gulpa, si oglejte vrata, ki jih uporablja. V zgornjem primeru se lokalni strežnik izvaja pri http: // localhost: 3000 kar pomeni, da uporablja vrata 3000. Na novem zavihku terminala zaženite ta ukaz:

ngrok http 3000

S tem boste ustvarili dostopen predor do vašega lokalnega gostitelja, rezultat mora biti tak:

URL, ki ga vidite poleg “Posredovanje” je tisto, kar lahko uporabite za dostop do vaše spletne strani od koder koli.

Zaključek

Ob koncu dneva lahko zdaj naredimo tri stvari:

Ogled in delo na našem projektu na lokalni ravni
Oglejte si našo spletno stran prek katere koli naprave v omrežju
Naj drugi vidijo naše delo kjerkoli s preprosto povezavo

To vam bo omogočilo, da se osredotočite na razvoj namesto na dirke, da boste sinhronizirali lokalne in testne strežnike, selili baze podatkov in druge zaskrbljujoče naloge..

Če imate drugačen način dela na lokalni ravni in delite rezultat, nam to sporočite!