Come distribuire l'applicazione angolare su Heroku

È sempre "sembrato" facile fino a quando non lo provi. Dopo aver distribuito altre app su Heroku, di recente ho riscontrato una serie di sfide che hanno implementato Angular 4, ma alla fine sono riuscito. Quindi sto scrivendo per spiegare in dettaglio come ho fatto.

Questo articolo ti mostrerà le guide su come distribuire facilmente le tue app Angular 2/4 su Heroku, cosa ancora più importante, evitando insidie ​​comuni.

Questo non è un tutorial per aiutarti ad imparare Angular. Si presume che tu abbia completato lo sviluppo e pronto per la distribuzione. Tuttavia, configureremo il progetto angolare di base dall'inizio e la distribuzione. Questo tutorial riguarderà:

  • Creazione di un progetto angolare di base
  • Impostazione della distribuzione automatica da GitHub a Heroku
  • Distribuire l'app angolare sul server Heroku

Configura la tua applicazione angolare

Utilizzando l'interfaccia della riga di comando angolare, imposta un nuovo progetto eseguendo:

nuova distribuzione demo

Da questo, la nostra applicazione si chiamerà demo-deploy. Attendere alcuni minuti per impostare il nuovo progetto e installare i pacchetti npm.

Avvia applicazione

Cambia la directory in un nuovo progetto e avvialo usando i comandi seguenti. Questo si aprirà nel nuovo browser sulla porta 4200 per impostazione predefinita. ovvero http: // localhost: 4200.

cd demo-deploy
servire

L'app angolare ti dà il benvenuto

La nostra app angolare di base è pronta e funzionante - localmente. Spingiamo a github

Crea il suo repository GitHub e Push

Qui creeremo un nuovo repository github e spingeremo la nostra app ad esso.

  • Accedi a github e crea un nuovo repository. Non è necessario inizializzare il repository con README
  • Apri una nuova scheda nel tuo terminale / CMD. Oppure premi Ctrl + C per interrompere l'esecuzione dell'app. Quindi eseguire i seguenti comandi:

git remote aggiungi origin
git add.
git commit -m "commit iniziale"
git push -u origine master

Ora la nostra app è su github.

Imposta la distribuzione automatica da GitHub a Heroku

Il vantaggio di questo passaggio è che, una volta che fai una modifica al tuo repository github, invia automaticamente la modifica alla tua base di codice su heroku, che poi ha effetto dal vivo sul web. Ciò significa che dovrai solo inviare le tue modifiche a github e il suo fatto.

Se non hai ancora un account, creane uno sul sito Web di Heroku. È gratis. Accedi alla tua dashboard e crea una nuova app.

crea una nuova app su heroku

Fai clic su Crea app

Nel menu Distribuisci, in Metodo di distribuzione, selezionare GitHub. Se non lo hai già fatto, ti verrà chiesto di accedere al tuo account github in modo che possa connettersi ad esso.

Immettere il nome del repository GitHub e fare clic su Cerca. Una volta mostrato il repository di seguito, fare clic su Connetti. Viola!

Aspetta. Altri due semplici passaggi.

  1. In Distribuzioni automatiche, selezionare il ramo principale e fare clic su Abilita distribuzioni automatiche.

2. In Distribuzioni manuali, fare clic su Distribuisci ramo. Questo per spingere il nostro nuovo codice su heroku.

Okay, abbiamo davvero finito con questo palcoscenico. Potrebbe volerci un po 'di tempo, ma una volta fatto ti mostrerà il messaggio distribuito correttamente, in questo modo:

Se fai clic su Visualizza, verrà aperta una nuova scheda ma l'app non verrà visualizzata. La prossima serie di passaggi ti guiderà nella configurazione e nella rotazione della tua app angolare.

Configura la tua app angolare per distribuire correttamente su Heroku

Di seguito sono riportati i passaggi pronti per la produzione per distribuire facilmente e correttamente l'app senza intoppi.

Assicurarsi di disporre dell'ultima versione di cli angolare e cli compilatore angolare.

Installali nella tua applicazione eseguendo questi comandi nel tuo terminale:

npm install @ angular / cli @ latest @ angular / compilatore-cli --save-dev

Nel tuo package.json, copia

"@ angular / cli”: “1.4.9”,
"@ angular / compiler-cli": "^ 4.4.6",

dalle devDipendenze alle dipendenze

Crea uno script postinstallazione in package.json

In "script", aggiungi un comando postinstall in questo modo:

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

EDIT: è possibile che venga visualizzato un errore durante l'esecuzione del comando postinstall. Questo funziona invece:

"heroku-postbuild": "ng build --prod"

Questo dice a Heroku di compilare l'applicazione usando il compilatore Ahead Of Time (AOT) e renderlo pronto per la produzione. Questo creerà una cartella dist da cui verranno lanciate tutte le versioni convertite html e javascript della nostra app.

Aggiungi i motori Node e NPM

Dovrai aggiungere i motori Node e NPM che Heroku utilizzerà per eseguire la tua applicazione. Preferibilmente, dovrebbe essere la stessa versione che hai sul tuo computer. Quindi, esegui il nodo -v e npm -v per ottenere la versione corretta e includila nel tuo file package.json in questo modo:

Copia il dattiloscritto nelle dipendenze.

Copia "dattiloscritto": "~ 2.3.3" da devDependencies a dipendenze per informare Heroku anche quale versione di dattiloscritto usare.

Installa Enhanced Resolve 3.3.0

Esegui il comando npm install [email protected] --save-dev

Installa il server per eseguire la tua app

A livello locale eseguiamo servizi dal terminale per eseguire la nostra app sul browser locale. Ma dovremo configurare un server Express che eseguirà la nostra app pronta per la produzione (dalla cartella dist creata) solo per garantire un caricamento leggero e veloce.

Installa il server Express eseguendo:

npm install express path --save

Creare un file server.js nella radice dell'applicazione e incollare il seguente codice.

Cambia comando di avvio

In package.json, modifica il comando "start" in node server.js in modo che diventi:

"start": "node server.js"

Ecco come appare il package.json completo. Il tuo può contenere di più a seconda dei pacchetti specifici dell'applicazione.

Invia modifiche a GitHub:

git add.
git commit -m "aggiornamenti da distribuire a heroku"
git push

A questo punto, l'applicazione su Heroku prenderà automaticamente le modifiche da GitHub e si aggiornerà automaticamente.

Inoltre, esaminerà il tuo package.json e installerà i pacchetti.

Eseguirà la postinstallazione e, quindi, node server.js per far girare l'applicazione.

Puoi controllare la scheda Attività e aprire il registro di costruzione per vedere come viene effettivamente eseguito.

Non dovresti riscontrare alcun problema. Ho seguito anche durante la scrittura di questo post e.

Viola!! La nostra app Angular è pronta e LIVE!

Per aver seguito fino a questo punto, grazie.

Puoi seguirmi su Twitter o qui su Medium.

Di 'Cheese! ... commenta di seguito, anche se hai riscontrato problemi o vuoi suggerire modi migliori.