{"id":72112,"date":"2023-08-21T12:59:46","date_gmt":"2023-08-21T11:59:46","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=72112&preview=true&preview_id=72112"},"modified":"2023-08-22T06:12:35","modified_gmt":"2023-08-22T05:12:35","slug":"deploiement-continu-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/deploiement-continu-react\/","title":{"rendered":"D\u00e9ploiement continu d’applications React avec CircleCI et Kinsta API"},"content":{"rendered":"

Le d\u00e9ploiement continu est devenu essentiel dans le paysage du d\u00e9veloppement logiciel<\/a>, qui \u00e9volue rapidement. Il promet des cycles de publication plus rapides, une r\u00e9duction des erreurs humaines et, en fin de compte, une meilleure exp\u00e9rience pour l’utilisateur.<\/p>\n

Le d\u00e9veloppement de logiciels consiste \u00e0 r\u00e9soudre des probl\u00e8mes du monde r\u00e9el \u00e0 l’aide de code. Le parcours d’un logiciel, depuis sa cr\u00e9ation jusqu’\u00e0 son utilisation par le client, comporte de nombreuses \u00e9tapes qui exigent rapidit\u00e9, s\u00e9curit\u00e9 et fiabilit\u00e9. C’est l\u00e0 que le d\u00e9ploiement continu s’impose.<\/p>\n

Cet article explique comment int\u00e9grer la plateforme CircleCI<\/a> pour cr\u00e9er un flux de travail d’int\u00e9gration continue et de livraison\/d\u00e9ploiement continu (CI\/CD<\/a>) tout en exploitant la puissance de l’API Kinsta<\/a> pour le d\u00e9ploiement continu d’applications – comme notre exemple React ici. Cette combinaison peut permettre de passer en douceur du d\u00e9veloppement \u00e0 la production.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comprendre le d\u00e9ploiement continu<\/h2>\n

Le d\u00e9ploiement continu est plus qu’un simple mot \u00e0 la mode : c’est un changement de paradigme dans le d\u00e9veloppement de logiciels. Il s’agit d’automatiser le processus de construction, de test et de d\u00e9ploiement des modifications du code sur les serveurs de production.<\/p>\n

Le pipeline CI\/CD, \u00e9l\u00e9ment fondamental du d\u00e9ploiement continu, orchestre l’ensemble du processus. Il comprend le contr\u00f4le des versions, les tests automatis\u00e9s et le d\u00e9ploiement automatis\u00e9. Chaque \u00e9tape est cruciale pour s’assurer que seul un code fiable et test\u00e9 atteigne la production.<\/p>\n

Qu’est-ce que CircleCI ?<\/h2>\n

CircleCI est un outil populaire pour la mise en \u0153uvre de CI\/CD. Il s’int\u00e8gre aux syst\u00e8mes de contr\u00f4le de version tels que GitHub<\/a>, GitLab<\/a> et Bitbucket<\/a>, permettant aux d\u00e9veloppeurs d’automatiser l’ensemble du pipeline CI\/CD. Son \u00e9volutivit\u00e9, son extensibilit\u00e9 et sa prise en charge de divers langages de programmation<\/a> en font un outil polyvalent pour des projets de toutes tailles.<\/p>\n

Les d\u00e9veloppeurs<\/a> CircleCI d\u00e9finissent des flux de travail qui se d\u00e9clenchent automatiquement lors de la validation du code. Cela initie les processus de construction et de test et, une fois termin\u00e9 avec succ\u00e8s, d\u00e9ploie le code dans l’environnement cible. Cette approche non interventionniste permet non seulement de gagner du temps mais aussi de r\u00e9duire le risque d’erreurs humaines lors du d\u00e9ploiement.<\/p>\n

Comprendre l’API Kinsta<\/h2>\n

L’API de Kinsta<\/a> vous permet d’interagir avec les services h\u00e9berg\u00e9s par Kinsta de mani\u00e8re programmatique, le d\u00e9ploiement d’applications faisant partie de ses fonctionnalit\u00e9s. Lorsque vous travaillez avec des flux de travail CI\/CD, vous utiliserez la commande cURL pour interagir avec l’API Kinsta \u00e0 partir du flux de travail.<\/p>\n

Pour utiliser l’API, vous devez avoir un compte avec au moins un site WordPress<\/a>, une application<\/a> ou une base de donn\u00e9es<\/a> dans MyKinsta. Vous pouvez ensuite g\u00e9n\u00e9rer une cl\u00e9 API pour authentifier votre acc\u00e8s \u00e0 l’API.<\/p>\n

Pour g\u00e9n\u00e9rer une cl\u00e9 API :<\/p>\n

    \n
  1. Allez sur votre tableau de bord MyKinsta.<\/li>\n
  2. Naviguez jusqu’\u00e0 la page des cl\u00e9s API <\/strong>(Votre nom<\/strong> > R\u00e9glages de l’entreprise<\/strong> > Cl\u00e9s API<\/strong>).<\/li>\n
  3. Cliquez sur Cr\u00e9er une cl\u00e9 API<\/strong>.<\/li>\n
  4. Choisissez une date d’expiration ou d\u00e9finissez une date de d\u00e9but personnalis\u00e9e et un nombre d’heures pour l’expiration de la cl\u00e9.<\/li>\n
  5. Donnez un nom unique \u00e0 la cl\u00e9.<\/li>\n
  6. Cliquez sur G\u00e9n\u00e9rer<\/strong>.<\/li>\n<\/ol>\n

    Apr\u00e8s avoir cr\u00e9\u00e9 une cl\u00e9 API, copiez-la et conservez-la en lieu s\u00fbr (nous vous recommandons d’utiliser un gestionnaire de mots de passe<\/a>), car c’est la seule fois o\u00f9<\/strong> elle sera r\u00e9v\u00e9l\u00e9e dans MyKinsta.<\/p>\n

    Comment d\u00e9clencher un d\u00e9ploiement avec l’API Kinsta<\/h3>\n

    Pour d\u00e9clencher le d\u00e9ploiement d’une application sur Kinsta \u00e0 l’aide de l’API, vous avez besoin de l’identifiant de l’application et du nom de la branche d\u00e9ployable dans le d\u00e9p\u00f4t Git. Vous pouvez r\u00e9cup\u00e9rer l’identifiant de votre application en consultant d’abord <\/a>la liste de vos applications<\/a>, qui fournira des d\u00e9tails sur chaque application, y compris son identifiant.<\/p>\n

    Vous pouvez ensuite envoyer une requ\u00eate POST<\/a> au point d’arriv\u00e9e de l’API \/applications\/deployments<\/a><\/code> avec une commande cURL :<\/p>\n

    curl -i -X POST \n  https:\/\/api.kinsta.com\/v2\/applications\/deployments \n  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>' \n  -H 'Content-Type: application\/json' \n  -d '{\n    \"app_id\": \"<YOUR_APP_ID>\",\n    \"branch\": \"main\"\n  }'<\/code><\/pre>\n
    Cette commande cURL sera utilis\u00e9e dans le workflow.<\/p>\n
    D\u00e9marrer avec CircleCI<\/h2>\n
    Vous aurez besoin d’un code source h\u00e9berg\u00e9 sur votre fournisseur Git pr\u00e9f\u00e9r\u00e9 pour d\u00e9marrer avec CircleCI. Pour ce tutoriel, nous utiliserons l’application de cr\u00e9ation de site<\/a> d\u00e9velopp\u00e9e pour le tutoriel Comment cr\u00e9er un site WordPress avec l’API Kinsta<\/a>. N’h\u00e9sitez pas \u00e0 utiliser le d\u00e9p\u00f4t en y acc\u00e9dant sur GitHub et en s\u00e9lectionnant : Utiliser ce mod\u00e8le<\/strong> > Cr\u00e9er un nouveau d\u00e9p\u00f4t<\/strong>.<\/p>\n
    Dans l’application React<\/a>, des tests unitaires sont cr\u00e9\u00e9s pour tester chaque composant. ESLint<\/a> est \u00e9galement utilis\u00e9 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\u00e9ploie sur Kinsta en utilisant l’API.<\/p>\n
    Pour commencer, explorons quelques concepts cl\u00e9s :<\/p>\n
      \n
    1. Les flux de travail :<\/strong> CircleCI est bas\u00e9 sur des flux de travail – des s\u00e9quences d\u00e9finies de t\u00e2ches qui d\u00e9crivent les \u00e9tapes de votre pipeline CI\/CD. Les flux de travail peuvent inclure diff\u00e9rentes \u00e9tapes telles que la construction, les tests, le d\u00e9ploiement, et plus encore.<\/li>\n
    2. Les t\u00e2ches :<\/strong> Les t\u00e2ches sont des unit\u00e9s de travail individuelles au sein d’un flux de travail. Chaque t\u00e2che ex\u00e9cute un travail sp\u00e9cifique, tel que la compilation de code, l’ex\u00e9cution de tests ou le d\u00e9ploiement sur un serveur. Ces t\u00e2ches peuvent \u00e9galement comprendre diverses \u00e9tapes ex\u00e9cut\u00e9es en s\u00e9quence (ex\u00e9cution parall\u00e8le), de sorte que si l’une d’entre elles \u00e9choue, c’est l’ensemble de la t\u00e2che qui \u00e9choue.<\/li>\n<\/ol>\n
      \u00c9tape 1 : Cr\u00e9er un compte CircleCI<\/h3>\n
      Visitez le site web de CircleCI et cr\u00e9ez un compte si vous n’en avez pas d\u00e9j\u00e0 un. Vous pouvez vous inscrire en utilisant votre fournisseur Git pr\u00e9f\u00e9r\u00e9. Cela facilite l’acc\u00e8s \u00e0 vos d\u00e9p\u00f4ts sans configuration suppl\u00e9mentaire.<\/p>\n
      \u00c9tape 2 : Cr\u00e9er le fichier de configuration<\/h3>\n
      Dans le r\u00e9pertoire racine de votre projet, cr\u00e9ez un dossier .circleci<\/strong> s’il n’existe pas, et dans ce dossier, cr\u00e9ez un fichier config.yml<\/strong>. Ce fichier contiendra la configuration de votre flux de travail.<\/p>\n
      \u00c9tape 3 : Configurer votre r\u00e9f\u00e9rentiel<\/h3>\n
      Une fois connect\u00e9, naviguez dans votre tableau de bord CircleCI<\/a>, cliquez sur Projets<\/strong> dans la colonne lat\u00e9rale de gauche pour voir une liste de d\u00e9p\u00f4ts, et cliquez sur le bouton Configurer un projet<\/strong> pour le d\u00e9p\u00f4t que vous souhaitez configurer.<\/p>\n
      \"Configurez
      Configurez votre d\u00e9p\u00f4t.<\/figcaption><\/figure>\n
      Ceci affichera une bo\u00eete de dialogue dans laquelle CircleCI d\u00e9tectera automatiquement votre fichier de configuration. Ensuite, cliquez sur le bouton Configurer<\/strong> le projet. CircleCI peut maintenant acc\u00e9der \u00e0 votre base de code et ex\u00e9cuter les flux de travail d\u00e9finis lors des changements de code.<\/p>\n
      \u00c9tape 4 : D\u00e9finir la t\u00e2che de votre flux de travail<\/h3>\n
      Au c\u0153ur de la mise en place de votre pipeline CircleCI se trouve cette \u00e9tape cruciale : d\u00e9finir votre workflow dans le fichier config.yml<\/strong>. C’est ici que vous orchestrez la s\u00e9quence d’actions que votre pipeline va ex\u00e9cuter. C’est comme si vous d\u00e9finissiez le plan de votre voyage du d\u00e9veloppement \u00e0 la production.<\/p>\n
      Cela commence par la d\u00e9finition de la version de CircleCI, qui est actuellement 2.1<\/code>:<\/p>\n
      version: 2.1<\/code><\/pre>\n
      Vous aurez besoin d’une t\u00e2che build<\/code> pour chaque projet React. Ce job s’attaque aux t\u00e2ches fondamentales qui rendent votre code pr\u00eat \u00e0 \u00eatre d\u00e9ploy\u00e9. Ces t\u00e2ches comprennent l’installation des d\u00e9pendances n\u00e9cessaires, la compilation de votre code, l’ex\u00e9cution de tests pour s’assurer que tout fonctionne correctement, la v\u00e9rification de la qualit\u00e9 du code et, enfin, le d\u00e9ploiement du code vers sa destination.<\/p>\n
      Puisque les projets React ont souvent besoin d’outils comme Node.js<\/a> pour faire le travail, CircleCI simplifie l’acc\u00e8s \u00e0 ces outils en les offrant sous forme d’images pr\u00e9-packag\u00e9es<\/a>. Dans ce tutoriel, sp\u00e9cifiez la version de Node.js que vous souhaitez utiliser. Utilisons Node.js v20<\/a>.<\/p>\n
      jobs:\n  build:\n    docker:\n      - image: cimg\/node:20.5.0<\/code><\/pre>\n
      Ce travail effectuera plusieurs \u00e9tapes, alors cr\u00e9ons-les. La premi\u00e8re \u00e9tape est checkout<\/code>, qui r\u00e9cup\u00e8re la derni\u00e8re version de votre code dans le r\u00e9f\u00e9rentiel afin que toutes les actions suivantes fonctionnent avec le dernier code.<\/p>\n
      steps:\n  - checkout<\/code><\/pre>\n
      Passons maintenant \u00e0 l’essentiel : faire avancer les choses. Les \u00e9tapes qui suivent checkout<\/code> couvrent les t\u00e2ches cl\u00e9s : installation des d\u00e9pendances, compilation du code source, ex\u00e9cution des tests unitaires et utilisation d’ESLint pour inspecter votre code \u00e0 la recherche d’\u00e9ventuels signaux d’alerte.<\/p>\n
      steps:\n  - checkout\n  - run:\n      name: Install Dependencies\n      command: npm install\n  - run:\n      name: Compile Source Code\n      command: npm run build\n  - run:\n      name: Run Unit Tests\n      command: npm test\n  - run:\n      name: Run ESLint\n      command: npm run lint<\/code><\/pre>\n
      Chaque \u00e9tape, comme les panneaux indicateurs d’un voyage, est nomm\u00e9e pour vous aider \u00e0 suivre ce qui se passe lorsque le flux de travail bat son plein. Cette clart\u00e9 facilite le d\u00e9pannage et permet de s’assurer que tout est sur la bonne voie au fur et \u00e0 mesure que votre flux de travail s’\u00e9coule.<\/p>\n
      D\u00e9clenchement du d\u00e9ploiement continu vers Kinsta<\/h4>\n
      La derni\u00e8re \u00e9tape de la t\u00e2che build<\/code> consiste \u00e0 lancer le d\u00e9ploiement vers Kinsta via l’API. Cela n\u00e9cessite deux valeurs : votre cl\u00e9 API<\/strong> et votre App ID<\/strong>, qui ne doivent pas \u00eatre publiques. Ces valeurs seront conserv\u00e9es comme variables d’environnement<\/a> dans CircleCI. Pour l’instant, d\u00e9finissons l’\u00e9tape de d\u00e9ploiement dans le workflow :<\/p>\n
      - run:\n    name: Deploy to Kinsta\n    command: |\n      curl -i -X POST \n        https:\/\/api.kinsta.com\/v2\/applications\/deployments \n        -H \"Authorization: Bearer $API_KEY\" \n        -H \"Content-Type: application\/json\" \n        -d '{\n          \"app_id\": \"'\"$APP_ID\"'\",\n          \"branch\": \"main\"\n        }'<\/code><\/pre>\n
      Dans le code fourni, vous ex\u00e9cutez la commande cURL pour d\u00e9clencher le d\u00e9ploiement en utilisant l’identifiant de l’application stock\u00e9 dans vos variables d’environnement. Rappelez-vous, les variables d’environnement sont accessibles en utilisant la syntaxe :<\/p>\n
      \"$VARIABLE_NAME\"<\/code><\/pre>\n
      Stocker des variables d’environnement avec CircleCI<\/h4>\n
      Les variables d’environnement sont cruciales pour maintenir la s\u00e9curit\u00e9 et la flexibilit\u00e9 de vos flux de travail d’int\u00e9gration et de d\u00e9ploiement continus. Pour stocker des variables d’environnement dans CircleCI, suivez les \u00e9tapes suivantes :<\/p>\n
        \n
      1. Ouvrez votre projet pour voir tous les d\u00e9tails de votre pipeline, et cliquez sur le bouton R\u00e9glages du projet<\/strong>.<\/li>\n
      2. Cliquez sur l’onglet Variables d’environnement<\/strong> dans la colonne lat\u00e9rale et ajoutez vos variables d’environnement.<\/li>\n<\/ol>\n
        \"Enregistrez
        Enregistrez les variables d’environnement.<\/figcaption><\/figure>\n
        \u00c9tape 5 : Configuration du flux de travail<\/h3>\n
        Une fois vos t\u00e2ches configur\u00e9es et structur\u00e9es en \u00e9tapes organis\u00e9es, la phase suivante consiste \u00e0 configurer votre flux de travail<\/a>. Le flux de travail agit comme un orchestrateur, guidant la s\u00e9quence des t\u00e2ches et incorporant des filtres et des r\u00e8gles sp\u00e9cifiques<\/a> pour d\u00e9terminer comment ces t\u00e2ches sont ex\u00e9cut\u00e9es.<\/p>\n
        Dans ce tutoriel, nous allons cr\u00e9er un flux de travail qui d\u00e9clenche le travail de construction exclusivement lorsqu’il y a une pouss\u00e9e ou des modifications dans le code sur la branche main<\/code> du d\u00e9p\u00f4t :<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main<\/code><\/pre>\n
        Cette configuration est r\u00e9alis\u00e9e \u00e0 l’aide de filtres, qui vous permettent de contr\u00f4ler l’ex\u00e9cution d’une t\u00e2che en fonction de certaines conditions. Vous pouvez \u00e9galement incorporer des d\u00e9clencheurs pour planifier le moment o\u00f9 le flux de travail doit s’ex\u00e9cuter (exemple : tous les jours \u00e0 12 heures UTC) :<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main\n    triggers:\n      - schedule:\n          cron: \"0 0 * * *\"<\/code><\/pre>\n
        Le flux de travail ci-dessus comporte une page trigger<\/code> d\u00e9finie avec le mot-cl\u00e9 schedule<\/code>. L’expression cron \"0 0 * * *\"<\/code> correspond \u00e0 la programmation du flux de travail \u00e0 minuit UTC tous les jours.<\/p>\n
        Dans une expression cron, il y a cinq champs s\u00e9par\u00e9s par des espaces, chacun repr\u00e9sentant une unit\u00e9 de temps diff\u00e9rente :<\/p>\n
          \n
        1. Minute (0-59) :<\/strong> Le premier champ repr\u00e9sente la minute de l’heure, d\u00e9finie sur 0<\/code> pour se d\u00e9clencher au d\u00e9but de l’heure.<\/li>\n
        2. Heure (0-23) :<\/strong> Le deuxi\u00e8me champ indique l’heure de la journ\u00e9e ; r\u00e9glez-le sur 0<\/code> pour un d\u00e9clenchement \u00e0 minuit.<\/li>\n
        3. Jour du mois (1-31) :<\/strong> Le troisi\u00e8me champ indique le jour, avec un ast\u00e9risque (*<\/code>) pour n’importe quel jour.<\/li>\n
        4. Mois (1-12) :<\/strong> Le quatri\u00e8me champ repr\u00e9sente le mois, indiqu\u00e9 par un ast\u00e9risque (*<\/code>) pour n’importe quel mois.<\/li>\n
        5. Jour de la semaine (0-6, o\u00f9 0 correspond au dimanche) :<\/strong> Le cinqui\u00e8me champ indique le jour de la semaine, \u00e9galement marqu\u00e9 d’un ast\u00e9risque (*<\/code>) pour n’importe quel jour.<\/li>\n<\/ol>\n
          Avec cette configuration de flux de travail, vous pouvez g\u00e9rer efficacement quand et dans quelles conditions vos t\u00e2ches d\u00e9finies s’ex\u00e9cutent, en maintenant un pipeline CI\/CD efficace et rationalis\u00e9.<\/p>\n
          \u00c9tape 6 : Validation et observation<\/h3>\n
          Une fois que votre flux de travail est configur\u00e9 avec succ\u00e8s, validez vos changements dans votre d\u00e9p\u00f4t de contr\u00f4le de version. CircleCI d\u00e9tectera automatiquement la pr\u00e9sence du fichier de configuration et d\u00e9clenchera les flux de travail d\u00e9finis lors des changements de code.<\/p>\n
          \"D\u00e9tails
          D\u00e9tails de l’offre CircleCI.<\/figcaption><\/figure>\n
          Cliquez sur la t\u00e2che de construction pour consulter ses d\u00e9tails. Si vous avez plus d’une t\u00e2che, elles seront toutes list\u00e9es. Lorsque vous cliquez sur une t\u00e2che, l’onglet \u00c9TAPES<\/strong> affiche toutes les \u00e9tapes ex\u00e9cut\u00e9es par la t\u00e2che et indique si elles ont r\u00e9ussi ou \u00e9chou\u00e9.<\/p>\n
          \"\u00c9tapes
          \u00c9tapes de la t\u00e2che.<\/figcaption><\/figure>\n
          Vous pouvez \u00e9galement cliquer sur chaque \u00e9tape pour obtenir plus de d\u00e9tails. Lorsque vous cliquez sur l’\u00e9tape D\u00e9ployer vers Kinsta<\/strong>, vous verrez plus de d\u00e9tails sur la requ\u00eate API et saurez si elle a abouti :<\/p>\n
          \"Informations
          Informations sur l’\u00e9tape.<\/figcaption><\/figure>\n