Nurgarakenduse juurutamine

Esiosa: Nurgeline ja GitHub

Töötasin hiljuti lõbusate isiklike projektide kallal, luues kliendihalduseks veebipõhise tööriista ja ehitades oma esiosa rakenduse nurgelisena. Kui olete nüüd nurgeline nagu mina, siis on see üsna segane ja pole palju direktiive, kuidas oma rakendust teistele inimestele kasutamiseks välja tuua (nurgarakenduse viimine dev-keskkonnast elavasse keskkonda, mida kasutajad saavad kasutada) juurdepääs ja kasutamine).

Seetõttu uurime selle artikli jaoks, kuidas GitHubi lehtedel nurgarakendust juurutada või avaldada.

Ma eeldan, et olete juba nurgarakenduse loonud või töötate praegu selle kallal ja olete kursis nurga CLI, Giti ja Githubiga. Nurga CLI abil on lihtne juba töötava rakenduse loomine otse kastist välja. See järgib juba meie parimaid tavasid. Kui teil seda pole installitud, soovitaksin teil seda kindlasti teha.

  • Nurga CLI paigaldamine
npm install -g @ nurk / cli

Kui teil pole nurgalist projekti, mida saaksite kasutusele võtta, saate hõlpsalt luua demoprojekti ja seda järgida, käivitades käsu „ng new”, millele järgneb teie rakenduse nimi. Otsustasin nimetada kaevanduse “minu rakenduse demo”, teie nimi on erinev või saate selle nime panna ükskõik, mida soovite:

uus minu rakenduse demo

Kui see on loodud, muutke töötav kataloog rakenduse kataloogiks ja käivitage see, et veenduda, kas kõik töötab õigesti:

cd my-app-demo
serveeri - ava

Ng „serveeri”, millele järgneb „- avatud” lipp, käivitab ja avab veebibrauseri automaatselt. kui kirjutasite lihtsalt sõna "ng serve" ja kui teie rakendus on töövalmis, siis külastage lehte http: // localhost: 4200, et veenduda, kas kõik töötab hästi. Minu rakenduse demo näeb välja selline:

terminali ekraanipilt - mac

Järgmine samm on veenduda, et arvutisse on installitud ghpages pakett. Ghpages paketti kasutatakse teie ehitamisfaili juurutamiseks GitHubi lehtedele. globaalseks installimiseks käivitage järgmine käsk:

npm install -g nurk-cli-ghpages
  • Looge GitHubi hoidla
  • Lükake sisu oma GitHubi hoidlasse

Järgige allpool toodud kiireid seadistamise samme. Kaughoidla seadistamisel asendage kindlasti see tee, mis asub teie õigesse hoidlasse:

kaja "# minu-rakenduse-demo" >> README.md
git init
lisan.
git activ -m "esimene pühenduma"
git puldi lisamise päritolu https://github.com/githubusername/reponame.git
git push -u päritolu meister

Nüüd loo “ng build” käivitamine jaotuskausta, mis sisaldab kõiki faile, mis on vajalikud teie projektide käivitamiseks tootmiskeskkonnas või serveri hostis.

ehitamine - toode

Tootmislipu „- prod” lisamine ng buildi vähendab oluliselt teie pakettfailide mahtu. Kui teie rakendus ei integreerita ühtegi tüüpi taustateavet, võite lihtsalt võtta oma dist-kausta sisu ja laadida selle FTP kaudu serverisse ja teie rakendus töötab lihtsalt suurepäraselt.

Saate määrata ka järgmise käsuga oma ehitamisfailide baasviite:

ehitamine --prod --base-href // urlOfYourSubfolderDomain

Juurutage oma rakendus Githubi lehtedele

Githubi lehtedele installimiseks peame käivitama lipu base-href abil ng buildi ja see näeb välja järgmine:

ehitamine - toode - baas-href https://yourGithub-username.github.io/reponame/

Pange kindlasti oma Githubi kasutajanimi ja serverihoidla nimi, mille seostasite oma nurgarakenduse kohaliku hoidlaga. Kaevandus näeb välja selline:

Ekraanipilt terminalist - mac

On väga oluline lisada kaldkriipsu “/” hoidla nime järele raja lõppu, vastasel juhul see ei toimi.

Nüüd, kui see on tehtud, saate käsu ngh käivitada hgpage-i käsuridaliidese tööriistale, mille varem installime.

Selgub, et nurk 6 muutis nurga.jsoni "outputPath": "dist /" "outputPath" -iks: "dist / [PROJECTNAME]", mis paigutas kõik alamkausta dist kausta, mis rikub ngh funktsionaalsust.
ngh

kui kasutate nurga 6 või uuemat versiooni, käivitage:

ngh --dir dist / [PROJECTNAME]

Siin on ekraanipilt, kui jooksin ngh pärast seda, kui hävitasin oma projekti demos ehituse:

Siin on ekraanipilt, kui jooksin hiljuti projekti Angular 6 versiooniga üles ehitatud projekti juurde:

Pärast edukat avaldamist minge lihtsalt edasi ja külastage seda URL-i, mille määrasite oma base-href lipul, et näha oma juurutamist ja avaldada nurgarakendust, mis töötab. siin on minu ekraanipilt:

Nii see on! nüüd saate oma rakenduses muudatusi teha, korrake lihtsalt ehitamise ja juurutamise protsesse alati, kui soovite seda oma organisatsiooni teistega jagada või kui soovite selle lihtsalt sinna üles panna.

Kui teile see artikkel meeldis, võiks teile meeldida ka „Kuidas kahesuunalist rakendust asjade interneti jaoks luua / Pythoniga vestelda“
Terviseks !!!