Comment déployer une application angulaire sur Heroku

Cela a toujours semblé facile jusqu’à ce que vous l’essayiez. Après avoir déployé d'autres applications sur heroku, j'ai récemment rencontré une série de problèmes lors du déploiement de Angular 4, mais j'ai finalement réussi. Je vous écris donc pour expliquer en détail comment je l’ai fait.

Cet article va vous montrer des guides sur le déploiement facile de vos applications Angular 2/4 sur Heroku, plus important encore, en évitant les pièges courants.

Ce n'est pas un tutoriel pour vous aider à apprendre Angular. On supposera que vous avez terminé le développement et que vous êtes prêt à être déployé. Cependant, nous allons configurer un projet angulaire de base à partir de démarrer et déployer. Ce tutoriel couvrira:

  • Création d'un projet angulaire de base
  • Paramétrage du déploiement automatique de GitHub vers Heroku
  • Déploiement de l'application Angular sur le serveur Heroku

Configurez votre application angulaire

En utilisant la CLI angulaire, configurez un nouveau projet en exécutant:

ng nouvelle démo-déployer

À partir de là, notre application s'appellera demo-deploy. Prévoyez quelques minutes pour configurer le nouveau projet et installer les packages npm.

Lancer l'application

Changez le répertoire dans le nouveau projet et lancez-le en utilisant les commandes ci-dessous. Cela s'ouvrira par défaut dans le nouveau navigateur sur le port 4200. c'est-à-dire http: // localhost: 4200.

cd démo-deploy
ng servir

App angulaire vous souhaite la bienvenue

Notre application angulaire de base est prête et opérationnelle - localement. Permet de pousser au github

Créer son repo GitHub et Push

Ici, nous allons créer un nouveau référentiel github et y installer notre application.

  • Connectez-vous à github et créez un nouveau référentiel. Pas besoin d'initialiser le référentiel avec README
  • Ouvrez un nouvel onglet dans votre terminal / CMD. Ou appuyez sur Ctrl + C pour arrêter l'application en cours d'exécution. Puis exécutez les commandes suivantes:

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

Maintenant, notre application est sur github.

Configurer le déploiement automatique de GitHub vers Heroku

L’avantage de cette étape est qu’une fois que vous appliquez une modification à votre référentiel github, elle le répercute automatiquement sur votre base de code sur heroku, qui prend effet en direct sur le Web. Cela signifie que vous devrez simplement pousser vos modifications dans github et le faire.

Si vous n'avez pas encore de compte, créez-en un sur le site Web de heroku. C'est gratuit. Connectez-vous à votre tableau de bord et créez une nouvelle application.

créer une nouvelle application sur heroku

Cliquez sur Créer une application

Dans le menu Deploy, sous Méthode de déploiement, sélectionnez GitHub. Si vous ne l'avez pas déjà fait, il vous sera demandé de vous connecter à votre compte github afin qu'il puisse s'y connecter.

Entrez le nom du référentiel GitHub et cliquez sur Rechercher. Une fois que le référentiel est affiché ci-dessous, cliquez sur Connecter. Alto!

Euh, attends. Deux autres étapes simples.

  1. Sous Déploiements automatiques, sélectionnez la branche principale et cliquez sur Activer les déploiements automatiques.

2. Sous Manual Deploys, cliquez sur Deploy Branch. Ceci est de pousser notre nouveau code à heroku.

Ok, nous en avons vraiment fini avec cette étape. Cela peut prendre un peu de temps mais vous montrera le message déployé avec succès une fois terminé, comme ceci:

Si vous cliquez sur Afficher, un nouvel onglet s'ouvrira mais votre application ne s'affichera pas. La prochaine série d’étapes vous guidera sur la configuration et l’amélioration de votre application angulaire.

Configurez votre application angulaire pour qu'elle se déploie correctement sur Heroku

Vous trouverez ci-dessous des étapes prêtes à la production pour déployer facilement et correctement votre application sans incident.

Assurez-vous de disposer de la dernière version de angular cli et angular compiler cli.

Installez-les dans votre application en exécutant ces commandes dans votre terminal:

npm install @ angular / cli @ dernière @ angular / compiler-cli --save-dev

Dans votre package.json, copiez

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

de devDependencies aux dépendances

Créer un script postinstall dans package.json

Sous “scripts”, ajoutez une commande postinstall comme ceci:

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

EDIT: Vous pourriez avoir une erreur en exécutant la commande postinstall. Cela fonctionne à la place:

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

Cela demande à Heroku de créer l'application à l'aide du compilateur AOT (Ahead Of Time) et de la rendre prête pour la production. Cela créera un dossier dist à partir duquel toutes les versions de notre application converties au format HTML et JavaScript seront lancées.

Ajouter des moteurs de nœud et NPM

Vous devrez ajouter les moteurs de nœud et de NPM que Heroku utilisera pour exécuter votre application. De préférence, il devrait s'agir de la même version que vous avez sur votre machine. Donc, exécutez node -v et npm -v pour obtenir la version correcte et l'inclure dans votre fichier package.json de la manière suivante:

Copiez le texte dactylographié dans les dépendances.

Copiez "typescript": "~ 2.3.3" de devDependencies vers des dépendances afin d'informer également Heroku de la version à utiliser.

Installer Enhanced Resolve 3.3.0

Exécutez la commande npm install enhanced-resolve@3.3.0 --save-dev

Installer le serveur pour exécuter votre application

Localement, nous exécutons ng serve from terminal pour exécuter notre application sur un navigateur local. Mais nous devrons configurer un serveur Express qui exécutera notre application prête à la production (à partir du dossier dist créé) uniquement pour garantir un chargement léger et rapide.

Installez Express Server en lançant:

npm install express path --save

Créez un fichier server.js à la racine de l'application et collez le code suivant.

Changer la commande de démarrage

Dans package.json, remplacez la commande "start" par node server.js afin qu'il devienne:

"start": "node server.js"

Voici à quoi ressemble le package.json complet. Le vôtre peut en contenir davantage en fonction des packages spécifiques à votre application.

Transmettez les modifications à GitHub:

git add.
git commit -m "mises à jour à déployer sur heroku"
git push

À ce stade, votre application sur Heroku prendra automatiquement les modifications de GitHub et se mettra à jour.

En outre, il examinera votre package.json et installera des packages.

Il lancera le postinstall puis le noeud server.js pour lancer votre application.

Vous pouvez vérifier l'onglet Activité et ouvrir le journal de construction pour voir comment il fonctionne.

Vous ne devriez rencontrer aucun problème. J'ai suivi tout en écrivant ce post aussi et.

Alto!! Notre application angulaire est prête et en direct!

Pour avoir suivi jusqu'à cette étape, merci.

Vous pouvez me suivre sur Twitter ou ici sur Medium.

Dites "cheese! … Commentez ci-dessous, même si vous rencontrez un problème ou souhaitez suggérer de meilleures méthodes.