Kuinka asentaa kulmainen sovellus Herokuun

Se on aina 'vaikuttanut' helppolta, kunnes yrität sitä. Käyttöön muita sovelluksia herokussa, kohtasin useita haasteita Angular 4: n käyttöönotossa äskettäin, mutta pääsin lopulta läpi. Joten kirjoitan selittääksesi yksityiskohtaisesti kuinka tein sen.

Tässä artikkelissa esitetään oppaita, kuinka voit asentaa kulmikkaat 2/4-sovelluksesi helposti Herokuun, mikä tärkeintä, välttäen yleisiä sudenkuoppia.

Tämä ei ole opas, jonka avulla voit oppia kulmikkaan. Oletetaan, että olet suorittanut kehittämisen ja valmis ottamaan käyttöön. Asennamme kuitenkin peruskulmaprojektin alusta alkaen ja otamme käyttöön. Tämä opetusohjelma kattaa:

  • Peruskulmaprojektin luominen
  • Automaattisen käyttöönoton asettaminen GitHubista Herokuun
  • Asenna kulmikasovellus Heroku-palvelimelle

Asenna kulmasovelluksesi

Asenna uusi projekti kulma-CLI: n avulla ajamalla:

uusi esittely

Tästä lähtien sovelluksemme on nimeltään demo-deploy. Anna muutaman minuutin asentaa uusi projekti ja asentaa npm-paketit.

Käynnistä sovellus

Vaihda hakemisto uudeksi projektiksi ja käynnistä se alla olevien komentojen avulla. Tämä avautuu oletuksena uudessa selaimessa portissa 4200. eli http: // localhost: 4200.

CD-esittely
palvella

Kulmainen sovellus toivottaa sinut tervetulleeksi

Peruskulmasovelluksemme on valmis ja käynnissä - paikallisesti. Antaa työntyä githubiin

Luo sen GitHub-repo ja Push

Täällä luomme tuoreen github-arkiston ja työnnämme sovelluksemme siihen.

  • Kirjaudu sisään githubiin ja luo uusi arkisto. Varastoa ei tarvitse alustaa README-sovelluksella
  • Avaa uusi välilehti päätteessäsi / CMD: ssä. Tai lopeta sovelluksen käynnistäminen painamalla Ctrl + C. Suorita sitten seuraavat komennot:

git etälähetys alkuperä
git lisätä.
git activ -m "alkuperäinen sitoutuminen"
git push -u alkuperäismestari

Nyt sovelluksemme on githubissa.

Asenna automaattinen käyttöönotto GitHubista Herokuun

Tämän vaiheen etuna on, että kun siirrät muutoksen github-arkistoosi, se työntää muutoksen automaattisesti heroba-koodipohjaasi, joka sitten astuu voimaan verkossa. Tämä tarkoittaa, että sinun on vain siirrettävä muutokset githubiin ja se on tehty.

Jos sinulla ei vielä ole tiliä, luo se heroun verkkosivustolle. Se on ilmainen. Kirjaudu hallintapaneeliin ja luo uusi sovellus.

luo uusi sovellus herokussa

Napsauta Luo sovellus

Valitse Asennus-valikossa Asennusmenetelmä -kohdassa GitHub. Jos et ole vielä tehnyt tätä, se pyytää sinua kirjautumaan github-tiliisi, jotta se voi muodostaa yhteyden siihen.

Kirjoita GitHub-arkiston nimi ja napsauta Etsi. Kun repo näkyy alla, napsauta Yhdistä. Viola!

Odota. Kaksi muuta yksinkertaista vaihetta.

  1. Valitse Automaattiset käyttöönotot -kohdasta päähaara ja napsauta Ota automaattiset käyttöönotot käyttöön.

2. Napsauta Manuaaliset käyttöönotot -kohdassa Ota käyttöön haara. Tämä on työntää tuore koodi koodillemme heroku.

Okei, olemme tehneet tämän vaiheen todella. Se voi viedä hetken, mutta näyttää sinulle onnistuneesti asennetun viestin, kun se on valmis, kuten:

Jos napsautat Näytä, uusi välilehti avataan, mutta sovelluksesi ei näy. Seuraavat vaihesarjat opastavat kulmaisen sovelluksesi määrittämisessä ja kääntämisessä.

Määritä kulmikasovelluksesi ottamaan käyttöön oikein Herokussa

Seuraavat ovat valmistusvaiheita, joiden avulla sovelluksesi voidaan helposti ja asianmukaisesti ottaa käyttöön ilman kiinnikkeitä.

Varmista, että sinulla on uusin versio kulmaisesta ja kulman kääntäjästä.

Asenna ne sovellukseesi suorittamalla seuraavat komennot terminaalissa:

npm asenna @ kulma / cli @ viimeisin @ kulma / kääntäjä-kl - säästää-dev

Kopioi paketti.json

"@ kulma / cli": “1.4.9”,
"@ kulmikas / kääntäjä-cli": "^ 4.4.6",

devDependencies -stä riippuvuuksiin

Luo asennuksen jälkeinen komentosarja pakettiin.json

Lisää komentosarjoihin kohta postinstall-komento kuten:

"postinstall": "ng build --aot -prod"

MUOKKAA: Saatat saada virheen ajaessa postinstall-komentoa. Tämä toimii sen sijaan:

"heroku-postbuild": "rakentaa - tuote"

Tämä käskee Herokua rakentamaan sovelluksen Ahead Of Time (AOT) -kääntäjällä ja tekemään siitä tuotantovalmiuden. Tämä luo dist-kansion, josta kaikki sovelluksemme html- ja javascript-muunnetut versiot käynnistetään.

Lisää solmu- ja NPM-moottorit

Sinun on lisättävä Solmu- ja NPM-moottorit, joita Heroku käyttää sovelluksesi ajamiseen. Mieluiten sen pitäisi olla sama versio, joka sinulla on koneellasi. Joten suorita solmu -v ja npm -v saadaksesi oikea versio ja sisällyttämällä se paketti.json-tiedostoosi näin:

Kopioi konekirjoitus riippuvuuksiin.

Kopioi "kirjoituskirja": "~ 2.3.3" devDependencies-yksiköistä riippuvuuksiin, jotta Heroku ilmoittaa myös käytettävän kirjoitusversion.

Asenna parannettu ratkaisu 3.3.0

Suorita komento npm install advanced-resolve@3.3.0 --save-dev

Asenna palvelin sovelluksen ajamiseen

Paikallisesti suoritamme palvelun terminaalista, jotta voimme käyttää sovellustamme paikallisella selaimella. Meidän on kuitenkin asennettava Express-palvelin, joka ajaa tuotantovalmiussovelluksemme (luodusta dist-kansiosta) vain kevyen ja nopean lataamisen varmistamiseksi.

Asenna Express-palvelin suorittamalla:

npm asenna pikapolku - tallenna

Luo server.js-tiedosto sovelluksen juureen ja liitä seuraava koodi.

Vaihda käynnistyskomento

Muuta paketissa.json ”Käynnistä” -komento solmuun server.js niin, että siitä tulee:

"start": "node server.js"

Tässä on koko paketti.json näyttää. Omasi voi sisältää enemmän sovelluskohtaisista paketeista riippuen.

Lisää muutokset GitHubiin:

git lisätä.
git activ -m "päivitykset käytettäväksi herokussa"
git push

Tässä vaiheessa Heroku-sovelluksesi ottaa muutokset automaattisesti GitHubista ja päivittää itsensä.

Se tutkii myös paketti.json ja asentaa paketit.

Se suorittaa asennuksen jälkeisen asennuksen ja sitten solmu server.js kehittääksesi sovelluksesi.

Voit tarkistaa Aktiviteetti-välilehden ja avata Rakennuslokin, jotta näet kuinka se todella toimii.

Sinun ei pitäisi törmätä mihinkään asiaan. Olen seurannut kirjoittaessani myös tätä viestiä ja.

Viola!! Kulma-sovelluksemme on valmis ja elävä!

Kiitos, että olette seuranneet tähän vaiheeseen asti.

Voit seurata minua Twitterissä tai täällä Mediumissa.

Sano juusto! … Kommentoi alla, myös jos olet kohdannut ongelman tai haluat ehdottaa parempia tapoja.