Déployer vos thèmes WordPress avec Buddy (CI / CD)

Par Aurélien Denis

Ce guide a pour objectif de vous présenter les bases de CI / CD et comment vous pouvez les utiliser pour améliorer votre méthode de travail en tant que développeur WordPress.

Continuous Integration et Continuous Delivery pour CI / CD en abrégé ou Intégration Continue et Déploiement Continu en français correspondent à un ensemble de règles pour vous aider à rationaliser chaque processus informatique. Il permet aux développeurs de fournir du code révisé et testé de manière plus fréquente.

Buddy est un outil CI / CD doté d’une interface graphique intuitive et de plus de 140 intégrations préconfigurées qui vous aide dans l’implémentation de ce processus dans vos opérations quotidiennes. Contrairement à d’autres outils, vous n’avez pas besoin d’une équipe spécialisée pour définir un pipeline de base. L’ensemble du processus ne vous prendra que quelques minutes vous laissant davantage de temps pour des tâches plus importantes.

Dès lors, comment CI / CD peuvent me faciliter mes développements sous WordPress ? Ce guide vous apprendra comment automatiser le déploiement de vos thèmes WordPress chez DigitalOcean – bien que cela fonctionne avec n’importe quel hébergeur en adaptant votre pipeline.

Nous vous montrerons également comment créer un pipeline de surveillance d’application simple qui optimisera vos images et examinera vos liens internes afin d’identifier les erreurs 404.

Prérequis

Avant de commencer, voici quelques éléments dont vous aurez besoin :

  • Un environnement Git ;
  • Node.js ;
  • Un terminal ;
  • Un éditeur de code comme Nova, Visual Studio Code ou autre ;

Créer un droplet WordPress sur DigitalOcean

Nous commencerons par créer un droplet pour notre projet WordPress. Ne vous inquiétez pas, si vous n’avez pas encore de domaine mais que vous souhaitez tester son fonctionnement, vous pouvez toujours ajouter le domaine plus tard.

Dans le menu de création de droplet, accédez à l’onglet Marketplace et recherchez l’application WordPress. Sélectionnez ensuite un plan et une spécification technique.

À l’étape suivante, sélectionnez le type d’autorisation sur le serveur de droplet – vous pouvez choisir entre la connexion par identifiant et mot de passe ou la clé SSH que je vous conseille fortement.

Créer une nouvelle clé sous Linux ou macOS est assez simple, exécutez simplement la commande ssh-keygen dans votre terminal. Sous Windows, cependant, c’est un peu plus compliqué. Si vous êtes un utilisateur Windows, veuillez suivre ce guide. Une fenêtre contextuelle vous guidera tout au long du processus de création et d’activation d’une clé SSH.

Une fois la nouvelle clé SSH ajoutée, vous pouvez créer un nouveau droplet. L’apparition de ce dernier peut prendre un certain temps.

Comme vous pouvez le voir, le droplet est là mais WordPress n’est toujours pas été configuré. Commencez par copier l’adresse IP de votre droplet, dans notre cas c’est 157.245.86.243.
Ouvrez le terminal, à l’aide de la commande ssh-add nous ajouterons la clé SSH précédemment générée à l’agent d’authentification à l’aide de la commande suivante :

ssh-add ~/.ssh/id_buddy_wordpress_guide

Ensuite, connectez-vous à notre droplet en utilisant son adresse IP :

ssh root@157.245.86.243

Si vous avez tout fait correctement, nous devrions maintenant être connectés à notre droplet et la fenêtre de configuration de WordPress devrait apparaître. Voici un bref aperçu des options :

  • Nom du domaine / sous-domaine : saisissez le nom de domaine ou l’adresse IP du droplet ;
  • Adresse e-mail : votre adresse e-mail ;
  • Nom d’utilisateur : votre identifiant de connexion à l’administration du site ;
  • Titre du site : le titre de votre site Web ;

Vérifiez toutes les informations fournies et procédez à l’installation. Si tout se passe bien, vous devriez recevoir le message suivant : Installation complète. Accédez à votre nouveau site WordPress dans un navigateur pour continuer.

En entrant dans le domaine ou l’adresse IP du droplet, vous devriez voir l’écran suivant :

Votre droplet dispose à présent d’un WordPress installé et fonctionnel. Gardez votre terminal ouvert car nous en aurons toujours besoin pour ajouter la clé SSH à Buddy.

Créer un nouveau projet dans Buddy

Il est temps à présent de créer notre dépôt. Vous pouvez choisir votre propre thème WordPress ou choisir un thème par défaut. Pour les besoins de ce guide, nous utiliserons le thème Twenty Twenty One disponible sur ce profil GitHub.

Créez un nouveau projet dans Buddy et sélectionnez notre plateforme en tant que fournisseur d’hébergement Git.

Dans cette étape, nous allons cloner le thème WordPress mentionné précédemment dans notre nouveau dépôt Buddy à l’aide des commandes suivantes :

git clone --bare https://github.com/WordPress/twentytwentyone.git 
cd twentytwentyone.git
git remote add buddy https://app.buddy.works/buddyTeam/buddywptheme
git push buddy --mirror

Félicitations, vous avez maintenant créé votre espace de travail avec succès !

Git

Git est le système de contrôle de version le plus populaire au monde, devenu un véritable standard dans la gestion des projets à base de code.

Grâce à cette technologie, nous pouvons suivre toutes les modifications apportées au projet et les annuler facilement en cas de problèmes. C’est également un excellent moyen pour les équipes de surveiller les modifications apportées par vos collègues. Dans notre cas, nous utilisons Buddy comme fournisseur d’hébergement Git. Nous avons déjà cloné un dépôt, mais pour apporter des changements, nous devons le copier localement sur notre poste de travail.

Comment indiqué précédemment, vous devez installer Node.js au préalable.

Une fois installé, ouvrez un terminal et entrez la commande suivante afin de cloner le dépôt :

git clone https://app.buddy.works/buddyTeam/buddywptheme

Il nous faut à présent créer un fichier .gitignore pour spécifier les fichiers ou les répertoires que nous voulons exclure de notre dépôt.

Dans notre cas, nous aimerions exclure le répertoire node_modules car il sera installé de toute façon lors de l’installation des dépendances via NPM. Chaque exclusion doit faire l’objet d’une ligne distincte. Si vous souhaitez en savoir plus sur la manière de configurer au mieux votre fichier .gitignore pour les technologies qui vous concernent, prenez le temps de consulter ce guide proposé par GitHub.

Voici un exemple de fichier .gitignore que j’utilise lors de mes développements de thème sur-mesure pour WordPress :

wp/*
wp-content/*
!wp-content/themes/
node_modules
files
vendor
.well-known

*.sql
*.log
*.env
*.DS_Store
.vscode
wp-config.php
*.sh
*.yml
*.json

Une fois que le fichier est prêt localement, vous pouvez l’ajouter sur dépôt à l’aide des commandes suivantes :

git add .gitignore
git commit -m “add gitignore”
git push origin master

Rendez-vous ensuite dans votre répertoire de thème et installez les paquets NPM en utilisant ces commandes :

cd buddywptheme
npm install

Maintenant que tout est en place, vous pouvez utiliser la commande npm run watch et commencer à modifier votre thème en local. Chaque fois que vous modifiez quelque chose, validez simplement vos modifications et poussez-les sur votre dépôt.

Créer votre premier pipeline

Les pipelines sont au coeur de l’intégration et du déploiement continus car c’est véritablement ce qui rend le processus intéressant. Grâce à l’approche visuelle proposée par Buddy, vous avez le choix parmi plus de 140 actions prêtes-à-l’emploi. Un exemple de pipeline ressemble à :

Lors de la création d’un nouveau pipeline, outre la sélection d’un nom, vous devez aussi décider des conditions de déclenchement. Vous pouvez avoir un pipeline qui doit être exécuté manuellement, ou un qui s’exécutera automatiquement après chaque push  vers le dépôt. De plus, vous pouvez sélectionner une branche sur laquelle le pipeline sera exécuté. Dans ce guide, nous avons sélectionné la condition On push trigger et trunk comme notre branche.

Notre premier pipeline va consister en 3 actions.

Node.js

Nous utilisons Node principalement parce que le thème WordPress utilise Webpack qui crée des fichiers de styles CSS une fois les dépendances installées et vérifie les erreurs des fichiers JS et SCSS. Lors de la configuration de Node.js, vous devez utiliser les commandes suivantes :

npm install
npm run build

Droplet DigitalOcean

Sélectionnez le droplet correspondant n’est pas suffisant, nous devons tout de même permettre à Buddy de s’y connecter. En mode authentification, choisissez la clé SSH de Buddy puis ouvrez un terminal puis exécutez la commande suivante tout en étant connecté à votre droplet :

echo -e 'ssh-rsa AAAAB3.....JPN buddy-wordpress-page Key\n' >> ~/.ssh/authorized_keys
chmod 0600 ~/.ssh/authorized_keys

AAAAB3.....JPN est la clé publique.

Voici un exemple de configuration d’un droplet DigitalOcean :

La dernière étape de la configuration du droplet va consister à exclure les chemins que nous ne voulons pas envoyer au serveur. La capture d’écran ci-dessous vous montrera des exemples d’exclusions :

Telegram / Slack / Microsoft Teams

La dernière chose à faire est d’ajouter une action de notification qui informera notre équipe chaque fois qu’un nouveau déploiement est effectué. Il existe une grande variété d’actions que vous pouvez choisir comme une notification Slack, l’envoi d’un e-mail ou d’un SMS.

Dans ce guide, cependant, nous utiliserons Telegram. Lors de l’ajout de l’action, vous devrez l’intégrer à votre compte Telegram et une fois cela fait, vous pourrez modifier les messages que votre équipe recevra.

Notre pipeline est maintenant prêt. Vous pouvez cliquer sur Exécuter le déploiement pour vérifier si cela fonctionne. Une fois le pipeline exécuté, la dernière chose à faire est d’activer notre nouveau thème. Ouvrez votre administration WordPress et accédez à Apparence puis Thèmes et cliquez sur Activer à côté de votre nouveau thème.

Surveiller votre application

Vous avez maintenant un site Web fonctionnel avec votre thème, vous pouvez étendre le pipeline à l’aide de diverses actions.

Par exemple, vous pouvez ajouter une action qui vérifiera les performances de votre site Web à l’aide de l’action Lighthouse.

Si vous souhaitez optimiser les images dans les ressources de votre thème, vous pouvez utiliser l’action Compression d’image.

Envie de vous débarrasser de ces erreurs 404 ? Utilisez notre validateur de lien pour auditer les URL de votre site Web. Vous pouvez ajouter ces actions à votre pipeline actuel ou en créer une nouvelle qui effectuera ces tests de manière récurrente.

Dans ce guide, nous avons parcouru le processus de configuration de votre droplet DigitalOcean et de téléchargement de votre thème à l’aide de Buddy. Cet aperçu vous aura démontré les possibilités quasi-infinies que propose Buddy, alors allez-y et créez votre propre système CI /CD pour WordPress.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Des tutoriels et des bons plans en exclusivité !
RGPD*
Ce champ n’est utilisé qu’à des fins de validation et devrait rester inchangé.
Laisser un commentaire