Avec Docker Compose, Xdebug et PhpStorm, vous pouvez créer un environnement de développement local reproductible, isolé et facilement gérable qui reflète un serveur de production, améliorant ainsi la qualité de vos projets WordPress.
Bonjour chers développeurs et utilisateurs avancés de WordPress ! Aujourd’hui, je suis ravi de partager un tutoriel complet mais simple sur la configuration d’un environnement de développement local WordPress en utilisant Docker Compose. Ayant récemment rejoint l’équipe dynamique de OnTheGoSystems, j’ai décidé d’apporter ma zone de confort avec moi, ce qui est l’objet de cette configuration.
L’objectif était simple : développer une configuration où je pourrais avoir un contrôle granulaire sur mes outils de développement, en intégrant Xdebug et WP-CLI avec l’image officielle Docker de WordPress. Cette configuration ne vise pas à réinventer la roue, mais à la personnaliser pour qu’elle s’aligne avec les préférences et les styles de travail individuels. J’espère que ce guide vous sera utile pour configurer un environnement similaire, améliorant ainsi votre parcours dans le développement WordPress.
Prérequis
Pour tirer le meilleur parti de ce tutoriel, vous devrez avoir les dépendances suivantes installées :
- Docker : Nous utiliserons Docker comme notre principal outil pour créer, déployer et exécuter des applications en utilisant des conteneurs. Il nous permet d’emballer une application avec toutes les parties dont elle a besoin dans un conteneur, et de l’expédier comme un seul paquet. Ce qui rend Docker encore plus puissant, c’est sa promesse de contrôle granulaire, nous permettant de définir précisément chaque aspect de la configuration de notre application. Ce contrôle aide à créer un environnement de développement qui répond exactement à nos besoins.
- Extension Chrome Xdebug : Cette extension de navigateur nous aidera à parcourir notre code, à repérer les bugs et à améliorer la qualité globale de nos projets WordPress.
- PhpStorm : Un IDE intelligent et complet pour PHP développé par JetBrains. Il fournit un éditeur pour PHP, HTML et JavaScript avec une analyse de code en temps réel et un refactoring automatisé pour ces langages.
Pourquoi Docker, Xdebug et PhpStorm ?
Notre objectif est d’établir un environnement de développement local WordPress qui soit isolé, reproductible et facilement gérable. Docker forme la colonne vertébrale de cette configuration, fournissant l’infrastructure pour contenir et gérer notre application. Xdebug et PhpStorm sont les pièces complémentaires de ce puzzle, offrant des capacités améliorées de développement et de débogage de code PHP.
Notre voyage commencera par la création d’un Dockerfile qui étend l’image officielle Docker de WordPress. Nous améliorerons cette image en incorporant Xdebug et WP-CLI, des outils essentiels pour nos tâches de développement et de débogage WordPress.
Ensuite, nous rédigerons un fichier Docker Compose pour orchestrer deux services clés : WordPress et MySQL. Et croyez-le ou non, c’est essentiellement tout !
La beauté de cette configuration est qu’elle aboutit à un environnement de développement local qui non seulement reflète un serveur de production, mais est également facilement reproductible. Cela signifie que nous pouvons dupliquer la configuration exacte sur plusieurs environnements ou machines avec facilité, assurant la cohérence et réduisant les problèmes liés à la configuration.
Tutoriel étape par étape
Étape 1 : Le Dockerfile
Notre voyage commence par la création d’un nouveau Dockerfile. Ce fichier indique à Docker comment construire notre image. Voici la configuration de base avec laquelle je commence généralement :
# Use the official WordPress image as a parent image
FROM wordpress:latest
# Install Xdebug
RUN pecl install xdebug
# Install WP-CLI
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
chmod +x wp-cli.phar && \
mv wp-cli.phar /usr/local/bin/wp
# Copy xdebug.ini into the container
COPY xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini
Dans ce Dockerfile, nous partons de l’image officielle WordPress. Nous installons ensuite Xdebug et WP-CLI séparément pour plus de clarté et de maintenabilité. Le fichier de configuration Xdebug (xdebug.ini) est copié dans le répertoire approprié du conteneur. Cela forme la base de ma configuration de référence pour un environnement de développement local WordPress.
Étape 2 : Le fichier de configuration Xdebug (xdebug.ini)
Maintenant que nous avons installé Xdebug dans notre image Docker, nous devons le configurer pour qu’il fonctionne dans notre environnement de développement local. Cela implique de créer un fichier xdebug.ini avec les paramètres suivants :
ini
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_port=9003
xdebug.start_with_request=yes
Ces paramètres activent l’extension Xdebug, la configurent pour démarrer le débogage à chaque requête et définissent le port client auquel elle doit se connecter (dans ce cas, 9003). Vous avez peut-être remarqué que nous n’avons pas encore spécifié de client_host, mais ne vous inquiétez pas, cela entrera en jeu très bientôt dans notre processus de configuration.
Étape 3 : Le fichier Docker Compose
Ensuite, nous allons créer un fichier docker-compose.yml qui configure nos services WordPress et MySQL :
yaml
version: '3'
services:
# MySQL Service
mysql:
image: mysql:latest
container_name: mysql_container
restart: always
volumes:
- db_data:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
MYSQL_DATABASE: wordpress
# WordPress Service
wordpress:
depends_on:
- mysql
image: wordpress:latest
container_name: wp_container
volumes:
- ./wp_data:/var/www/html
environment:
WORDPRESS_DB_HOST: mysql
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
WORDPRESS_DEBUG: 1
XDEBUG_CONFIG: client_host=host.docker.internal
ports:
- "8000:8000"
volumes:
db_data:
Dans ce fichier, nous avons défini deux services – MySQL et WordPress. Chacun de ces services a des noms de conteneurs uniques, pour une référence et une gestion plus faciles.
La directive restart: always garantit que le service redémarrera toujours s’il s’arrête de manière inattendue. S’il est arrêté manuellement, il redémarre uniquement lorsque le conteneur est redémarré manuellement.
Le service MySQL monte un volume Docker (db_data), assurant un stockage persistant même si le conteneur est supprimé. Pour le service WordPress, nous montons un répertoire local (./wp_data) dans le conteneur. Cela signifie que toute modification des fichiers WordPress sur notre système local sera reflétée dans le conteneur.
Nous avons ajouté deux variables d’environnement supplémentaires pour le service WordPress – WORDPRESS_DEBUG pour activer le débogage de WordPress et XDEBUG_CONFIG pour spécifier l’hôte client pour Xdebug. Le client_host est défini sur host.docker.internal, qui est un nom DNS spécial qui redirige vers l’adresse IP interne de l’hôte, permettant à Xdebug de communiquer avec notre IDE sur l’hôte.
Veuillez noter que le paramètre client_host est adapté pour Windows et macOS. Pour Linux, une alternative courante consiste à remplacer host.docker.internal par l’adresse IP réelle de votre machine, qui peut être obtenue via la commande terminale ip addr show.
Étape 4 : Exécution de votre environnement de développement local WordPress
Une fois que votre Dockerfile, fichier de configuration Xdebug et fichier Docker Compose sont prêts, il est temps de donner vie à votre environnement de développement local WordPress.
Pour ce faire, naviguez simplement vers le répertoire contenant votre fichier Docker Compose dans le terminal, et exécutez la commande suivante :
bash
docker-compose up -d
Cette commande indiquera à Docker de démarrer vos services en arrière-plan.
Après une exécution réussie, vous aurez un site WordPress fonctionnant sur votre machine locale, accessible via http://localhost:8000. Toute modification que vous apportez à vos fichiers PHP WordPress sera désormais reflétée sur ce site, offrant un moyen facile et efficace de développer et de déboguer votre application WordPress.
De plus, votre service MySQL sera également opérationnel, accessible sur le port 3306. Cela fournit une base de données MySQL entièrement fonctionnelle pour votre application WordPress, reproduisant un environnement réaliste pour vos besoins de développement.
Étape 4.5 : Étape bonus – Ajout du fichier phpinfo.php
Pour ceux qui souhaitent approfondir leur configuration PHP, nous pouvons introduire un fichier phpinfo.php dans notre image Docker.
Lorsqu’il est accédé, ce fichier présentera un aperçu complet de vos paramètres PHP.
Pour ajouter le fichier phpinfo.php, vous devrez d’abord le créer dans le même répertoire que votre Dockerfile.
Le fichier doit contenir le code PHP suivant :
<?php phpinfo(); ?>
Ensuite, ajoutez la ligne suivante à votre Dockerfile :
# Bonus: Copy phpinfo.php into the container
COPY phpinfo.php /var/www/html/phpinfo.php
Cette commande copiera le fichier phpinfo.php dans le répertoire racine de WordPress au sein de l’image Docker.
Pour garantir que ces modifications prennent effet, vous devrez reconstruire votre image Docker et redémarrer les services Docker Compose. Exécutez les commandes suivantes dans votre terminal :
bash
docker-compose down
docker-compose up -d --build
La commande docker-compose down arrête et supprime vos conteneurs Docker actuels.
Ensuite, docker-compose up -d –build reconstruit l’image Docker avec le fichier phpinfo.php nouvellement ajouté, et redémarre vos services WordPress et MySQL en arrière-plan.
Vous pouvez maintenant accéder au fichier phpinfo.php en naviguant vers http://localhost:8000/phpinfo.php dans votre navigateur web.
Ici, vous verrez une page détaillée décrivant votre configuration PHP, qui peut être une ressource précieuse pour le débogage et la vérification.
Étape 5 : Commencez le débogage
Maintenant que vous avez configuré votre environnement de développement local WordPress avec Docker, Xdebug et PhpStorm, vous pouvez commencer à déboguer votre site WordPress. Voici un aperçu rapide de la façon de commencer :
- Configurer Xdebug dans PhpStorm : Ouvrez PhpStorm et allez dans Fichier → Paramètres (Préférences sur Mac) → Langages & Frameworks → PHP → Debug. Dans la section Xdebug, assurez-vous que le port de débogage est réglé sur 9003 et que l’option Peut accepter des connexions externes est cochée.
- Ajouter un serveur PhpStorm : Naviguez vers PHP → Serveurs. Ajoutez un nouveau serveur avec le nom wordpress et l’hôte localhost. Réglez le port sur 8000. Assurez-vous que les mappages de chemin sont correctement définis – le chemin absolu sur le serveur pour le dossier wp_data doit être /var/www/html.
- Installer l’extension Xdebug helper : Installez l’extension Xdebug helper pour Google Chrome. Une fois installée, cliquez sur l’icône de bug et définissez la clé IDE sur PHPSTORM.
- Commencez à écouter les connexions de débogage PHP : Dans PhpStorm, cliquez sur l’icône de bug dans le coin supérieur droit pour commencer à écouter les connexions de débogage PHP.
- Commencez le débogage : Avec les étapes précédentes complétées, vous êtes prêt à commencer à déboguer votre application WordPress. Il suffit de définir vos points d’arrêt dans PhpStorm selon vos besoins, puis de recharger simplement votre site web. Bon débogage !
Conclusion
Alors que nous concluons ce tutoriel, j’espère qu’il deviendra une ressource précieuse pour vous comme il l’a été pour moi dans mon parcours. La capacité de personnaliser cette configuration – comme nous l’avons fait en ajoutant le fichier phpinfo.php – ouvre une myriade de possibilités, rendant notre processus de développement plus robuste et efficace. Tout le code est disponible dans ce Dépôt GitHub. N’hésitez pas à le récupérer, l’essayer et suggérer des améliorations !
J’utilise personnellement un système d’exploitation Ubuntu, mais la beauté de cette configuration est que grâce à Docker, cela n’a pas d’importance ! Grâce au fait que Docker peut fonctionner sur n’importe quel système d’exploitation de manière égale, que vous préfériez macOS, Windows ou Linux, la configuration et l’utilisation sont les mêmes !
Merci de m’avoir accompagné dans ce tutoriel. J’espère avoir de vos nouvelles concernant vos expériences ou toute suggestion que vous pourriez avoir pour améliorer encore cette configuration. Rappelez-vous, la croissance prospère grâce au partage des connaissances et à l’esprit de collaboration.
Bon codage, et continuons à créer ensemble des expériences WordPress incroyables !