L'intégration continue et le déploiement continu avec .gitlab-ci.yml

Dans ce cours, nous allons aborder l'intégration continue (CI) et le déploiement continu (CD) avec GitLab CI/CD en utilisant le fichier .gitlab-ci.yml. Nous allons voir comment configurer différents jobs pour installer les dépendances, exécuter des linters, construire le code et déployer l'application. Nous suivrons une approche progressive en commençant par le job d'installation, puis en ajoutant des jobs pour linter le code, construire l'application et enfin déployer le code.

Configuration initiale avec le fichier .gitlab-ci.yml

Le fichier .gitlab-ci.yml est un fichier de configuration utilisé par GitLab CI/CD pour définir les différents jobs et étapes d'un pipeline de construction et de déploiement. Il se trouve à la racine de votre projet GitLab. Voici un exemple de configuration initiale :

stages:
    - install
    - lint
    - build
    - deploy

Dans cet exemple, nous définissons les différents étapes du pipeline dans l'ordre : installation, linter, construction et déploiement. Ces étapes seront exécutées séquentiellement lors du pipeline.

Job Install

Le job Install est responsable de l'installation des dépendances nécessaires à l'exécution de votre application. Cela peut inclure l'installation des modules Node.js, la configuration de variables d'environnement, etc. Voici un exemple de configuration pour le job Install :

job_install:
    stage: install
    script:
        - npm ci

Dans cet exemple, nous définissons un job nommé job_install dans l'étape install. Le script du job exécute la commande npm ci pour installer les dépendances à partir du fichier package-lock.json.

Job eslint

Le job eslint est utilisé pour exécuter un linter sur le code source de votre application afin de détecter les erreurs de style et les problèmes potentiels. Voici un exemple de configuration pour le job eslint :

job_eslint:
    stage: lint
    script:
        - npm run lint

Dans cet exemple, nous définissons un job nommé job_eslint dans l'étape lint. Le script du job exécute la commande npm run lint qui exécute le linter configuré dans votre projet.

Job Build

Le job Build est responsable de la construction de votre application. Cela peut inclure la compilation du code source, la génération de fichiers statiques, etc. Voici un exemple de configuration pour le job Build :

job_build:
    stage: build
    script:
        - npm run build

Dans cet exemple, nous définissons un job nommé job_build dans l'étape build. Le script du job exécute la commande npm run build qui effectue la construction de l'application selon la configuration définie dans votre projet.

Job Déploy

Le job Déploy est responsable du déploiement de votre application sur un environnement cible, tel qu'un serveur de production ou de préproduction. Le déploiement peut se faire via SSH, FTP, ou tout autre mécanisme de déploiement pris en charge par GitLab CI/CD. Voici un exemple de configuration pour le job Déploy :

job_deploy:
    stage: deploy
    script:
        - npm run deploy

Dans cet exemple, nous définissons un job nommé job_deploy dans l'étape deploy. Le script du job exécute la commande npm run deploy qui effectue le déploiement de l'application selon la configuration définie dans votre projet.

Exemple complet

Voici un exemple de fichier complet de configuration .gitlab-ci.yml qui inclut les jobs d'installation, de linting, de construction et de déploiement :

image: node:18
 
stages:
    - install
    - lint
    - build
    - deploy
 
before_script:
    - echo "Setup before running jobs..."
 
after_script:
    - echo "Cleanup after running jobs..."
 
job_install:
    stage: install
    script:
        - npm ci
 
job_eslint:
    stage: lint
    script:
        - npm run lint
 
job_build:
    stage: build
    script:
        - npm run build
 
job_deploy:
    stage: deploy
    script:
        - npm run deploy
    needs:
        - job_build

Dans cet exemple, nous avons :

• Défini l'image node:18 de manière globale, ce qui signifie que tous les jobs utiliseront cette image.
• Ajouté une section before_script qui sera exécutée avant le début de chaque job. Ici, nous avons simplement ajouté une étape d'impression pour illustrer son utilisation. Vous pouvez y ajouter d'autres commandes ou configurations spécifiques à votre projet.
• Ajouté une section after_script qui sera exécutée après la fin de chaque job. Encore une fois, nous avons ajouté une étape d'impression pour l'exemple.
• Configuré les jobs job_install, job_eslint, job_build et job_deploy comme précédemment.
• Ajouté une dépendance (needs) entre le job job_deploy et le job job_build. Cela signifie que le job job_deploy ne sera exécuté que lorsque le job job_build sera terminé avec succès.

N'oubliez pas d'adapter cette configuration en fonction de vos besoins spécifiques, tels que les commandes de build, les scripts de déploiement, etc. Vous pouvez également ajouter d'autres jobs, étapes et dépendances selon vos exigences.

Assurez-vous de consulter la documentation officielle de GitLab CI/CD (opens in a new tab) pour en savoir plus sur les fonctionnalités avancées, les variables d'environnement, les déploiements spécifiques, et bien plus encore.

Conclusion

Dans ce cours, nous avons exploré l'intégration continue (CI) et le déploiement continu (CD) avec GitLab CI/CD en utilisant le fichier .gitlab-ci.yml. Nous avons configuré des jobs pour installer les dépendances, exécuter des linters, construire l'application et déployer le code. Cela permet d'automatiser le processus de développement, de réduire les erreurs et d'améliorer l'efficacité de votre workflow de développement. Continuez à explorer la documentation de GitLab CI/CD pour en apprendre davantage sur les fonctionnalités avancées et les bonnes pratiques pour l'intégration et le déploiement continus dans vos projets React et JavaScript.