Helyi kiszolgáló létrehozása, amely hozzáférhető a nyilvános címtől

10 évig jobb oldalakat fejlesztettem, és az egyik legnagyobb kérdésem mindig a helyi fejlesztés volt, és a helyi webhelyek szinkronizálása az élő tesztekre. A helyi környezet használata nagyszerű, mert gyors, de távolról nem tekinthető meg, és valahol az adatbázis-üzemeltetés, a táblázatok átnevezése, az értékek stb..

Ebben a cikkben egy egyszerű módot fogok mutatni helyi kiszolgáló futtatása amit lehet hozzáférést a telefonról és más mobileszközökről természeténél fogva, és az interneten keresztül is sugározzák, ami azt jelenti, hogy megosztja a munkáját az ügyfelekkel, anélkül, hogy elhagyná a helyét.

A Vagrant használata helyi környezet létrehozásához

Röviddel ezelőtt írtam egy cikket itt a Hongkiat-ról a Vagrant használatáról, ezért csak az alapokat fogom átnézni. További információért tekintse meg a cikket!

A kezdéshez meg kell ragadnia és telepítenie kell a VirtualBoxot és a Vagrant-ot. Mindkettő ingyenes és virtuális gép létrehozására szolgál, amely a kiszolgálót futtatja.

Most hozzon létre egy mappát a webhelyek tárolásához. Használja a nevezett könyvtárat “Weboldalak” fő felhasználói könyvtárunkban. Az lenne / Users / [felhasználónév] / weboldalak az OS X és C: / Users / [felhasználónév] / weboldalak Windows rendszeren.

Hozzon létre egy új nevet wordpress. Itt fogom létrehozni a virtuális gépet. Az ötlet az, hogy minden mappa belül Weboldalak külön virtuális gépet tartalmaz. Amíg te tud tegyünk annyi webhelyet egy virtuális gépre, ahogy szeretné, csoportosítani szeretném őket - pl. WordPress, Laravel, Custom

Ebből a bemutatóból egy WordPress webhelyet fogok létrehozni.

Benne WordPress mappát két fájlt kell létrehoznunk, Vagrantfile és install.sh. Ezeket a virtuális gépeink beállítására használjuk. Jeffrey Way két nagy indítófájlt hozott létre; megragadhatja a Vagrantfile és az install.sh fájljait.

Ezután a terminál használatával navigáljon a WordPress könyvtár és típus felborul. Ez egy ideig fog tartani, mivel a fiókot le kell tölteni és telepíteni kell. Fogj egy csésze kávét, és nézd meg ezt a hozzászólást 50 WordPress tippen, amíg vársz.

Miután a folyamat befejeződött, meg kell tudnia menni 192.168.33.21 és egy megfelelően szolgáltatott oldalt. A tartalmi mappa a html mappa legyen a WordPress könyvtárban. Most elkezdheti a fájlok hozzáadását, telepítheti a WordPress-et, vagy bármi mást, amit szeretne.

Ne felejtse el elolvasni a teljes Vagrant útmutatót a virtuális gazdagépek létrehozásával kapcsolatos további információkért mytest.dev stb.

Helyi webhelyek megnyitása ugyanazon a hálózaton a Gulp használatával

A webhely építése során gondolni kell a reakcióképességre. A kis képernyők bizonyos mértékig emulálhatók a böngészőablak szűkítésével, de ez nem ugyanaz a tapasztalat, különösen, ha a retina képernyőket a keverékbe dobja.

Ideális esetben megnyitja a helyi webhelyét a mobileszközökön. Ezt nem nehéz megtenni, feltéve, hogy az eszközök ugyanabban a hálózatban vannak.

Ehhez Gulp és Browsersync lesz. A Gulp a fejlesztés automatizálásának eszköze, a Browsersync egy nagyszerű eszköz, amely nemcsak helyi kiszolgálót hoz létre, hanem szinkronizálja a görgetést, a kattintásokat, az űrlapokat és a különböző eszközöket.

A Gulp telepítése

A Gulp telepítése nagyon egyszerű. Vezesse át az utasításokat az Első lépések oldalra. Az egyik előfeltétel az NPM (Node Package Manager). A legegyszerűbb módja a Node telepítése. Utasításokhoz menjen a Csomópont weboldalra.

Ha már használta a npm telepítés - global gulp parancsot a gulp telepítéséhez világszerte, hozzá kell adnia a projekthez. Ennek módja a futás npm telepítés --save-dev gulp a projekt gyökérmappájában, majd adjunk hozzá egy gulpfile.js fájl.

Akkor adjunk hozzá egy sor kódot a fájlba, ami azt jelzi, hogy magunkat fogjuk használni.

var gulp = szükséges ('gulp');

Ha érdekel a Gulp minden olyan jó dolog, amellyel a szkriptek összeállítása, a Sass és a LESS összeállítása, a képek optimalizálása és így tovább, olvassa el a Gulp útmutatót. Ebben a cikkben a kiszolgáló létrehozására összpontosítunk.

A Browsersync használata

A Browsersync rendelkezik egy Gulp kiterjesztéssel, amely két lépésben telepíthető. Először használjuk npm-et a letöltéshez, majd hozzáadjuk a Gulpfile-hez.

Adja meg a npm telepítse a böngésző-szinkronizálást --save-dev parancsot a projekt gyökérében a terminálon; ez letölti a kiterjesztést. Ezután nyissa meg a Gulpfile fájlt, és adja hozzá a következő sort:

var browserSync = szükséges ('böngésző-szinkron') létrehozása ();

Ez lehetővé teszi, hogy a Gulp tudja, hogy Browsersync-t fogunk használni. Ezután meghatározunk egy olyan feladatot, amely szabályozza a Browsersync működését.

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

Ha hozzáadta, beírhatja böngésző-szinkronizálás a terminálba egy szerver indításához. Látnod kell valamit az alábbi képen.

Van négy külön URL-cím, itt az, amit jelentenek:

• Helyi: A helyi URL az, ahol elérheti a kiszolgálót azon a gépen, amelyen fut. Esetünkben használhatod 192.168.33.21 vagy használhatja a Borwsersync által biztosítottat.
• Külső: Ez az URL, amelyet a hálózathoz csatlakoztatott eszközön használhat a webhely eléréséhez. Működik a helyi gépen, a telefonon, a tableten és így tovább.
• UI: Ez az URL a jelenleg futó kiszolgáló beállításaira mutat. Megtekintheti a kapcsolatokat, beállíthatja a hálózati fojtást, megtekintheti az előzményeket vagy a szinkronizálási beállításokat.
• Külső felhasználói felület: Ez ugyanaz, mint a felhasználói felület, de elérhető a hálózat bármely eszközéről.

Miért használja a Browsersync alkalmazást?

Most, hogy végeztünk ezzel a fázissal, lehet, hogy gondolkodsz: miért egyáltalán használd a Browsersync-et? Az 192.168.33.21 URL-t bármelyik eszközről elérheti. Bár ez így van, telepítenie kell a WordPress-et erre az URL-re.

Általában virtuális házakat használok, és olyan domainjeim vannak, mint a wordpress.local vagy a myproject.dev. Ezek helyileg megoldódnak, így nem látogathatod el a wordpress.local-ot a mobiltelefonodon, és ugyanazt az eredményt látod, mint a helyi számítógépen.

Eddig annyira jó, hogy van egy teszthelyünk, amely elérhető a hálózat bármely eszközéről. Most itt az ideje, hogy globálisan lépjünk át, és közvetítsük munkánkat az interneten keresztül.

A ngrok használata a Localhost megosztásához

A ngrok olyan eszköz, amellyel biztonságos alagutakat hozhat létre a helyi telephelyén. Ha feliratkozik (még ingyenes), jelszóval védett alagutakat, TCP-t és több párhuzamos alagutakat kap.

A ngrok telepítése

Menjen a ngrok letöltési oldalára, és ragadja meg a szükséges verziót. Futtathatja azt a mappából, amelyen van, vagy áthelyezi azt olyan helyre, amely lehetővé teszi, hogy bárhonnan futtassa. Mac / Linux rendszeren a következő parancsot futtathatja:

sudo mv ngrok / usr / local / bin / ngrok

Ha hibát észlel, hogy ez a hely nem létezik, egyszerűen hozza létre a hiányzó mappákat.

Ngrok használata

Szerencsére ez a rész rendkívül egyszerű. Miután a Gulp-on keresztül futtatja a szervert, nézze meg a használt portot. A fenti példában a helyi kiszolgáló fut http: // localhost: 3000 ez azt jelenti, hogy a 3000-es portot használja. Egy új terminál lapon futtassa a következő parancsot:

ngrok http 3000

Ez hozzáférhető alagutat hoz létre a helyi telephelyén, az eredménynek hasonlónak kell lennie:

A mellette látható URL “Szállítmányozás” amit bárhonnan elérhet a webhelyéhez.

Következtetés

A nap végén három dolgot tehetünk:

• Nézze meg és dolgozzon helyi szinten
• Tekintse meg honlapunkat a hálózat bármely eszközén keresztül
• Hagyja, hogy mások egyszerű kapcsolat segítségével megtekinthessék munkánkat

Ez lehetővé teszi, hogy a versenyhelyzet helyett a fejlesztésre összpontosítson, hogy a helyi és a tesztszerverek szinkronban legyenek, az adatbázisok és más aggasztó feladatok.

Ha más módszerrel rendelkezik a helyben történő munkavégzéshez és az eredmény megosztásához, tudassa velünk!