Paikallisen palvelimen luominen julkisesta osoitteesta

Olen kehittänyt verkkosivustoja parempaan osaan 10 vuotta ja yksi suurimmista ongelmista oli aina paikallinen kehitys ja paikallisten sivustojen synkronointi live-testeihin. Paikallisen ympäristön käyttö on hyvä, koska se on nopeaa, mutta sitä ei voi tarkastella kaukaa ja siirtää jonnekin tietokannan toimintaa, taulukoiden nimeämistä, arvojen muuttamista ja niin edelleen.

Tässä artikkelissa näytän sinulle helpon tavan suorittaa paikallinen palvelin jonka voit pääsy puhelimesta ja muista mobiililaitteista Luonnollisesti ja myös Internetin välityksellä, mikä tarkoittaa, että jaat työsi asiakkaiden kanssa jättämättä hyviä paikallisia.

Vagrantin käyttäminen paikallisen ympäristön luomiseen

Lyhyesti sitten kirjoitin artikkelin Hongkiatista Vagrantin käytöstä, joten aion vain mennä yli perusasiat täällä. Katso lisätietoja artikkelista!

Aloittaaksesi sinun täytyy tarttua ja asentaa VirtualBox ja Vagrant. Molemmat ovat ilmaisia ja niitä käytetään luomaan virtuaalikone, joka käyttää palvelinta.

Luo nyt kansio, jolla voit tallentaa sivustosi “sivustot” pääkäyttäjän hakemistossa. Se olisi / Users / [käyttäjätunnus] / sivustot OS X: ssä ja C: / Users / [käyttäjätunnus] / sivustot Windowsissa.

Luo uusi nimetty kansio WordPress. Tässä luon virtuaalikoneen. Ajatuksena on, että jokainen kansio on sivustot talossa on erillinen virtuaalikone. Kun olet voida laittaa niin monta sivustoa yhdelle virtuaalikoneelle kuin haluat, haluan ryhmitellä ne eri alustoilla - esim. WordPress, Laravel, Custom

Tätä opetusta varten luon WordPress-sivuston.

Sisällä WordPress kansiossa on luotava kaksi tiedostoa, Vagrantfile ja install.sh. Näitä käytetään virtuaalikoneiden perustamiseen. Jeffrey Way on luonut kaksi suurta starttitiedostoa; voit tarttua hänen Vagrantfile- ja install.sh-tiedostoihin.

Siirry seuraavaksi päätelaitteen avulla kohtaan WordPress hakemistoa ja tyyppiä kiusaa ylös. Tämä kestää jonkin aikaa, koska laatikko on ladattava ja asennettava. Tartu kuppi kahvia ja tarkista tämä viesti 50 WordPress-vinkistä odottaessasi.

Kun prosessi on valmis, sinun pitäisi pystyä menemään 192.168.33.21 ja katso asianmukaisesti palveleva sivu. Sinun tulee olla kansion kansio WordPress-hakemiston html-kansiossa. Nyt voit aloittaa tiedostojen lisäämisen, asentaa WordPressin tai mitä muuta haluat.

Älä unohda lukea koko Vagrant-opasta, jossa on lisätietoja virtuaalisten isäntien luomisesta mytest.dev ja niin edelleen.

Paikallisten sivustojen avaaminen samassa verkossa Gulpin avulla

Kun rakennat sivustoa, sinun pitäisi ajatella reagointia. Pienet näytöt voidaan emuloida jossain määrin selaimen ikkunan kaventamisen kautta, mutta se ei ole vain sama kokemus, varsinkin jos heität verkkokalvonäytöt sekaan.

Ihannetapauksessa haluat avata paikallisen verkkosivustosi mobiililaitteissa. Tätä ei ole vaikea tehdä, jos laitteet ovat samassa verkossa.

Saadaksesi tämän, käytämme Gulp ja Browsersync. Gulp on työkalu kehitystyön automatisointiin, Browsersync on erinomainen työkalu, joka ei vain voi luoda paikallista palvelinta vaan synkronoida vierittämisen, napsautukset, lomakkeet ja enemmän laitteissa.

Gulpin asentaminen

Gulpin asentaminen on erittäin helppoa. Siirry ohjeiden alkuun sivulle Getting Started. Yksi edellytys on NPM (solmupakettien hallinta). Helpoin tapa saada tämä on asentaa Node itse. Ohjeita on Node-verkkosivustolle.

Kun olet käyttänyt sitä npm asentaa - global gulp komento asentaa gulp maailmanlaajuisesti, sinun täytyy lisätä se projektiisi. Tapa tehdä tämä on suorittaa npm asenna --save-dev gulp lisätään projektin pääkansioon ja lisää sitten a gulpfile.js tiedosto siellä.

Lisäämme tällä hetkellä yhden koodirivin sen tiedoston sisälle, joka osoittaa, että käytämme itse Gulpia.

var gulp = vaadi ('gulp');

Jos olet kiinnostunut kaikista viileistä asioista, Gulp voi tehdä samankaltaisia komentosarjoja, koota Sass ja LESS, optimoida kuvat ja niin edelleen, lue opas Gulpille. Tässä artikkelissa keskitymme palvelimen luomiseen.

Browsersyncin käyttäminen

Browsersyncissä on Gulp-laajennus, jonka voimme asentaa kahdessa vaiheessa. Ensinnäkin, lataa se npm: llä, sitten lisätään se Gulpfileimme.

Anna npm asenna selain-sync gulp --save-dev komento projektin juuressa päätelaitteessa; tämä lataa laajennuksen. Avaa sitten Gulpfile ja lisää siihen seuraava rivi:

var browserSync = vaadi ('selain-synkronointi'). Luo ();

Tämän ansiosta Gulp tietää, että käytämme Browsersynciä. Seuraavaksi määritellään tehtävä, joka ohjaa Browsersync-toiminnon toimintaa.

gulp.task ('selain-synkronointi', toiminto () browserSync.init (proxy: "192.168.33.21"););

Kun olet lisännyt, voit kirjoittaa gulp-selaimen synkronointi käynnistää palvelimen. Sinun pitäisi nähdä jotain alla olevaa kuvaa.

Siellä on neljä erillistä URL-osoitetta, mitä he tarkoittavat:

paikallinen: Paikallinen URL-osoite on se, johon pääset palvelimelle koneella, jota käytät. Meidän tapauksessasi voit käyttää 192.168.33.21 tai voit käyttää Borwsersyncin tarjoamaa.
ulkoinen: Tämä on URL-osoite, jota voit käyttää millä tahansa verkkoon liitetyllä laitteella verkkosivuston saavuttamiseksi. Se toimii paikallisella koneella, puhelimella, tabletilla ja niin edelleen.
UI: Tämä URL osoittaa nykyisen palvelimen asetukset. Voit tarkastella yhteyksiä, määrittää verkon kuristuksen, tarkastella historia- tai synkronointiasetuksia.
Ulkoinen käyttöliittymä: Tämä on sama kuin käyttöliittymä, mutta se on käytettävissä millä tahansa verkon laitteella.

Miksi Browsersync on käytössä?

Nyt kun olemme tehneet tämän vaiheen, saatat ajatella: miksi Browsersynciä käytetään? URL-osoite 192.168.33.21 voidaan saavuttaa myös mistä tahansa laitteesta. Vaikka näin on, sinun on asennettava WordPress tähän URL-osoitteeseen.

Käytän yleensä virtuaalihenkilöitä ja niillä on esimerkiksi Wordpress.local tai myproject.dev. Nämä ratkaisevat paikallisesti, joten et voi vierailla wordpress.local-laitteessa matkapuhelimessasi ja nähdä saman tuloksen kuin paikallisessa tietokoneessa.

Toistaiseksi on niin hyvä, että meillä on nyt testipaikka, johon pääsee mistä tahansa verkon laitteesta. Nyt on aika mennä maailmanlaajuisesti ja lähettää töitä Internetissä.

Ngrokin käyttäminen Localhostin jakamiseen

ngrok on työkalu, jonka avulla voit luoda turvallisia tunneleita lähiympäristöön. Jos rekisteröidyt (vielä vapaa), saat salasanalla suojatut tunnelit, TCP ja useita samanaikaisia tunneleita.

Ngrokin asentaminen

Siirry ngrok-lataussivulle ja ota tarvitsemasi versio. Voit suorittaa sen kansiosta, jossa se on, tai siirtää se paikkaan, jossa voit käyttää sitä missä tahansa. Macissa / Linuxissa voit suorittaa seuraavan komennon:

sudo mv ngrok / usr / local / bin / ngrok

Jos saat virheen, että tämä sijainti ei ole olemassa, luo puuttuvat kansiot.

Käyttämällä ngrokia

Onneksi tämä osa on erittäin yksinkertainen. Kun käytät palvelinta Gulpin kautta, tutustu käyttämäänsä porttiin. Yllä olevassa esimerkissä paikallinen palvelin on käynnissä http: // localhost: 3000 mikä tarkoittaa sitä, että se käyttää porttia 3000. Suorita uudessa pääte-välilehdessä seuraava komento:

ngrok http 3000

Tämä luo helposti käytettävissä olevan tunnelin lähiympäristöön, tuloksen pitäisi olla tällainen:

URL-osoite, jota näet vieressä “huolinta” voit käyttää sivustosi pääsyä mistä tahansa.

johtopäätös

Päivän lopussa voimme nyt tehdä kolme asiaa:

Tarkastele ja toimi projektimme paikallisesti
Tarkastele verkkosivustoa millä tahansa verkossa olevalla laitteella
Anna muiden katsella työmme missä tahansa yksinkertaisen linkin avulla

Näin voit keskittyä kehitykseen kilpailun sijasta paikallisten ja testipalvelimien pitämiseksi synkronoituna, siirtämällä tietokantoja ja muita huolestuttavia tehtäviä.

Jos sinulla on erilainen työskentelymenetelmä paikallisesti ja jakamalla tulos, kerro siitä meille!