Vietējā servera izveide, kas ir pieejams no publiskas adreses
Esmu izstrādājis tīmekļa vietnes 10 gadu labākajai daļai, un viena no manām lielākajām problēmām vienmēr bija vietējā attīstība un vietējo vietņu sinhronizācija ar dzīviem testiem. Vietējās vides izmantošana ir lieliska, jo tā ir ātra, bet tā nav redzama no tālienes un pārcelšana kaut kur nozīmē datubāzes darbību, tabulu pārdēvēšanu, vērtības utt..
Šajā rakstā es jums parādīšu vienkāršu veidu palaist vietējo serveri kuru jūs varat piekļūt no tālruņa un citām mobilajām ierīcēm un arī pārraidīt internetā, kas nozīmē dalīties ar savu darbu ar klientiem, neatstājot labus vietējos pakalpojumus.
Vagrant izmantošana vietējās vides izveidei
Pirms neilga laika es uzrakstīju rakstu šeit par Honkiatu par Vagrant izmantošanu, tāpēc es šeit aplūkosim tikai pamatus. Lai iegūtu vairāk informācijas, apskatiet rakstu!
Lai sāktu darbu, jums būs jāsaņem un jāinstalē VirtualBox un Vagrant. Abi ir bezmaksas un tiek izmantoti, lai izveidotu virtuālo mašīnu, kas darbosies jūsu serverī.
Tagad izveidojiet mapi, lai saglabātu jūsu tīmekļa vietnes. Izmantojiet direktoriju, kas nosaukta “Tīmekļa vietnes” mūsu galvenajā lietotāja direktorijā. Tas būtu / Lietotāji / [lietotājvārds] / tīmekļa vietnes OS X un C: / Lietotāji / [lietotājvārds] / tīmekļa vietnes sistēmā Windows.
Izveidojiet jaunu nosaukumu WordPress. Tas ir, kur es izveidoju virtuālo mašīnu. Ideja ir tāda, ka katra mape atrodas Tīmekļa vietnes atrodas atsevišķa virtuālā mašīna. Kamēr jūs var ievietojiet tik daudz tīmekļa vietnes vienā virtuālajā mašīnā, cik vēlaties, es vēlētos tos grupēt pa platformām - piemēram: WordPress, Laravel, Custom
Šīs apmācības vajadzībām es izveidoju WordPress tīmekļa vietni.
Iekšpusē WordPress mapei mums būs jāizveido divi faili, Vagrantfile un install.sh. Tie tiks izmantoti, lai izveidotu mūsu virtuālās mašīnas. Jeffrey Way ir izveidojis divus lieliskus starta failus; jūs varat paņemt viņa Vagrantfile un install.sh failus.
Tālāk, izmantojot termināli, dodieties uz WordPress direktoriju un veidu apnicis. Tas aizņems kādu laiku, jo kaste ir jāielādē un pēc tam jāinstalē. Paņemiet tasi kafijas un pārbaudiet šo ziņu par 50 WordPress padomiem, kamēr jūs gaidāt.
Kad process ir pabeigts, jums vajadzētu būt iespējai doties 192.168.33.21 un skatiet pareizi apkalpotu lapu. Jums satura mape ir html mape WordPress direktorijā. Tagad varat sākt pievienot failus, instalēt WordPress vai kaut ko citu, ko vēlaties.
Neaizmirstiet izlasīt pilnu Vagrant rokasgrāmatu, lai iegūtu vairāk informācijas par virtuālo saimnieku izveidi, piemēram, kartēšanas domēniem mytest.dev un tā tālāk.
Vietējo vietņu atvēršana tajā pašā tīklā, izmantojot Gulp
Veidojot vietni, jums vajadzētu domāt par atsaucību. Mazos ekrānus zināmā mērā var atdarināt, sašaurinot pārlūkprogrammas logu, bet tā nav tikai tāda pati pieredze, īpaši, ja maisījumā tiek izmesti tīklenes ekrāni..
Ideālā gadījumā jūs vēlaties atvērt vietējo vietni mobilajās ierīcēs. To nav grūti izdarīt, ja jūsu ierīces atrodas vienā tīklā.
Lai to izdarītu, mēs izmantosim Gulp un Browsersync. Gulp ir attīstības automatizācijas rīks, Browsersync ir lielisks rīks, kas var ne tikai izveidot vietējo serveri, bet sinhronizēt ritināšanu, klikšķus, veidlapas un citas ierīces..
Gulp instalēšana
Gulp instalēšana ir ļoti vienkārša. Norādījumus skatiet uz sākumlapu. Viens no priekšnosacījumiem ir NPM (mezglu pakotnes pārvaldnieks). Vienkāršākais veids, kā to iegūt, ir instalēt pats Node. Norādījumus skatiet uz leju uz mezglu vietni.
Kad esat lietojis npm uzstādīšana - glibāls komandu, lai instalētu gulp visā pasaulē, jums tas jāpievieno savam projektam. Veids, kā to izdarīt, ir palaist npm instalēšana --save-dev gulp jūsu projekta saknes mapē, tad pievienojiet a gulpfile.js failu tur.
Šobrīd šajā failā pievienosim vienu rindiņu kodu, kas norāda, ka mēs paši izmantosim Gulp.
var gulp = pieprasīt (“gulp”);
Ja jūs interesē visas atdzistās lietas, Gulp var darīt, piemēram, skriptu savienošanu, Sass un LESS apkopošanu, attēlu optimizēšanu utt., Izlasiet mūsu ceļvedi. Šajā rakstā mēs koncentrēsimies uz servera izveidi.
Browsersync izmantošana
Browsersync ir Gulp paplašinājums, ko mēs varam instalēt divos posmos. Pirmkārt, izmantojam npm, lai to lejupielādētu, tad mēs to pievienojam mūsu Gulpfile.
Izsniedziet npm instalējiet pārlūkprogrammas sinhronizāciju - save-dev komandu projekta saknē terminālā; tas lejupielādēs paplašinājumu. Pēc tam atveriet Gulpfile un pievienojiet tai šādu rindiņu:
var browserSync = pieprasa ('pārlūkprogrammas sinhronizācija'). Tas ļauj Gulp zināt, ka mēs izmantosim Browsersync. Tālāk tiks definēts uzdevums, kas kontrolē, kā darbojas Browsersync.
gulp.task ('pārlūkprogrammas sinhronizācija', funkcija () browserSync.init (proxy: "192.168.33.21");); Pēc pievienošanas varat ierakstīt pārlūkprogrammas sinhronizācija lai sāktu serveri. Jums vajadzētu redzēt kaut ko līdzīgu attēlam.
Tur ir četri atsevišķi URL, kas ir šeit:
- Vietējais: Vietējais URL ir vieta, kur var sasniegt serveri tajā datorā, kurā to izmantojat. Mūsu gadījumos jūs varat izmantot
192.168.33.21vai arī jūs varat izmantot to, ko nodrošina Borwsersync. - Ārējais: Šis ir URL, kuru varat izmantot jebkurā ierīcē, kas pievienota tīklam, lai sasniegtu vietni. Tas darbosies ar jūsu vietējo mašīnu, tālruni, planšetdatoru utt.
- UI: Šis URL norāda uz pašreiz darbinātā servera opcijām. Varat redzēt savienojumus, iestatīt tīkla droseli, apskatīt vēstures vai sinhronizācijas opcijas.
- Ārējais UI: Tas ir tāds pats kā lietotāja interfeiss, bet pieejams no jebkuras tīkla ierīces.
Kāpēc izmantot Browsersync?
Tagad, kad mēs esam paveikuši šo posmu, jūs varētu domāt: kāpēc vispār izmantot Browsersync? URL no 192.168.33.21 var sasniegt arī no jebkuras ierīces. Lai gan tas tā ir, jums šajā URL jāinstalē WordPress.
Es parasti lietoju virtuālās vietnes un ir domēni, piemēram, wordpress.local vai myproject.dev. Šīs problēmas atrisina lokāli, lai mobilajā tālrunī nevarētu apmeklēt WordPress.local un redzēt to pašu rezultātu kā vietējā datorā.
Līdz šim tik labi, mums tagad ir testa vieta, kurai var piekļūt no jebkuras tīkla ierīces. Tagad ir pienācis laiks doties uz globālu un pārraidīt savu darbu internetā.
Izmantojot ngrok, lai dalītos mūsu vietējā iedzīvotāja
ngrok ir rīks, ko varat izmantot, lai izveidotu drošus tuneļus savam vietējam iedzīvotājam. Ja jūs pierakstāties (joprojām bez maksas), jūs saņemat ar paroli aizsargātus tuneļus, TCP un vairākus vienlaicīgus tuneļus.
Ngrok instalēšana
Iet uz ngrok lejupielādes lapu un paņemiet vajadzīgo versiju. To var palaist no mapes, kurā tā atrodas, vai pārvietot to uz vietu, kas ļauj to palaist no jebkuras vietas. Mac / Linux operētājsistēmā var palaist šādu komandu:
sudo mv ngrok / usr / local / bin / ngrok
Ja rodas kļūda, ka šī atrašanās vieta nav, vienkārši izveidojiet trūkstošās mapes.
Izmantojot ngrok
Par laimi šī daļa ir ļoti vienkārša. Kad jūs izmantojat serveri, izmantojot Gulp, apskatiet portu, ko tas izmanto. Iepriekš minētajā piemērā vietējais serveris darbojas http: // localhost: 3000 tas nozīmē, ka tas izmanto portu 3000. Jauna termināla cilnē palaidiet šādu komandu:
ngrok http 3000
Tas radīs pieejamu tuneli jūsu vietējam lietotājam, rezultātam jābūt tādam:
URL, kuru redzat blakus “Pārsūtīšana” jūs varat izmantot, lai piekļūtu savai vietnei no jebkuras vietas.
Secinājums
Dienas beigās mēs tagad varam darīt trīs lietas:
- Skatiet un strādājiet pie mūsu projekta lokāli
- Skatiet mūsu tīmekļa vietni, izmantojot jebkuru tīkla ierīci
- Ļaujiet citiem apskatīt mūsu darbu jebkurā vietā ar vienkāršu saiti
Tas ļaus jums koncentrēties uz attīstību, nevis sacīkstēm, lai saglabātu vietējos un testa serverus sinhronizācijā, migrējot datubāzes un citus satraucošus uzdevumus.
Ja jums ir atšķirīga metode, lai strādātu lokāli un dalītos rezultātos, informējiet mūs!
