Kohaliku serveri loomine avalikult aadressilt

Olen arendanud veebisaite 10 aasta paremaks osaks ja üks minu suurimaid probleeme oli alati kohalik areng ja kohalike saitide sünkroonimine elavateks testideks. Kohaliku keskkonna kasutamine on suur, sest see on kiire, kuid kaugelt ei ole võimalik seda näha ja kusagil teisaldamine tähendab andmebaasi toimimist, tabelite, väärtuste ümbernimetamist jne.

Selles artiklis näitan sulle lihtsat viisi käivitada kohalik server mida saate juurdepääsu oma telefonist ja muudest mobiilseadmetest sisuliselt ja ka Interneti vahendusel, mis tähendab, et jagate oma tööd klientidega, jättes hea kohalikuks.

Vagrant kasutamine kohaliku keskkonna loomiseks

Veidi aega tagasi kirjutasin selle kohta Hongkiatile artikli Vagranti kasutamise kohta, nii et ma lähen siin ainult põhitõedesse. Lisateabe saamiseks vaadake artiklit!

Alustamiseks peate haarama ja installima VirtualBoxi ja Vagrant. Mõlemad on tasuta ja neid kasutatakse virtuaalse masina loomiseks, mis käivitab teie serveri.

Nüüd looge oma veebisaitide salvestamiseks kaust. Kasutage kataloogi “Veebilehed” meie peamises kasutajakataloogis. See oleks / Kasutajad / [kasutajanimi] / Veebisaidid OS X ja C: / Kasutajad / [kasutajanimi] / Veebisaidid Windowsis.

Looge uus kaust nimega Wordpress. See on koht, kus ma loon virtuaalse masina. Idee on, et iga kaust asub Veebilehed tal on eraldi virtuaalne masin. Kui oled saab pange nii palju veebisaite ühele virtuaalsele masinale kui soovite, mulle meeldib rühmitada need platvormide kaupa - nt WordPress, Laravel, Custom

Käesolevas juhendis loome WordPressi veebilehe.

Sisse WordPress me peame looma kaks faili, Vagrantfail ja install.sh. Neid kasutatakse meie virtuaalsete masinate loomiseks. Jeffrey Way on loonud kaks suurt starteri faili; saate haarata oma Vagrantfile ja install.sh failid.

Seejärel navigeerige terminali abil WordPress kataloog ja tüüp ülendama. See võtab aega, sest kast tuleb alla laadida ja seejärel installida. Haarake tassi kohvi ja vaadake seda postitust 50 WordPressi nõuandel, kui ootate.

Kui protsess on lõppenud, peaksite saama minna 192.168.33.21 ja vaadake õigesti teenitud lehte. Sa sisu kaust peaks olema html kaust WordPress kataloogis. Nüüd saate alustada failide lisamist, installida WordPress või midagi muud, mida soovite.

Ärge unustage lugeda kogu Vagranti juhendit, et saada rohkem infot virtuaalserverite loomise kohta, nagu näiteks kaardistamise domeenid mytest.dev ja nii edasi.

Kohalike saitide avamine samal võrgul Gulpi kasutades

Saidi loomisel peaksite mõtlema reageerimisvõimele. Väikeid ekraane saab teatud määral brauseri akna vähendamise teel emuleerida, kuid see pole lihtsalt sama kogemus, eriti kui võrgusse heidetakse võrkkesta ekraanid.

Ideaalis soovite avada oma kohaliku veebisaidi oma mobiilseadmetes. Seda ei ole raske teha, kui teie seadmed asuvad samas võrgus.

Selle saavutamiseks kasutame Gulp ja Browsersync. Gulp on arengu automatiseerimise vahend, Browsersync on suurepärane tööriist, mis ei saa mitte ainult luua kohalikku serverit, vaid sünkroonida kerimise, klõpsude, vormide ja muude seadmete vahel.

Gulp'i installimine

Gulp'i paigaldamine on väga lihtne. Suunake juhiste saamiseks leheküljele Alustamine. Üks eeltingimus on NPM (Node Package Manager). Lihtsaim viis selle saamiseks on paigaldada Node ise. Juhiste saamiseks liikuge tippu veebisaidi alla.

Kui olete seda kasutanud npm paigaldada - global gulp käsk paigaldada gulp kogu maailmas, peate selle oma projektile lisama. Selle tegemise viis on käivitada npm paigaldamine --save-dev gulp oma projekti juurkataloogis, seejärel lisage a gulpfile.js faili seal.

Praegu lisame selle faili sees ühe rea, mis näitab, et me kasutame Gulpit ise.

var gulp = vaja ('gulp');

Kui olete huvitatud kõikidest jahedatest asjadest, mida Gulp saab teha, nagu skriptide ühendamine, Sassi ja LESSi koostamine, piltide optimeerimine ja nii edasi, lugege meie Gulpi juhendit. Selles artiklis keskendume serveri loomisele.

Browsersync'i kasutamine

Browsersyncil on Gulp-laiendus, mida saab installida kahes etapis. Esmalt kasutame selle allalaadimiseks npm, seejärel lisame selle meie Gulpfile'i.

Proovige npm installige brauseri-sünkroniseerimise gulp --save-dev käsk terminalis terminalis; see lae alla. Seejärel avage Gulpfile ja lisage sellele järgmine rida:

var browserSync = vaja ('brauseri sünkroniseerimine').

See annab Gulpile teada, et me kasutame Browsersynci. Seejärel määratleme ülesande, mis kontrollib, kuidas Browsersync toimib.

gulp.task ('brauseri sünkroonimine', funktsioon () browserSync.init (proxy: "192.168.33.21"););

Pärast lisamist saate sisestada brauseri sünkroonimine serveri käivitamiseks terminali. Sa peaksid nägema midagi allpool olevat pilti.

Seal on neli eraldi URL-i, mida nad tähendavad:

Kohalik: Kohalik URL on koht, kus saate selle masina serveri jõuda. Meie juhtudel saate kasutada 192.168.33.21 või võite kasutada seda, mida pakub Borwsersync.
Väline: See on URL, mida saate kasutada mis tahes võrguga ühendatud seadmes, et jõuda veebilehele. See töötab teie kohaliku masina, telefoni, tahvelarvuti ja nii edasi.
Kasutajaliides: See URL osutab parajasti töötava serveri valikutele. Saate näha ühendusi, seadistada võrgu drosseldamist, vaadata ajalugu või sünkroonimisvalikuid.
Väline kasutajaliides: See on sama kui kasutajaliides, kuid on kättesaadav mis tahes võrgu seadmest.

Miks kasutada Browsersync?

Nüüd, kui me selle faasiga oleme teinud, võiksite mõelda: miks Browsersynci üldse kasutada? URL-i 192.168.33.21 saab ka ükskõik millisest seadmest. Kuigi see on nii, peate sellele URL-ile WordPressi installima.

Tavaliselt kasutan virtuaalhosse ja mul on sellised domeenid nagu wordpress.local või myproject.dev. Need lahendavad kohapeal, nii et te ei saa oma mobiiltelefonis Wordpress.locali külastada ja näha sama tulemust kui teie kohalikus arvutis.

Siiani on meil nüüd olemas testimiskoht, millele pääseb ligi mis tahes võrgu seadmest. Nüüd on aeg minna üle maailma ja edastada oma töö Internetis.

Kasutades ngrokit meie kohaliku jagamise jagamiseks

ngrok on tööriist, mida saate kasutada turvaliste tunnelite loomiseks oma kohalikule. Kui registreerute (endiselt tasuta), saate parooliga kaitstud tunnelid, TCP ja mitu samaaegset tunnelit.

Ngroki installimine

Minge ngroki allalaadimise lehele ja haarake vajalik versioon. Saate seda käivitada kaustast, kuhu see on sisse viidud, või teisaldada see asukohta, mis võimaldab teil seda kõikjalt käivitada. Mac / Linuxis saate käivitada järgmise käsu:

sudo mv ngrok / usr / local / bin / ngrok

Kui teil tekib viga, mida see asukoht ei eksisteeri, looge lihtsalt puuduvad kaustad.

Ngroki kasutamine

Õnneks on see osa väga lihtne. Kui olete oma serveri Gulp'i kaudu kasutanud, siis vaata pilti, mida ta kasutab. Ülaltoodud näites töötab kohalik server http: // localhost: 3000 mis tähendab, et ta kasutab porti 3000. Uue terminali vahekaardil käivitage järgmine käsk:

ngrok http 3000

Sellega luuakse ligipääsetav tunnel oma kohalikule, tulemuseks peaks olema midagi sellist:

URL, mida näete kõrval “Edastamine” on see, mida saate kasutada oma veebisaidi juurde pääsemiseks kõikjalt.

Järeldus

Päeva lõpus saame nüüd teha kolm asja:

Vaadake ja töötage meie projekti kohalikult
Vaadake meie veebisaiti võrgu mis tahes seadme kaudu
Luba teistel oma tööd kõikjal lihtsal lingil vaadata

See võimaldab teil keskenduda arendamisele, mitte võidusõidu asemel, et hoida kohalikke ja testiservereid sünkroonis, teisaldades andmebaase ja muid murettekitavaid ülesandeid.

Kui teil on lokaalne töömeetod ja tulemuse jagamine, andke meile teada!