Intégration Continue/Déploiement Continue (CI/CD) avec Gitlab et Heroku

7 min readApr 26, 2017

Hey, aujourd’hui nous allons voir comment faire pour passer d’une simple idée d’application à un produit en production. Avec un système de pré-production et production. J’ai choisi d’utiliser ces technologies car elles sont gratuites, un point positif lorsqu’on veut faire un MVP ou faire ces débuts.

Présentation

Tout d’abord voici le schéma qui résume le processus.

Pour commencer

Tout d’abord vous allez vous créer un compte sur Gitlab et Heroku. Ensuite créer un projet Gitlab.

Une fois le projet Gitlab crée nous allons utiliser Express pour le test. Pour aller plus vite nous utiliserons yeoman pour générer un projet Express. Placez vous dans le dossier que vous souhaitez et lancez ces commandes.

npm install yo generator-express -g

Le générateur est installé, maintenant nous allons générer le projet. Lancez la commande.

$ yo express

Durant l’installation vous pouvez sélectionner ce que vous souhaité. Pour ma part le nom du projet est “ci-cd-heroku-nodejs” .Un fois l’installation terminée vous aurez cette architecture.

Maintenant placez vous sur le dossier pour linker votre projet Gitlab avec le projet généré précédemment. Et lancez les commandes suivantes en remplaçant par votre url.

cd ci-cd-heroku-nodejs
git init
git remote add origin https://johan.pujol@gitlab.com/johan.pujol/ci-cd-heroku-nodejs.git
git add .
git commit -a -m "Init project"
git push -u origin master

Création des applications sur Heroku

Maintenant que le projet est prêt nous allons créer les applications sur Heroku pour pouvoir y déployer le code. Pourquoi “les applications” ? En fait nous allons créer 2 applications sur Heroku. La première application sera une application de staging pour la pré-production. Et la seconde sera l’application de production.

Créez donc 2 applications avec le nom de votre choix. Pour ma part j’ai choisi ces 2 noms.

staging-ci-cd-heroku-nodejs   : Pour la pré-production
ci-cd-heroku-nodejs           : Pour la production

Création d’un test unitaire

Nous allons créer un simple test unitaire pris depuis le site de Mocha.

Créez un dossier “test” à la racine du projet. Et copiez le contenu ci-dessous dans un fichier “useless.spec.js”.

var assert = require('assert');describe('Array', function () {  describe('#indexOf()', function () {   it('should return -1 when the value is not present', function (){
    
     assert.equal(-1, [1, 2, 3].indexOf(4));    }); });});

Une fois le fichier crée nous allons tester ce test :) .

$ npm test

Vous devriez avoir ce résultat.

Maintenant que tout est prêt nous allons mettre en place l’intégration continue.

Mise en place de l’intégration continue

Nous allons voir comment mettre en place l’intégration continue pour Gitlab. Par la suite je vais utiliser CI pour définir Intégration Continue et CD pour Déploiement Continue

Tout d’abord il faut créer un fichier spécifique à Gitlab pour gérer l’CI. Créez donc ce fichier à la racine du projet.

.gitlab-ci.yml

Copiez les commandes ci-dessous

image: node:6-slimunittest:
  stage: test
  script:
  - npm install
  - npm test

On va maintenant pusher le nouveau fichier sur Gitlab.

$ git add .gitlab-ci.yml
$ git commit -a -m "Ajouter du fichier CI"
$ git push origin master

Maintenant que le fichier est pushé sur le serveur de Gitlab. Rendez-vous sur votre projet Gitlab et sélectionner l’onglet “Pipelines”. Si tout est correct vous devriez avoir ceci

Pour le moment nous faisons donc seulement les test unitaires, maintenant nous allons voir comment déployer l’application sur Heroku.

Mise en place du déploiement continue

Tout d’abord rendez vous sur Heroku à cette adresse https://dashboard.heroku.com/account pour récupérer votre API KEY qui vous permettra de déployer l’application depuis Gitlab. Une fois votre API KEY copiée, il nous faut rajouter cette valeur dans les variables secrètes de votre projet Gitlab.

Sur votre projet Gitlab allez sur “Settings -> CI/CD Pipelines”, puis créer 2 variables “HEROKU_STAGING_API_KEY” et “HEROKU_PRODUCTION_API_KEY” avec la même valeur dans les 2 variables. Ces variables vont être utilisées dans le fichier “.gitlab-ci.yml”.

Maintenant nous allons modifier notre fichier “.gitlab-ci.yml” pour y ajouter le déploiement sur Heroku en phase de pré-production. Ajoutez ça dans le fichier. Mais avant ça nous allons checkout sur une nouvelle branche git.

$ git checkout -b develop

On crée cette branche pour séparer la branche de production et celle de pré-production. La branche “develop” sera destinée à la pré-production. Et la branche “master” destinée à la production. Pour faire plus propre il faudrait utiliser git-flow mais pour faire plus simple nous continuerons comme ça.

Ajoutons à notre fichier “.gitlab-ci.yml” ces lignes.

staging:
  type: deploy
  image : ruby:2.2
  script:
  - apt-get update -qy
  - apt-get install -yqq ruby ruby-dev nodejs --silent
  - gem install dpl
  - dpl --provider=heroku --app=staging-ci-cd-heroku-nodejs --api-  key=$HEROKU_STAGING_API_KEY
  only:
  - develop

Attention !
Pensez à changer “staging-ci-cd-heroku-nodejs” par votre nom de projet Heroku
staging
C’est le nom du job qui va être exécuté.

Ces lignes vont permettre de déployer sur Heroku, seulement quand un push est fait sur la branch “develop” comme l’on peut voir grâce à “only”. Pour en savoir plus sur la configuration de ce fichier rendez-vous ici.
Commitez et pushez les modifications puis retournez sur les Pipelines de Gitlab.

$ git commit -a -m "Add staging CD"
$ git push origin develop -u

Une fois terminé, tous les jobs sont passés, allez sur votre application Heroku et voilà le tour est joué, l’application est déployée https://staging-ci-cd-heroku-nodejs.herokuapp.com/.

Générer une erreur de test unitaire

Maintenant nous allons faire une erreur dans notre test pour bien montrer que si une erreur apparaît dans le test, l’application ne sera pas déployée. Mais avant ça nous allons modifier l’HTML de notre page d’index. Remplacez le “Welcome to Express” par “Bienvenue sur Express”.

Changez le test du fichier “useless.spec.js” pour le faire planter à la ligne 5 par:

assert.equal(-1, [1, 2, 3].indexOf(3));

Puis maintenant commitez et pushez.

$ git commit -a -m "Make error on test"
$ git push origin develop

Retournez sur le “Pipelines” voir le test planter.

Allez sur votre site pour voir si la modification du message d’accueil à changé : https://staging-ci-cd-heroku-nodejs.herokuapp.com/, vous verrez que non. Nous allons faire passer ce test et voir la modification du message d’accueil. Sur le fichier “useless.spec.js” remettez la valeur 4 dans le test comme ceci.

assert.equal(-1, [1, 2, 3].indexOf(4));

Puis commitez et pushez.

$ git commit -a -m "Resolve bug"
$ git push origin develop

Vous pouvez attendre que le test et le déploiement soit terminé puis rendez vous sur votre site pour voir le résultat.

Mise en place sur le production

Maintenant nous allons faire de même pour la production. Le déploiement sur le serveur de production ne se fera seulement que sur le branche “master”. Notre application sur la pré-production est maintenant fonctionnelle nous allons merger le code de “develop” dans “master”

$ git checkout master
$ git merge develop

Maintenant nous allons ajouter dans notre fichier CI les lignes pour déployer sur l’environnement de production. C’est exactement comme la pré-production mais dans l’environnement de production.

production:
  type: deploy
  image : ruby:2.2
  script:
  - apt-get update -qy
  - apt-get install -yqq ruby ruby-dev nodejs --silent
  - gem install dpl
  - dpl --provider=heroku --app=ci-cd-heroku-nodejs --api-  key=$HEROKU_PRODUCTION_API_KEY
  only:
  - master

Attention !
Pensez à changer “ci-cd-heroku-nodejs” par votre nom de projet Heroku

Une fois le fichier modifier commitez et pushez.

$ git commit -a -m "Add production CI"
$ git push origin master

Maintenant rendez vous sur votre site de production https://ci-cd-heroku-nodejs.herokuapp.com/ et le tour est joué.

Conclusion

Mettre en place un système de CI/CD est maintenant très simple avec tous les outils que l’on a à disposition, de plus comme vous l’avez vu tout est gratuit. Vous pourrez donc utiliser ces outils pour vos projets personnels, réaliser des MVPs etc…

Le code source est disponible à cette adresse : https://gitlab.com/johan.pujol/ci-cd-heroku-nodejs.