Le déploiement continu est un élément essentiel du développement web moderne. Il permet aux développeurs de déployer automatiquement les modifications d’un système de contrôle de version vers un environnement réel. Cette approche réduit les erreurs manuelles et accélère le processus de développement, garantissant que votre site web est toujours à jour avec les dernières modifications de code.

En tant qu’utilisateur de Kinsta, vous pouvez utiliser SSH pour pousser les changements directement sur votre serveur. Avec les actions GitHub, vous pouvez automatiser l’ensemble du processus de déploiement, en déployant de manière transparente les mises à jour sur votre site en direct.

Cet article vous guide dans la mise en place d’un déploiement continu pour votre site WordPress hébergé sur Kinsta à l’aide de GitHub Actions. Nous couvrons tous les aspects, de la configuration de votre environnement local à l’envoi des modifications sur GitHub et à leur déploiement automatique sur votre site en ligne.

Pré-requis

Avant de pouvoir mettre en place le déploiement continu de votre site WordPress sur Kinsta, vous devez disposer de quelques éléments :

  1. Votre site WordPress doit déjà être hébergé sur Kinsta.
  2. Vous devez extraire votre site localement. Vous pouvez utiliser DevKinsta ou télécharger une sauvegarde.
  3. Un dépôt GitHub pour stocker et pousser le code de votre site.
  4. Des connaissances de base de Git, comme pousser du code et utiliser un fichier .gitignore.

Récupérer votre site localement et configurer GitHub

En tant qu’utilisateur de Kinsta, la façon la plus simple d’accéder aux fichiers locaux de votre site WordPress est d’utiliser DevKinsta. En quelques clics, vous pouvez transférer votre site du serveur Kinsta vers DevKinsta, ce qui vous permet de travailler sur votre site localement.

Pour ce faire, procédez comme suit

  1. Ouvrez DevKinsta et cliquez sur Ajouter un site.
  2. Sélectionnez l’option Importer depuis Kinsta. Cela téléchargera tout ce qui concerne votre site afin que vous puissiez y accéder localement pour le développement.

Une fois que votre site est disponible localement, ouvrez le dossier du site dans votre éditeur de code préféré. Avant de pousser les fichiers sur GitHub, ajoutez un fichier .gitignore dans le répertoire racine de votre projet pour éviter de télécharger des fichiers WordPress inutiles, des téléchargements ou des informations sensibles. Vous pouvez utiliser un modèle standard .gitignore pour WordPress. Copiez le contenu du modèle et enregistrez-le.

Ensuite, créez un dépôt GitHub et transférez les fichiers de votre site sur GitHub.

Configurer les secrets GitHub pour Kinsta

Pour automatiser le déploiement de GitHub vers Kinsta, vous aurez besoin de quelques informations SSH importantes, notamment votre nom d’utilisateur, votre mot de passe, votre port et votre adresse IP. Comme ces informations sont sensibles, stockez-les en tant que secrets GitHub.

Pour ajouter des secrets dans GitHub :

  1. Accédez à votre dépôt sur GitHub.
  2. Cliquez sur Settings > Secrets and variables > Actions > New repository secret.
  3. Ajoutez les secrets suivants :
    • KINSTA_SERVER_IP
    • KINSTA_USERNAME
    • PASSWORD
    • PORT

Vous pouvez trouver ces détails sur la page Info de votre site dans votre tableau de bord MyKinsta.

Détails des informations SFTP/SSH dans MyKinsta.
Détails des informations SFTP/SSH dans MyKinsta.

Avec cette configuration terminée, vous pouvez maintenant configurer le déploiement automatique pour votre site WordPress.

Configurer votre serveur Kinsta

Avant d’automatiser le processus de déploiement avec les Actions GitHub, vous devez configurer votre serveur Kinsta pour recevoir et déployer du code depuis votre dépôt GitHub.

Cela implique deux étapes : la création d’un dépôt Git nu sur votre serveur Kinsta et la mise en place d’un hook post-receive pour déployer automatiquement les dernières modifications sur votre site live.

1. Créer un dépôt Git nu sur Kinsta

Un dépôt Git nu est une destination distante où GitHub va pousser votre code. Ce dépôt n’a pas de répertoire de travail – c’est un dépôt central conçu pour recevoir et stocker votre code.

Pour ce faire, commencez par vous connecter en SSH à votre serveur Kinsta en utilisant la commande terminal SSH disponible dans votre tableau de bord MyKinsta :

Commande terminal SSH MyKinsta.
Commande terminal SSH MyKinsta.

Ensuite, naviguez jusqu’au dossier privé de votre serveur (ou créez-le s’il n’existe pas encore) :

mkdir -p /www/your-site/private
cd /www/your-site/private

Remplacez ici your-site par le nom du dossier de votre site, que vous trouverez dans le chemin d’accès sur votre tableau de bord.

Kinsta live site path
Chemin du site Kinsta live.

Enfin, créez le dépôt Git nu :

git init --bare your-repo.git

Pour your-repo, vous pouvez utiliser le nom de votre dépôt GitHub pour des raisons de cohérence, mais vous pouvez lui donner n’importe quel nom.

Ce dépôt nu recevra le code poussé depuis GitHub.

2. Configurer le hook post-receive

Une fois que votre dépôt Git nu est prêt, vous devez configurer le hook post-receive. Ce script va automatiquement déployer le code sur votre site live à chaque fois que de nouveaux changements sont poussés sur la branche main de GitHub.

Pour ce faire, naviguez vers le répertoire hooks dans votre dépôt Git nu :

cd /www/your-site/private/your-repo.git/hooks

Créez et éditez le hook post-receive:

nano post-receive

Ensuite, ajoutez le script suivant au fichier post-receive. Ce script extraira le code le plus récent dans le répertoire public de votre site :

#!/bin/bash
TARGET="/www/your-site/public"
GIT_DIR="/www/your-site/private/your-repo.git"

while read oldrev newrev ref
do
    BRANCH=$(git rev-parse --symbolic --abbrev-ref $ref)

    if [[ $BRANCH == "main" ]];
    then
        echo "Ref $ref received. Deploying ${BRANCH} branch to production..."
        git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f
    else
        echo "Ref $ref received. Doing nothing: only the main branch may be deployed on this server."
    fi
done

Le script ci-dessus déploie le code de la branche main. La variable TARGET pointe vers le répertoire où se trouvent les fichiers de votre site en direct (/www/your-site/public). La variable GIT_DIR pointe vers le dépôt Git nu.

Enregistrez et quittez le fichier en appuyant sur Ctrl + X, puis Y et Entrée.

Enfin, rendez le script exécutable afin qu’il puisse s’exécuter automatiquement après chaque poussée :

chmod +x post-receive

À ce stade, le hook post-receive est prêt à déployer du code automatiquement chaque fois que des modifications sont poussées vers la branche main dans votre dépôt GitHub.

3. Générez et ajoutez un jeton d’accès personnel GitHub (PAT)

Puisque GitHub ne supporte plus l’authentification par mot de passe, vous devez utiliser un PAT pour vous authentifier lorsque vous envoyez du code à GitHub via SSH. Ce jeton permettra à GitHub d’accepter vos poussées en toute sécurité.

Pour générer le jeton :

  1. Accédez à votre compte GitHub et cliquez sur votre image de profil, puis sélectionnez Réglages.
  2. Dans la barre latérale de gauche, cliquez sur Réglages du développeur.
  3. Cliquez sur Jetons d’accès personnels > Jetons (classiques).
  4. Cliquez sur Générer un nouveau jeton et donnez-lui un nom (par exemple, « Kinsta Deployment Token »).
  5. Sous Sélectionner la portée, cochez repo (pour un contrôle total des dépôts privés).
  6. Cliquez sur Générer le jeton, et copiez le jeton. (Vous ne pourrez plus le voir)

Ensuite, exécutez la commande suivante pour ajouter votre dépôt GitHub en tant que dépôt distant, en remplaçant les espaces réservés par vos coordonnées réelles :

git remote add origin https://your-username:[email protected]/your-username/your-repo.git

Remplacez :

  • your-username par votre nom d’utilisateur GitHub.
  • YOUR_PERSONAL_ACCESS_TOKEN par le jeton que vous venez de générer.
  • your-repo par le nom de votre dépôt GitHub.

Créer le flux de travail GitHub Actions pour le déploiement automatique

Maintenant que votre site WordPress est sur votre machine locale, poussé sur GitHub, et que vous avez mis en place les Secrets GitHub nécessaires, il est temps de créer un flux de travail GitHub Actions. Ce flux de travail déploie les changements vers Kinsta automatiquement chaque fois que vous poussez vers la branche main.

Pour automatiser le déploiement, vous allez créer un fichier YAML qui définit comment le déploiement se fera. Voici comment le configurer :

  1. Créez un nouveau répertoire appelé .github/workflows dans votre dépôt GitHub.
  2. Dans ce répertoire, créez un nouveau fichier appelé deploy.yml.
  3. Ajoutez le contenu suivant au fichier deploy.yml:
name: Deploy to Kinsta

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Deploy to Kinsta via SSH
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.KINSTA_SERVER_IP }}
          username: ${{ secrets.KINSTA_USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: |
            cd /www/your-site/private/your-repo.git  # Navigate to the bare Git repository on Kinsta
            git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git fetch origin main  # Fetch the latest changes from GitHub
            git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git reset --hard origin/main  # Deploy changes to the live site

Un examen plus approfondi de ce flux de travail

Voici un aperçu du déroulement des opérations :

  • Déclencheur : Le flux de travail est déclenché chaque fois que du code est poussé vers la branche main de votre dépôt GitHub.
  • Jobs : Le flux de travail contient un job appelé deploy, qui s’exécute sur une machine virtuelle Ubuntu (ubuntu-latest).
  • Vérifier le code : Cette étape utilise l’action actions/checkout@v2 pour extraire le dernier code de votre dépôt GitHub.
  • Déploiement via SSH : L’action appleboy/ssh-action est utilisée pour se connecter en toute sécurité à votre serveur Kinsta via SSH en utilisant les secrets que vous avez configurés (IP du serveur, nom d’utilisateur, mot de passe et port). Le script de cette étape exécute les commandes suivantes :
    • cd /www/your-site/private/your-repo.git: Navigue vers le dépôt Git nu sur votre serveur Kinsta.
    • git fetch origin main: Récupère les dernières modifications de la branche main dans votre dépôt GitHub.
    • git reset --hard origin/main: Applique ces changements en mettant à jour le site live dans le répertoire public où WordPress est hébergé.

Tester le flux de travail

Une fois que vous avez configuré le flux de travail, vous pouvez le tester en apportant une petite modification à la branche main de votre dépôt GitHub. Chaque fois que vous apportez une modification, les Actions GitHub déclenchent automatiquement le déploiement, en extrayant la dernière version de votre code et en la déployant sur votre site en ligne sur Kinsta.

Vous pouvez suivre l’état de votre déploiement en allant sur l’onglet Actions dans votre dépôt GitHub. Si le flux de travail rencontre des erreurs, vous verrez des journaux détaillés qui vous aideront à résoudre les problèmes.

Résumé

En mettant en place un déploiement continu pour votre site WordPress à l’aide des Actions GitHub, vous automatisez votre flux de développement, en vous assurant que chaque changement poussé sur GitHub est automatiquement déployé sur votre site live sur Kinsta.

Cela vous permet également d’intégrer des flux de travail supplémentaires dans le pipeline, tels que les tests et le formatage en utilisant le paquet @wordpress/scripts.

Que pensez-vous de ce processus ? Souhaitez-vous que nous vous expliquions autre chose, ou avez-vous rencontré des erreurs en suivant ce guide ? N’hésitez pas à nous faire part de vos questions ou de vos réactions dans la section des commentaires ci-dessous !

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.