Vietinio serverio, pasiekiamo iš viešojo adreso, kūrimas

Parengiau svetaines geresniam 10 metų laikotarpiui, o vienas iš didžiausių problemų visada buvo vietos plėtra ir vietinių svetainių sinchronizavimas su gyvais testais. Vietinės aplinkos naudojimas yra puikus, nes jis yra greitas, bet jis negali būti matomas iš tolo ir perdavimas kažkur reiškia duomenų bazės veikimą, lentelių pervadinimą ir kitas reikšmes..

Šiame straipsnyje aš jums parodysiu paprastą būdą paleisti vietinį serverį kurį galite prieigą iš savo telefono ir kitų mobiliųjų įrenginių iš esmės ir taip pat transliuojami internetu, o tai reiškia, kad dalijasi savo darbu su klientais, nepaliekant geros vietos.

„Vagrant“ naudojimas vietinei aplinkai sukurti

Netrukus prieš tai parašiau straipsnį apie „Hongkiat“ apie „Vagrant“ naudojimą, todėl aš tik eisiu per pagrindinius dalykus. Daugiau informacijos rasite straipsnyje!

Norėdami pradėti, turėsite patraukti ir įdiegti „VirtualBox“ ir „Vagrant“. Abi yra laisvos ir naudojamos sukurti virtualią mašiną, kuri paleis jūsų serverį.

Dabar sukurkite aplanką, kuriame galite išsaugoti savo svetaines. Naudokime pavadinimą “Tinklalapiai” mūsų pagrindiniame vartotojų kataloge. Tai būtų / Vartotojai / [vartotojo vardas] / Tinklalapiai OS X ir C: / Vartotojai / [vartotojo vardas] / Tinklalapiai „Windows“.

Sukurkite naują pavadinimą WordPress. Čia kursiu virtualią mašiną. Idėja yra, kad kiekvienas aplankas Tinklalapiai yra atskira virtualioji mašina. Kol jūs gali įdėkite kuo daugiau svetainių vienoje virtualioje mašinoje, kaip norėtumėte, norėčiau juos grupuoti pagal platformas - pvz., „WordPress“, „Laravel“, „Custom“

Šio vadovo tikslais aš sukursiu „WordPress“ svetainę.

Viduje WordPress aplanką, kurį turėsime sukurti du failus, Vagrantfile ir install.sh. Tai bus naudojama mūsų virtualių mašinų nustatymui. Jeffrey Way sukūrė du puikius starterius; galite paimti savo „Vagrantfile“ ir „install.sh“ failus.

Toliau naudodami terminalą, pereikite prie WordPress katalogas ir tipas įnirtingas. Tai užtruks šiek tiek laiko, nes langelį reikia atsisiųsti ir įdiegti. Paimkite kavos puodelį ir patikrinkite šį pranešimą „WordPress“ 50 patarimų, kol laukiate.

Kai procesas bus baigtas, turėtumėte sugebėti eiti 192.168.33.21 ir peržiūrėkite tinkamai pateiktą puslapį. Jūs turinio aplankas turėtų būti html aplankas WordPress kataloge. Dabar galite pradėti pridėti failus, įdiegti „WordPress“ arba ką nors kitą.

Nepamirškite perskaityti viso „Vagrant“ vadovo, kad sužinotumėte daugiau informacijos apie virtualių kompiuterių kūrimą, panašius domenus mytest.dev ir taip toliau.

Vietinių svetainių atidarymas tame pačiame tinkle naudojant „Gulp“

Statydami svetainę turėtumėte galvoti apie reagavimą. Mažus ekranus tam tikru mastu galima imituoti susiaurindami naršyklės langą, tačiau tai tiesiog ne tokia pati patirtis, ypač jei į maišytuvą išmeta tinklainės ekranus.

Idealiu atveju norėtumėte atidaryti savo vietinę svetainę savo mobiliuosiuose įrenginiuose. Tai nėra pernelyg sunku padaryti, jei jūsų įrenginiai yra toje pačioje tinkle.

Norėdami tai padaryti, mes naudosime „Gulp“ ir „Browsersync“. „Gulp“ yra tobulinimo įrankis, „Browsersync“ - tai puiki priemonė, kuri gali ne tik sukurti vietinį serverį, bet ir sinchronizuoti slinkimą, paspaudimus, formas ir dar daugiau..

„Gulp“ diegimas

„Gulp“ diegimas yra labai paprasta. Jei norite gauti instrukcijas, pereikite prie puslapio Pradėti. Viena išankstinė sąlyga yra NPM (mazgo paketo tvarkyklė). Paprasčiausias būdas tai gauti yra įdiegti „Node“. Norėdami gauti nurodymus, pereikite prie „Node“ svetainės.

Kai naudosite npm įdiegti - global gulp komandą įdiegti „gulp“ visame pasaulyje, turite jį įtraukti į savo projektą. Kaip tai padaryti yra paleisti npm įdiegti --save-dev gulp įrašykite savo projekto šakniniame aplanke, tada pridėkite a gulpfile.js failą.

Šiuo metu į failą įrašysime vieną eilutę kodo, kuris rodo, kad mes naudojame „Gulp“.

var gulp = reikalauti („gulp“);

Jei domisi visais puikiais dalykais, „Gulp“ gali padaryti panašius į scenarijus, sukompiliuoti „Sass“ ir „LESS“, optimizuoti vaizdus ir pan., Perskaitykite „Gulp“ vadovą. Šiame straipsnyje mes susitelksime į serverio kūrimą.

„Browsersync“ naudojimas

„Browsersync“ turi „Gulp“ plėtinį, kurį galime įdiegti dviem etapais. Pirmiausia, naudokime npm, kad jį parsisiųsti, tada pridėsime ją prie „Gulpfile“.

Išduokite npm įdiegti naršyklės sinchronizavimo gulp --save-dev komandą projekto šakoje terminale; tai bus atsisiųsti plėtinys. Tada atidarykite „Gulpfile“ ir pridėkite šią eilutę:

var browserSync = reikalauti („naršyklės sinchronizavimas“) sukurti ();

Tai leidžia „Gulp“ žinoti, kad mes naudojame „Browsersync“. Toliau nustatysime užduotį, kuri kontroliuoja, kaip veikia „Browsersync“.

gulp.task („naršyklės sinchronizavimas“, funkcija () browserSync.init (proxy: "192.168.33.21"););

Kai pridėsite, galite įvesti naršyklės sinchronizavimas į terminalą paleisti serverį. Turėtumėte pamatyti kažką panašaus į paveikslėlį.

Yra keturi atskiri URL, čia jie yra:

Vietinis: Vietinis URL yra tas, į kurį galite pasiekti serveryje esantį įrenginį. Mūsų atvejais galite naudoti 192.168.33.21 arba galite naudoti tą, kurią pateikė „Borwsersync“.
Išorinis: Tai URL, kurį galite naudoti bet kuriame įrenginyje, prijungtame prie tinklo, kad pasiektumėte svetainę. Jis veiks jūsų vietiniame įrenginyje, telefone, planšetiniame kompiuteryje ir pan.
UI: Šis URL nurodo šiuo metu veikiančio serverio parinktis. Galite matyti ryšius, nustatyti tinklo droselį, peržiūrėti istorijos ar sinchronizavimo parinktis.
Išorinė UI: Tai yra tokia pati kaip UI, bet prieinama iš bet kurio tinklo įrenginio.

Kodėl naudoti „Browsersync“?

Dabar, kai mes darome su šiuo etapu, galbūt galvojate: kodėl visai naudoti „Browsersync“? URL 192.168.33.21 taip pat galima pasiekti iš bet kurio įrenginio. Nors taip yra, jums reikės įdiegti „WordPress“ prie šio URL.

Paprastai naudojau virtualias svetaines ir turiu domenų, tokių kaip wordpress.local arba myproject.dev. Šie sprendimai išsprendžiami vietoje, todėl mobiliajame telefone negalite apsilankyti WordPress.local ir pamatyti tą patį rezultatą kaip ir vietiniame kompiuteryje.

Iki šiol taip gerai, mes turime bandymų svetainę, prie kurios galima pasiekti iš bet kurio tinklo įrenginio. Dabar atėjo laikas eiti į pasaulį ir transliuoti savo darbą internetu.

Naudojant „Ngrok“ bendrinti „Localhost“

„ngrok“ yra įrankis, kurį naudodami galite sukurti saugius tunelius į savo vietinį. Jei užsiregistruosite (vis dar nemokama), gausite slaptažodžiu apsaugotus tunelius, TCP ir kelis vienalaikius tunelius.

„Ngrok“ diegimas

Eikite į „ngrok“ atsisiuntimo puslapį ir paimkite reikiamą versiją. Galite jį paleisti iš aplanko, kuriame jis yra, arba perkelti jį į vietą, kuri leidžia ją paleisti iš bet kurios vietos. Mac / Linux sistemoje galite paleisti šią komandą:

sudo mv ngrok / usr / local / bin / ngrok

Jei gausite klaidą, kad ši vieta nėra, tiesiog sukurkite trūkstamus aplankus.

Naudojant „ngrok“

Laimei, ši dalis yra labai paprasta. Kai paleisite serverį per „Gulp“, pažvelkite į naudojamą uostą. Pirmiau pateiktame pavyzdyje vietinis serveris veikia http: // localhost: 3000 tai reiškia, kad ji naudoja 3000 prievadą. Naujame terminalo skirtuke paleiskite šią komandą:

ngrok http 3000

Tai sukurs prieinamą tunelį jūsų vietiniam vartotojui, rezultatas turėtų būti toks:

URL, kurį matote šalia “Persiuntimas” tai, ką galite naudoti norėdami pasiekti savo svetainę iš bet kurios vietos.

Išvada

Galų gale galime padaryti tris dalykus:

Peržiūrėkite ir dirbkite su mūsų projektu vietoje
Peržiūrėkite mūsų svetainę per bet kurį tinklo įrenginį
Leiskite kitiems peržiūrėti mūsų darbą bet kurioje vietoje, naudodami paprastą nuorodą

Tai leis jums sutelkti dėmesį į plėtrą, o ne į lenktynes, kad vietiniai ir bandomieji serveriai būtų sinchronizuojami, perkeltų duomenų bazes ir kitas nerimą keliančias užduotis.

Jei turite kitokį metodą, kaip dirbti vietoje ir dalytis rezultatu, praneškite mums!