Dans tout processus ou cycle de vie de développement d’une application ou d’un logiciel, nous passons par plusieurs phases. Ces phases ont pour but de minimiser un maximum les régressions ainsi que de garantir un code de qualité en production, mais pas que. Ces pratiques se regroupent sous ce qu’on appelle CI/CD. Nous allons voir comment mettre en place un CI/CD avec GitHub Actions et Netlify.

C’est quoi l’intégration et le déploiement continu ou CI/CD ?

CI pour Continuous Integration et CD pour Continuous Delivery ou Continuous Deployment pour lesquels on notera une légère différence.

C’est un ensemble de pratiques qui permettent aux équipes de développement de fournir des changements de code plus fréquemment et de manière fiable. C’est l’une des meilleures pratiques à mettre en œuvre dans un projet par les équipes DevOps. Il s’agit également d’une très bonne pratique de méthodologie agile, puisqu’elle permet aux développeurs de se concentrer sur les exigences commerciales, la qualité et la sécurité du code étant donné que les étapes de déploiement sont automatisées.

L’intégration continue va nous permettre de construire notre application en continu. Pour n’importe quelle application, le développeur qui travaillera dessus, apportera nécessairement des modifications au code source. L’intégration continue doit récupérer ce code source et préparer un build. Chaque build implique également de compiler et de valider ce code via la révision du code, les tests unitaires et les tests d’intégration, ainsi que l’empaquetage de notre application.

Après l’intégration continue, nous arrivons à la livraison continue. Admettons que dès à présent, notre application a été testée et est prête à être livrée. Celle-ci sera donc déployée en production après avoir effectué via les outils d’intégration, les tests nécessaires. Si cette étape est effectuée manuellement, elle est appelée livraison continue mais si elle est effectuée automatiquement, elle est alors appelée déploiement continu (https://aws.amazon.com/fr/devops/continuous-delivery)

Pour aller un peu plus en détails, je vous propose de lire What is CI/CD? Continuous Integration & Continuous Delivery, un article très intéressant à ce sujet.

Et GitHub Actions dans tout ça ?

GitHub a depuis peu mis en place ce qu’on appelle les GitHub Actions, permettant ainsi de mieux gérér et automatiser nos workflows en ayant un CI/CD assez complet. Ces actions vont nous permettre de créer, tester et déployer notre code directement depuis GitHub. On peut également attribuer des révisions de code, lancer des tests, gérer les branches…

GitHub Actions nous permet donc de créer des workflows personnalisés. Ces workflows sont constitués de différentes tâches appelées actions qui peuvent être exécutées automatiquement sur certains événements (pull, push, cron, webhook…).

https://github.blog/2019-08-08-github-actions-now-supports-ci-cd

Le but à travers cet article est de voir comment mettre en place un CI/CD avec GitHub Actions et un déploiement sur Netlify.

Tout au long de cet article nous allons travailler sur une application Vue.js

D’autres solutions existent, tel que CircleCI, Travis CI et bien d’autres 😉

Workflow

Il est conseillé d’avoir au moins trois environnements :

  • develop
  • staging
  • production

A noter que par sécurité certaines branches devront être protégées 😉

Supposons que sur notre application nous ayons besoin que le build se déroule comme il faut avant d’envoyer notre code. Nous allons pour le moment ajouter une action permettant le déploiement vers Netlify au succès du build et lorsqu’il s’agit d’un pull request vers la master.

workflow

Création du repo sur GitHub

github repo

Chaque repo GitHub créé a un onglet Actions.

github repo actions

Comme on peut le voir, GitHub nous recommande déjà des actions. On aura donc le choix de le faire directement depuis l’interface ou tout simplement via notre IDE puisqu’il s’agit d’un fichier .yml.

Il faut savoir que chaque workflow nécessite un fichier .yml qui est utilisé pour décrire les actions.

Création du site sur Netlify

Pour pour pouvoir déployer notre projet depuis GitHub et avant de mettre en place notre workflow, nous avons besoin de créer un projet également sur Netlify.

Il est très important de ne pas le créer depuis un repo git mais de le transférer via un glisser/déposer afin d’avoir plus de contôle pour notre CI/CD plutôt que ce qui est déjà fait par défaut par Netlify.

Ce qu’il ne faut pas faire

github repo netlify

Ce qu’il faut faire

github repo netlify drag and drop

Après le drag and drop notre projet commence à être transféré

github netlify upload

Notre site est maintenant déployé mais ne contient pas le build de notre application, puisque jusqu’à maintenant rien n’a été renseigné à ce propos.

netlify deploy site

Mise en place du workflow

Nous allons maintenant mettre en place notre workflow.

https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow

Création d’un fichier de workflow

Comme évoqué un peu plus haut, nous allons partir sur trois environnements et donc trois branches différentes, develop, staging et master. Dans cet exemple nous allons seulement faire en sorte que lorsque un pull request ou un push est fait vers la master, on s’assurera du succès du build et pourquoi pas aussi d’une commande de test. Nous aurons alors besoin de deux fichiers de workflow, l’un test.yml et l’autre production.yml à mettre dans .github/workflows

test.yml

https://gist.github.com/itsabdessalam/0797bde0135e9be1e9579913a4be2755

production.yml

https://gist.github.com/itsabdessalam/dfd8d7a4b1edb549bb5314fc2427fe34

Génération des accès

Afin que l’on puisse aisément déployer notre projet sur Netlify, nous aurons besoin du token et du api id que fournit Netlify. Ceci nous permettra de pousser notre code via Netlify CLI ou via l’utilisation d’une action toute faite.

Token

https://app.netlify.com/user/applications#personal-access-tokens

netlify token

API ID

netlify app id

Ces deux éléments NETLIFY_AUTH_TOKEN et NETLIFY_SITE_ID seront à renseigner en tant que variables d’environnement sur GitHub et qui seront accessibles via secrets dans le fichier de workflow.

Ajout des variables d’environnement depuis GitHub

github repo netlify

Déploiement en action 🚀

Il est recommandé de protéger ses branches. On part du principe que c’est déjà fait. La branche master n’est censée recevoir que les pull requests et pas de push direct par sécurité. Lorsqu’un pull request vers la master est déclenché, le workflow test est lancé etquand c’est un push qui déclenché dans le cas de la fusion de notre code, le workflow de production est lancé. Au succès de ces deux étapes notre application sera déployée sur le serveur de production, là Netlify.

Logs du build via GitHub Actions

netlify github actions

Logs du déploiement via Netlify

netlify build deploy log

Rendu de notre application

netlify deploy render

Ajouté à cela nous avons la possibilité de mettre en place des outils de test de qualité et sécurité du code tel que SonarQube, Sider

Liens utiles

J’ai également mis à disposition le repo git ici https://github.com/itsabdessalam/netlify-github-actions-ci-cd

Avant de partir…
Merci pour votre lecture ! 😊