Le déploiement continu est devenu essentiel dans le paysage du développement logiciel, qui évolue rapidement. Il promet des cycles de publication plus rapides, une réduction des erreurs humaines et, en fin de compte, une meilleure expérience pour l’utilisateur.

Le développement de logiciels consiste à résoudre des problèmes du monde réel à l’aide de code. Le parcours d’un logiciel, depuis sa création jusqu’à son utilisation par le client, comporte de nombreuses étapes qui exigent rapidité, sécurité et fiabilité. C’est là que le déploiement continu s’impose.

Cet article explique comment intégrer la plateforme CircleCI pour créer un flux de travail d’intégration continue et de livraison/déploiement continu (CI/CD) tout en exploitant la puissance de l’API Kinsta pour le déploiement continu d’applications – comme notre exemple React ici. Cette combinaison peut permettre de passer en douceur du développement à la production.

Comprendre le déploiement continu

Le déploiement continu est plus qu’un simple mot à la mode : c’est un changement de paradigme dans le développement de logiciels. Il s’agit d’automatiser le processus de construction, de test et de déploiement des modifications du code sur les serveurs de production.

Le pipeline CI/CD, élément fondamental du déploiement continu, orchestre l’ensemble du processus. Il comprend le contrôle des versions, les tests automatisés et le déploiement automatisé. Chaque étape est cruciale pour s’assurer que seul un code fiable et testé atteigne la production.

Qu’est-ce que CircleCI ?

CircleCI est un outil populaire pour la mise en œuvre de CI/CD. Il s’intègre aux systèmes de contrôle de version tels que GitHub, GitLab et Bitbucket, permettant aux développeurs d’automatiser l’ensemble du pipeline CI/CD. Son évolutivité, son extensibilité et sa prise en charge de divers langages de programmation en font un outil polyvalent pour des projets de toutes tailles.

Les développeurs CircleCI définissent des flux de travail qui se déclenchent automatiquement lors de la validation du code. Cela initie les processus de construction et de test et, une fois terminé avec succès, déploie le code dans l’environnement cible. Cette approche non interventionniste permet non seulement de gagner du temps mais aussi de réduire le risque d’erreurs humaines lors du déploiement.

Comprendre l’API Kinsta

L’API de Kinsta vous permet d’interagir avec les services hébergés par Kinsta de manière programmatique, le déploiement d’applications faisant partie de ses fonctionnalités. Lorsque vous travaillez avec des flux de travail CI/CD, vous utiliserez la commande cURL pour interagir avec l’API Kinsta à partir du flux de travail.

Pour utiliser l’API, vous devez avoir un compte avec au moins un site WordPress, une application ou une base de données dans MyKinsta. Vous pouvez ensuite générer une clé API pour authentifier votre accès à l’API.

Pour générer une clé API :

  1. Allez sur votre tableau de bord MyKinsta.
  2. Naviguez jusqu’à la page des clés API (Votre nom > Réglages de l’entreprise > Clés API).
  3. Cliquez sur Créer une clé API.
  4. Choisissez une date d’expiration ou définissez une date de début personnalisée et un nombre d’heures pour l’expiration de la clé.
  5. Donnez un nom unique à la clé.
  6. Cliquez sur Générer.

Après avoir créé une clé API, copiez-la et conservez-la en lieu sûr (nous vous recommandons d’utiliser un gestionnaire de mots de passe), car c’est la seule fois où elle sera révélée dans MyKinsta.

Comment déclencher un déploiement avec l’API Kinsta

Pour déclencher le déploiement d’une application sur Kinsta à l’aide de l’API, vous avez besoin de l’identifiant de l’application et du nom de la branche déployable dans le dépôt Git. Vous pouvez récupérer l’identifiant de votre application en consultant d’abord la liste de vos applications, qui fournira des détails sur chaque application, y compris son identifiant.

Vous pouvez ensuite envoyer une requête POST au point d’arrivée de l’API /applications/deployments avec une commande cURL :

curl -i -X POST 
  https://api.kinsta.com/v2/applications/deployments 
  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>' 
  -H 'Content-Type: application/json' 
  -d '{
    "app_id": "<YOUR_APP_ID>",
    "branch": "main"
  }'

Cette commande cURL sera utilisée dans le workflow.

Démarrer avec CircleCI

Vous aurez besoin d’un code source hébergé sur votre fournisseur Git préféré pour démarrer avec CircleCI. Pour ce tutoriel, nous utiliserons l’application de création de site développée pour le tutoriel Comment créer un site WordPress avec l’API Kinsta. N’hésitez pas à utiliser le dépôt en y accédant sur GitHub et en sélectionnant : Utiliser ce modèle > Créer un nouveau dépôt.

Dans l’application React, des tests unitaires sont créés pour tester chaque composant. ESLint est également utilisé pour assurer une syntaxe et un formatage de code parfaits. Mettons en place un flux de travail CI/CD qui construit, teste, s’assure que la syntaxe de notre code est correcte, et enfin déploie sur Kinsta en utilisant l’API.

Pour commencer, explorons quelques concepts clés :

  1. Les flux de travail : CircleCI est basé sur des flux de travail – des séquences définies de tâches qui décrivent les étapes de votre pipeline CI/CD. Les flux de travail peuvent inclure différentes étapes telles que la construction, les tests, le déploiement, et plus encore.
  2. Les tâches : Les tâches sont des unités de travail individuelles au sein d’un flux de travail. Chaque tâche exécute un travail spécifique, tel que la compilation de code, l’exécution de tests ou le déploiement sur un serveur. Ces tâches peuvent également comprendre diverses étapes exécutées en séquence (exécution parallèle), de sorte que si l’une d’entre elles échoue, c’est l’ensemble de la tâche qui échoue.

Étape 1 : Créer un compte CircleCI

Visitez le site web de CircleCI et créez un compte si vous n’en avez pas déjà un. Vous pouvez vous inscrire en utilisant votre fournisseur Git préféré. Cela facilite l’accès à vos dépôts sans configuration supplémentaire.

Étape 2 : Créer le fichier de configuration

Dans le répertoire racine de votre projet, créez un dossier .circleci s’il n’existe pas, et dans ce dossier, créez un fichier config.yml. Ce fichier contiendra la configuration de votre flux de travail.

Étape 3 : Configurer votre référentiel

Une fois connecté, naviguez dans votre tableau de bord CircleCI, cliquez sur Projets dans la colonne latérale de gauche pour voir une liste de dépôts, et cliquez sur le bouton Configurer un projet pour le dépôt que vous souhaitez configurer.

Configurez votre dépôt.
Configurez votre dépôt.

Ceci affichera une boîte de dialogue dans laquelle CircleCI détectera automatiquement votre fichier de configuration. Ensuite, cliquez sur le bouton Configurer le projet. CircleCI peut maintenant accéder à votre base de code et exécuter les flux de travail définis lors des changements de code.

Étape 4 : Définir la tâche de votre flux de travail

Au cœur de la mise en place de votre pipeline CircleCI se trouve cette étape cruciale : définir votre workflow dans le fichier config.yml. C’est ici que vous orchestrez la séquence d’actions que votre pipeline va exécuter. C’est comme si vous définissiez le plan de votre voyage du développement à la production.

Cela commence par la définition de la version de CircleCI, qui est actuellement 2.1:

version: 2.1

Vous aurez besoin d’une tâche build pour chaque projet React. Ce job s’attaque aux tâches fondamentales qui rendent votre code prêt à être déployé. Ces tâches comprennent l’installation des dépendances nécessaires, la compilation de votre code, l’exécution de tests pour s’assurer que tout fonctionne correctement, la vérification de la qualité du code et, enfin, le déploiement du code vers sa destination.

Puisque les projets React ont souvent besoin d’outils comme Node.js pour faire le travail, CircleCI simplifie l’accès à ces outils en les offrant sous forme d’images pré-packagées. Dans ce tutoriel, spécifiez la version de Node.js que vous souhaitez utiliser. Utilisons Node.js v20.

jobs:
  build:
    docker:
      - image: cimg/node:20.5.0

Ce travail effectuera plusieurs étapes, alors créons-les. La première étape est checkout, qui récupère la dernière version de votre code dans le référentiel afin que toutes les actions suivantes fonctionnent avec le dernier code.

steps:
  - checkout

Passons maintenant à l’essentiel : faire avancer les choses. Les étapes qui suivent checkout couvrent les tâches clés : installation des dépendances, compilation du code source, exécution des tests unitaires et utilisation d’ESLint pour inspecter votre code à la recherche d’éventuels signaux d’alerte.

steps:
  - checkout
  - run:
      name: Install Dependencies
      command: npm install
  - run:
      name: Compile Source Code
      command: npm run build
  - run:
      name: Run Unit Tests
      command: npm test
  - run:
      name: Run ESLint
      command: npm run lint

Chaque étape, comme les panneaux indicateurs d’un voyage, est nommée pour vous aider à suivre ce qui se passe lorsque le flux de travail bat son plein. Cette clarté facilite le dépannage et permet de s’assurer que tout est sur la bonne voie au fur et à mesure que votre flux de travail s’écoule.

Déclenchement du déploiement continu vers Kinsta

La dernière étape de la tâche build consiste à lancer le déploiement vers Kinsta via l’API. Cela nécessite deux valeurs : votre clé API et votre App ID, qui ne doivent pas être publiques. Ces valeurs seront conservées comme variables d’environnement dans CircleCI. Pour l’instant, définissons l’étape de déploiement dans le workflow :

- run:
    name: Deploy to Kinsta
    command: |
      curl -i -X POST 
        https://api.kinsta.com/v2/applications/deployments 
        -H "Authorization: Bearer $API_KEY" 
        -H "Content-Type: application/json" 
        -d '{
          "app_id": "'"$APP_ID"'",
          "branch": "main"
        }'

Dans le code fourni, vous exécutez la commande cURL pour déclencher le déploiement en utilisant l’identifiant de l’application stocké dans vos variables d’environnement. Rappelez-vous, les variables d’environnement sont accessibles en utilisant la syntaxe :

"$VARIABLE_NAME"

Stocker des variables d’environnement avec CircleCI

Les variables d’environnement sont cruciales pour maintenir la sécurité et la flexibilité de vos flux de travail d’intégration et de déploiement continus. Pour stocker des variables d’environnement dans CircleCI, suivez les étapes suivantes :

  1. Ouvrez votre projet pour voir tous les détails de votre pipeline, et cliquez sur le bouton Réglages du projet.
  2. Cliquez sur l’onglet Variables d’environnement dans la colonne latérale et ajoutez vos variables d’environnement.
Enregistrez les variables d'environnement.
Enregistrez les variables d’environnement.

Étape 5 : Configuration du flux de travail

Une fois vos tâches configurées et structurées en étapes organisées, la phase suivante consiste à configurer votre flux de travail. Le flux de travail agit comme un orchestrateur, guidant la séquence des tâches et incorporant des filtres et des règles spécifiques pour déterminer comment ces tâches sont exécutées.

Dans ce tutoriel, nous allons créer un flux de travail qui déclenche le travail de construction exclusivement lorsqu’il y a une poussée ou des modifications dans le code sur la branche main du dépôt :

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

Cette configuration est réalisée à l’aide de filtres, qui vous permettent de contrôler l’exécution d’une tâche en fonction de certaines conditions. Vous pouvez également incorporer des déclencheurs pour planifier le moment où le flux de travail doit s’exécuter (exemple : tous les jours à 12 heures UTC) :

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
    triggers:
      - schedule:
          cron: "0 0 * * *"

Le flux de travail ci-dessus comporte une page trigger définie avec le mot-clé schedule. L’expression cron "0 0 * * *" correspond à la programmation du flux de travail à minuit UTC tous les jours.

Dans une expression cron, il y a cinq champs séparés par des espaces, chacun représentant une unité de temps différente :

  1. Minute (0-59) : Le premier champ représente la minute de l’heure, définie sur 0 pour se déclencher au début de l’heure.
  2. Heure (0-23) : Le deuxième champ indique l’heure de la journée ; réglez-le sur 0 pour un déclenchement à minuit.
  3. Jour du mois (1-31) : Le troisième champ indique le jour, avec un astérisque (*) pour n’importe quel jour.
  4. Mois (1-12) : Le quatrième champ représente le mois, indiqué par un astérisque (*) pour n’importe quel mois.
  5. Jour de la semaine (0-6, où 0 correspond au dimanche) : Le cinquième champ indique le jour de la semaine, également marqué d’un astérisque (*) pour n’importe quel jour.

Avec cette configuration de flux de travail, vous pouvez gérer efficacement quand et dans quelles conditions vos tâches définies s’exécutent, en maintenant un pipeline CI/CD efficace et rationalisé.

Étape 6 : Validation et observation

Une fois que votre flux de travail est configuré avec succès, validez vos changements dans votre dépôt de contrôle de version. CircleCI détectera automatiquement la présence du fichier de configuration et déclenchera les flux de travail définis lors des changements de code.

Détails de l'offre CircleCI.
Détails de l’offre CircleCI.

Cliquez sur la tâche de construction pour consulter ses détails. Si vous avez plus d’une tâche, elles seront toutes listées. Lorsque vous cliquez sur une tâche, l’onglet ÉTAPES affiche toutes les étapes exécutées par la tâche et indique si elles ont réussi ou échoué.

Étapes de la tâche.
Étapes de la tâche.

Vous pouvez également cliquer sur chaque étape pour obtenir plus de détails. Lorsque vous cliquez sur l’étape Déployer vers Kinsta, vous verrez plus de détails sur la requête API et saurez si elle a abouti :

Informations sur l'étape.
Informations sur l’étape.

Lorsque vous consultez votre tableau de bord MyKinsta, vous remarquerez que le flux de travailDéploiement continu d’applications React avec CircleCI et l’API Kinsta déclenche automatiquement le déploiement. Voici à quoi ressemble votre flux de travail CircleCI complet :

version: 2.1
jobs:
  build:
    docker:
      - image: cimg/node:20.5.0
    steps:
      - checkout # Check out the code from the repository
      - run:
          name: Install Dependencies
          command: npm install
      - run:
          name: Compile Source Code
          command: npm run build
      - run:
          name: Run Unit Tests
          command: npm test
      - run:
          name: Run ESLint
          command: npm run lint
- run:
    name: Deploy to Kinsta
    command: |
      curl -i -X POST 
        https://api.kinsta.com/v2/applications/deployments 
        -H "Authorization: Bearer $API_KEY" 
        -H "Content-Type: application/json" 
        -d '{
          "app_id": "'"$APP_ID"'",
          "branch": "main"
        }'

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

Résumé

Vous avez maintenant réussi à mettre en place un processus de déploiement personnalisé pour votre application React sur Kinsta grâce à CircleCI. Cette approche vous donne plus de flexibilité et d’autorité sur vos déploiements, permettant à votre équipe d’exécuter des étapes spécialisées dans le processus.

En adoptant CircleCI, vous faites un pas important vers l’amélioration de vos méthodologies de développement. L’automatisation de votre pipeline CI/CD garantit non seulement la qualité de votre code mais accélère également vos cycles de mise en production.

Comment utilisez-vous l’API Kinsta ? Quels points d’extrémité souhaiteriez-vous voir ajoutés à l’API ? Quel tutoriel relatif à l’API Kinsta aimeriez-vous lire ensuite ?

Joel Olawanle Kinsta

Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.