Nurgarakenduse juurutamine Herokusse

Kuni proovite, on see alati tundunud lihtne. Olles herokus teisi rakendusi juurutanud, sattusin hiljuti Angular 4 juurutamisega vastamisi mitme väljakutsega, kuid sain lõpuks siiski hakkama. Kirjutan nüüd üksikasjalikult, kuidas seda tegin.

See artikkel näitab teile juhiseid, kuidas oma nurgelisi 2/4-rakendusi hõlpsalt Herokusse juurutada, mis veelgi olulisem - tavaliste lõksude vältimine.

See ei ole õpetus nurga õppimiseks. Eeldatakse, et olete arenduse lõpetanud ja kasutuselevõtmiseks valmis. Seadistame nurga põhiprojekti siiski algusest peale ja juurutame. See õpetus hõlmab:

  • Nurga põhiprojekti loomine
  • Automaatse juurutamise seadistamine GitHubist Heroku
  • Nurgarakenduse juurutamine Heroku serverisse

Seadistage oma nurgarakendus

Kasutades nurk-CLI, seadistage uus projekt, käivitades:

uus demo-kasutuselevõtt

Sellest alates saab meie rakendus demo-deploy. Laske mõni minut uue projekti seadistamiseks ja npm-i pakettide installimiseks.

Käivitage rakendus

Muutke kataloog uueks projektiks ja käivitage see allolevate käskude abil. See avaneb vaikimisi pordi 4200 uues brauseris. st http: // localhost: 4200.

CD-demo juurutamine
teenima

Nurgarakendus tervitab teid

Meie põhiline nurgarakendus on valmis ja töötab - kohapeal. Võimaldab tõusta githubisse

Looge selle GitHubi repo ja Push

Siin loome värske githubi hoidla ja surume oma rakenduse selle juurde.

  • Logige sisse githubisse ja looge uus hoidla. Hoidlat pole vaja README-ga initsialiseerida
  • Avage uus sakk terminalis / CMD-s. Või rakenduse käitamise peatamiseks vajutage klahve Ctrl + C. Seejärel käivitage järgmised käsud:

git távoli lisamise päritolu
lisan.
git activ -m "esialgne pühenduma"
git push -u päritolu meister

Nüüd on meie rakendus githubis.

Seadistage automaatne juurutamine GitHubist Heroku

Selle sammu eeliseks on see, et kui olete teinud muudatuse oma githubi hoidlasse, lükkab see muudatuse automaatselt teie herobaas asuvasse koodialusesse, mis jõustub seejärel veebis otse. See tähendab, et peate muudatused tegema ainult githubisse ja see on tehtud.

Kui teil veel pole kontot, looge see heroku veebisaidil. See on tasuta. Logige sisse oma juhtpaneelile ja looge uus rakendus.

looge uus rakendus herokus

Klõpsake nuppu Loo rakendus

Valige menüüs Juurutamine juurutusmeetodi jaotises GitHub. Kui te pole seda juba teinud, palub ta teil oma githubi kontole sisse logida, et see saaks sellega ühenduse luua.

Sisestage GitHubi hoidla nimi ja klõpsake nuppu Otsi. Kui repo on näidatud allpool, klõpsake nuppu Ühenda. Vioola!

Oota, oota. Veel kaks lihtsat sammu.

  1. Valige jaotises Automaatne kasutuselevõtt peaharu ja klõpsake nuppu Luba automaatne juurutamine.

2. Klõpsake jaotises Manual Deploys käsku Deploy Branch. Selle eesmärk on lükata meie värske kood heroku.

Olgu, selle etapiga oleme tõesti hakkama saanud. See võib võtta natuke aega, kuid näete, kui olete sõnumi edukalt juurutanud, näiteks nii:

Kui klõpsate Kuva, siis avatakse uus vahekaart, kuid teie rakendust ei kuvata. Järgmine toimingute seeria juhendab teid nurgarakenduse konfigureerimisel ja keerutamisel.

Seadistage oma nurgarakendus õigesti Herokusse installima

Järgnevad on tootmiseks ettevalmistatud sammud, mille abil saate rakenduse hõlpsalt ja õigesti ilma haakeseadisteta juurutada.

Veenduge, et teil oleks nurgaklipi ja nurkkompilaatori klipi uusim versioon.

Installige need oma rakendusse, käivitades oma terminalis järgmised käsud:

npm install @ nurk / cli @ viimane @ nurk / kompilaator-kl - salvesta-dev

Kopeerige oma paketis.json

"@ nurgeline / cli": "1.4.9",
"@ nurgeline / kompilaator-kl": "^ 4.4.6",

alates sõltuvusest kuni sõltuvusteni

Looge install.skript paketis.json

Lisage skriptide alla installimisjärgne käsk nii:

"postinstall": "ehitamine - aot -prod"

MUUDATUS: installijärgse käsu käivitamisel võib tekkida tõrge. See toimib selle asemel:

"heroku-postbuild": "ehitada - toode"

See käsib Herokul rakenduse Ahead Of Time (AOT) kompilaatori abil üles ehitada ja muuta see tootmisvalmis. See loob dist-kausta, kust käivitatakse meie rakenduse kõik html- ja javascript-teisendatud versioonid.

Lisage Node ja NPM mootorid

Peate lisama mootorid Node ja NPM, mida Heroku teie rakenduse käitamiseks kasutab. Eelistatavalt peaks see olema sama versioon, mis teil arvutis. Niisiis, käivitage sõlm -v ja npm -v, et saada õige versioon ja lisage see oma faili package.json nii:

Kopeerige masinakiri sõltuvustesse.

Kopeerige "masinakiri": "~ 2.3.3" devDependencies-ist sõltuvustesse, et Heroku ka teada saada, millist masinakirjaversiooni kasutada.

Installige täiustatud lahendamine 3.3.0

Käivitage käsk npm install advanced-resolve@3.3.0 --save-dev

Rakenduse käitamiseks installige server

Kohati juhitakse terminali kaudu rakenduse käivitamiseks kohalikus brauseris. Kuid me peame seadistama Expressi serveri, mis käivitab meie tootmiseks valmis rakenduse (loodud dist-kaustast) ainult selleks, et tagada kerge ja kiire laadimine.

Installige Express server, käivitades:

npm install kiirtee - salvesta

Koostage rakenduse juurfail server.js ja kleepige järgmine kood.

Alustamiskäsu muutmine

Muutke paketisjs.json käsk „start“ sõlmeks server.js, nii et see muutuks:

"start": "node server.js"

Nii näeb välja täielik pakett.json. Sõltuvalt teie rakendusepõhistest pakettidest võib teie sisu sisaldada rohkem.

Lükake muudatused GitHubisse:

lisan.
git activ -m "värskendused herokusse kasutamiseks"
git push

Sel hetkel võtab teie rakendus Heroku automaatselt muudatused GitHubist ja värskendab ennast.

Samuti uurib see teie paketti.json ja installib pakette.

See käivitab installimise järgselt ja seejärel sõlme server.js, et teie rakendust üles kerida.

Võite vaadata vahekaarti Tegevus ja avada ehituse logi, et näha, kuidas see tegelikult töötab.

Te ei tohiks ühegi teemaga kokku puutuda. Ma järgisin seda postitust kirjutades ka ja.

Vioola !! Meie nurkne rakendus on valmis ja ELU!

Selle etapi läbimise eest tänan teid.

Võite mind jälgida Twitteris või siin meediumil.

Ütle juust! … Kommenteerige allpool ka siis, kui olete mõne probleemiga kokku puutunud või soovite paremaid viise soovitada.