Déployer votre app Angular sur Heroku

Afin d’offrir notre application au monde entier, il faut la déployer chez un hébergeur. Cela demande quelques étapes :

• Préparer l’application Web pour la distribution (minification et optimisation).
• Copier les fichiers vers le serveur (par ftp, sftp, ssh et git).
• Créer et initialiser une base de données.
• Vérifier que l’application est fonctionnelle.

Types d’hébergeurs

Une grande variétés d’hébergeurs existe. Certains vous donnent le contrôle total sur une machine virtuelle que vous devez configurer selon vos besoins (DigitalOcean). Le désavantage est que la mise en place demande parfois beaucoup de travail pour un débutant. D’autres hébergeurs offrent un environnement déjà préparé avec tous les outils nécessaires à la mise en place de votre application Web.

Hébergement partagé

L’hébergement partagé est souvent bon marché. Par contre, vous devrez partager les ressources du serveur avec d’autres clients. Si par exemple, un client abuse de la mémoire ou des processeurs, votre application sera ralentie. Afin d’obtenir une performance stable, il est conseillé d’éviter ces hébergeurs.

Platform as a service – PAAS

Dans le cas d’un hébergeur PAAS :

• l’entreprise cliente maintient les applications proprement dites ;
• le fournisseur cloud maintient la plate-forme d’exécution de ces applications : le matériel des serveurs, les logiciels de base (les systèmes d’exploitation, les moteurs de bases de données) et l’infrastructure (de connexion au réseau, de stockage, de sauvegarde).

Ce type de cloud computing permet de mettre à disposition des entreprises un environnement d’exécution rapidement disponible, en leur laissant la maîtrise des applications qu’elles peuvent installer, configurer et utiliser elles-mêmes. Heroku est un exemple d’hébergeur PASS.

Wikipedia

Hébergeurs d’envergure

La section suivante présente quelques hébergeurs d’envergure.

Microsoft Azure

• https://azure.microsoft.com/en-us/pricing/free-trial/

Windows Azure’s compute offerings fall into three main categories:
Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS).

Google App Engine

• https://cloud.google.com/appengine/

Amazon web services

• https://aws.amazon.com/free/

Heroku

• https://heroku.com

DigitalOcean (IAAS)

• https://www.digitalocean.com/

Déployer une application web sur Heroku

Voici les étapes nécessaire au déploiement de votre application Angular sur Heroku.

Créer un compte Heroku

Créer un compte gratuit sur Heroku (http://heroku.com)

Installer la Heroku toolbelt

Pour Ubuntu, lancer :

$ wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh

La Heroku Toolbelt est disponible pour Linux, Mac OS et Windows.

https://toolbelt.heroku.com/

Une fois la Heroku Toolbelt installée, la commande $ heroku sera disponible à partir de votre terminal.

Connectez-vous avec la Toolbelt

$ heroku login

Déployer avec angular-fullstack

Lire la documentation de votre générateur

Si vous utilisez Angular-Fullstack, le déploiement sur Heroku est simplifié avec l’option :heroku.

https://github.com/angular-fullstack/generator-angular-fullstack#heroku

Initialiser le déploiement

$ yo angular-fullstack:heroku

Grunt prépare tous les fichiers, exécute vos tests et crée un dossier /dist.
Votre application devrait être fonctionnelle!

Afficher l’application déployée

Lancer open pour l’afficher dans votre navigateur.

$ cd dist
$ heroku open

Mettre à jour votre application

Après avoir apporté des modifications à votre app, lancez :

$ grunt
$ grunt buildcontrol:heroku

Attention, si des avertissements sont affichés lorsque grunt est lancé, il faut corriger ces avertissements ou utiliser grunt –force (non recommandé).

$ grunt --force
$ grunt buildcontrol:heroku

Un lien remote est ajouté automatiquement par Heroku

Afficher les serveurs remote disponibles du dossier dist :

$ cd dist
$ git remote -v
   heroku https://git.heroku.com/pure-citadel-77753.git (fetch)
   heroku https://git.heroku.com/pure-citadel-77753.git (push)

Déployer manuellement

Voici la procédure générique pour tous types de projets à déployer sur Heroku.

• heroku login
• heroku create
• git push

Heroku login

$ heroku login 
    Enter your Heroku credentials. 
    Email: adam@example.com 
    Password (typing will be hidden): 
    Authentication successful.

Heroku create

$ cd ~/myapp
$ heroku create
    Creating stark-fog-398... done, stack is cedar-14
    http://stark-fog-398.herokuapp.com/ | https://git.heroku.com/stark-fog-398.git
    Git remote heroku added

Git push heroku

$ git add .
$ git commit -m 'my firest commit'
$ git push heroku master

Conclusion

Le déploiement d’une application sur Heroku est simple. Des outils efficaces et peu de manipulation nécessaire afin d’obtenir une application fonctionnelle.

Considérations environnementales

Les GES (gaz à effet de serre) libérés par la consommation d’énergie des serveurs est colossale. Cela qui fait d’Internet une industrie plus polluante que l’aviation. Les hébergeurs tentent d’augmenter la consommation d’énergies renouvelables, mais plusieurs grands joueurs consomment une quantité incroyable de charbon, pétrole et mazout. Ces activités mènent à une destruction massive de notre environnement. Comme développeur Web, vous pouvez agir de la façon suivant :

• Sélectionner un hébergeur vert.
• Optimiser votre code, vos images et vos algorithmes de façon à limiter votre consommation d’énergie.

Références

• Greenqloud – Greenqloud
• Cloud computing companies ranked by their use of renewable energy – GreenMonk: the blog
• Salesforce on track to being the cloud crm provider with the lowest carbon emissions – GreenMonk: the blog
• Your Data Is Dirty: The Carbon Price of Cloud Computing | TIME
• Cloud – GreenMonk: the blog
• Salesforce Announces First Major Renewable Energy Agreement – salesforce.com