Avec Docker Compose, Xdebug et PhpStorm, vous pouvez cr\u00e9er un environnement de d\u00e9veloppement local reproductible, isol\u00e9 et facilement g\u00e9rable qui refl\u00e8te un serveur de production, am\u00e9liorant ainsi la qualit\u00e9 de vos projets WordPress.<\/p>\n\n
Bonjour chers d\u00e9veloppeurs et utilisateurs avanc\u00e9s de WordPress !\nAujourd’hui, je suis ravi de partager un tutoriel complet mais simple sur la configuration d’un environnement de d\u00e9veloppement local WordPress en utilisant Docker Compose.\nAyant r\u00e9cemment rejoint l’\u00e9quipe dynamique de OnTheGoSystems<\/a>, j’ai d\u00e9cid\u00e9 d’apporter ma zone de confort avec moi, ce qui est l’objet de cette configuration. <\/p>\n\n L’objectif \u00e9tait simple : d\u00e9velopper une configuration o\u00f9 je pourrais avoir un contr\u00f4le granulaire sur mes outils de d\u00e9veloppement, en int\u00e9grant Xdebug et WP-CLI avec l’image officielle Docker de WordPress.\nCette configuration ne vise pas \u00e0 r\u00e9inventer la roue, mais \u00e0 la personnaliser pour qu’elle s’aligne avec les pr\u00e9f\u00e9rences et les styles de travail individuels.\nJ’esp\u00e8re que ce guide vous sera utile pour configurer un environnement similaire, am\u00e9liorant ainsi votre parcours dans le d\u00e9veloppement WordPress. <\/p>\n\n Pour tirer le meilleur parti de ce tutoriel, vous devrez avoir les d\u00e9pendances suivantes install\u00e9es :<\/p>\n\n Notre objectif est d’\u00e9tablir un environnement de d\u00e9veloppement local WordPress qui soit isol\u00e9, reproductible et facilement g\u00e9rable.\nDocker forme la colonne vert\u00e9brale de cette configuration, fournissant l’infrastructure pour contenir et g\u00e9rer notre application.\nXdebug et PhpStorm sont les pi\u00e8ces compl\u00e9mentaires de ce puzzle, offrant des capacit\u00e9s am\u00e9lior\u00e9es de d\u00e9veloppement et de d\u00e9bogage de code PHP. <\/p>\n\n Notre voyage commencera par la cr\u00e9ation d’un Dockerfile qui \u00e9tend l’image officielle Docker de WordPress.\nNous am\u00e9liorerons cette image en incorporant Xdebug et WP-CLI, des outils essentiels pour nos t\u00e2ches de d\u00e9veloppement et de d\u00e9bogage WordPress. <\/p>\n\n Ensuite, nous r\u00e9digerons un fichier Docker Compose pour orchestrer deux services cl\u00e9s : WordPress et MySQL.\nEt croyez-le ou non, c’est essentiellement tout ! <\/p>\n\n La beaut\u00e9 de cette configuration est qu’elle aboutit \u00e0 un environnement de d\u00e9veloppement local qui non seulement refl\u00e8te un serveur de production, mais est \u00e9galement facilement reproductible.\nCela signifie que nous pouvons dupliquer la configuration exacte sur plusieurs environnements ou machines avec facilit\u00e9, assurant la coh\u00e9rence et r\u00e9duisant les probl\u00e8mes li\u00e9s \u00e0 la configuration. <\/p>\n\n Notre voyage commence par la cr\u00e9ation d’un nouveau Dockerfile.\nCe fichier indique \u00e0 Docker comment construire notre image.\nVoici la configuration de base avec laquelle je commence g\u00e9n\u00e9ralement : <\/p>\n Dans ce Dockerfile, nous partons de l’image officielle WordPress.\nNous installons ensuite Xdebug et WP-CLI s\u00e9par\u00e9ment pour plus de clart\u00e9 et de maintenabilit\u00e9.\nLe fichier de configuration Xdebug (xdebug.ini<\/strong>) est copi\u00e9 dans le r\u00e9pertoire appropri\u00e9 du conteneur.\nCela forme la base de ma configuration de r\u00e9f\u00e9rence pour un environnement de d\u00e9veloppement local WordPress. <\/p>\n\n Maintenant que nous avons install\u00e9 Xdebug dans notre image Docker, nous devons le configurer pour qu’il fonctionne dans notre environnement de d\u00e9veloppement local.\nCela implique de cr\u00e9er un fichier xdebug.ini<\/strong> avec les param\u00e8tres suivants : <\/p>\n Ces param\u00e8tres activent l’extension Xdebug, la configurent pour d\u00e9marrer le d\u00e9bogage \u00e0 chaque requ\u00eate et d\u00e9finissent le port client auquel elle doit se connecter (dans ce cas, 9003).\nVous avez peut-\u00eatre remarqu\u00e9 que nous n’avons pas encore sp\u00e9cifi\u00e9 de client_host<\/strong>, mais ne vous inqui\u00e9tez pas, cela entrera en jeu tr\u00e8s bient\u00f4t dans notre processus de configuration. <\/p>\n\n Ensuite, nous allons cr\u00e9er un fichier docker-compose.yml<\/strong> qui configure nos services WordPress et MySQL :<\/p>\n Dans ce fichier, nous avons d\u00e9fini deux services – MySQL et WordPress.\nChacun de ces services a des noms de conteneurs uniques, pour une r\u00e9f\u00e9rence et une gestion plus faciles. <\/p>\n\n La directive restart: always<\/strong> garantit que le service red\u00e9marrera toujours s’il s’arr\u00eate de mani\u00e8re inattendue.\nS’il est arr\u00eat\u00e9 manuellement, il red\u00e9marre uniquement lorsque le conteneur est red\u00e9marr\u00e9 manuellement. <\/p>\n\n Le service MySQL monte un volume Docker (db_data<\/strong>), assurant un stockage persistant m\u00eame si le conteneur est supprim\u00e9.\nPour le service WordPress, nous montons un r\u00e9pertoire local (.\/wp_data<\/strong>) dans le conteneur.\nCela signifie que toute modification des fichiers WordPress sur notre syst\u00e8me local sera refl\u00e9t\u00e9e dans le conteneur. <\/p>\n\n Nous avons ajout\u00e9 deux variables d’environnement suppl\u00e9mentaires pour le service WordPress – WORDPRESS_DEBUG<\/strong> pour activer le d\u00e9bogage de WordPress et XDEBUG_CONFIG<\/strong> pour sp\u00e9cifier l’h\u00f4te client pour Xdebug.\nLe client_host<\/strong> est d\u00e9fini sur host.docker.internal<\/strong>, qui est un nom DNS sp\u00e9cial qui redirige vers l’adresse IP interne de l’h\u00f4te, permettant \u00e0 Xdebug de communiquer avec notre IDE sur l’h\u00f4te. <\/p>\n\n Veuillez noter que le param\u00e8tre client_host<\/strong> est adapt\u00e9 pour Windows et macOS.\nPour Linux, une alternative courante consiste \u00e0 remplacer host.docker.internal<\/strong> par l’adresse IP r\u00e9elle de votre machine, qui peut \u00eatre obtenue via la commande terminale ip addr show<\/strong>. <\/p>\n\n Une fois que votre Dockerfile, fichier de configuration Xdebug et fichier Docker Compose sont pr\u00eats, il est temps de donner vie \u00e0 votre environnement de d\u00e9veloppement local WordPress. <\/p>\n\n Pour ce faire, naviguez simplement vers le r\u00e9pertoire contenant votre fichier Docker Compose dans le terminal, et ex\u00e9cutez la commande suivante :<\/p>\n Cette commande indiquera \u00e0 Docker de d\u00e9marrer vos services en arri\u00e8re-plan.<\/p>\n\n Apr\u00e8s une ex\u00e9cution r\u00e9ussie, vous aurez un site WordPress fonctionnant sur votre machine locale, accessible via http:\/\/localhost:8000<\/strong>.\nToute modification que vous apportez \u00e0 vos fichiers PHP WordPress sera d\u00e9sormais refl\u00e9t\u00e9e sur ce site, offrant un moyen facile et efficace de d\u00e9velopper et de d\u00e9boguer votre application WordPress. <\/p>\n\n De plus, votre service MySQL sera \u00e9galement op\u00e9rationnel, accessible sur le port 3306.\nCela fournit une base de donn\u00e9es MySQL enti\u00e8rement fonctionnelle pour votre application WordPress, reproduisant un environnement r\u00e9aliste pour vos besoins de d\u00e9veloppement. <\/p>\n\n Pour ceux qui souhaitent approfondir leur configuration PHP, nous pouvons introduire un fichier phpinfo.php<\/strong> dans notre image Docker.\nLorsqu’il est acc\u00e9d\u00e9, ce fichier pr\u00e9sentera un aper\u00e7u complet de vos param\u00e8tres PHP. Ensuite, ajoutez la ligne suivante \u00e0 votre Dockerfile :<\/p>\n Cette commande copiera le fichier phpinfo.php<\/strong> dans le r\u00e9pertoire racine de WordPress au sein de l’image Docker. <\/p>\n\n Pour garantir que ces modifications prennent effet, vous devrez reconstruire votre image Docker et red\u00e9marrer les services Docker Compose.\nEx\u00e9cutez les commandes suivantes dans votre terminal : <\/p>\n La commande docker-compose down<\/strong> arr\u00eate et supprime vos conteneurs Docker actuels.\nEnsuite, docker-compose up -d –build<\/strong> reconstruit l’image Docker avec le fichier phpinfo.php<\/strong> nouvellement ajout\u00e9, et red\u00e9marre vos services WordPress et MySQL en arri\u00e8re-plan. Maintenant que vous avez configur\u00e9 votre environnement de d\u00e9veloppement local WordPress avec Docker, Xdebug et PhpStorm, vous pouvez commencer \u00e0 d\u00e9boguer votre site WordPress.\nVoici un aper\u00e7u rapide de la fa\u00e7on de commencer : <\/p>\n\nPr\u00e9requis<\/h2>\n\n
\n
Pourquoi Docker, Xdebug et PhpStorm ?<\/h2>\n\n
Tutoriel \u00e9tape par \u00e9tape<\/h2>\n\n
\u00c9tape 1 : Le Dockerfile<\/h3>\n\n
\n# Use the official WordPress image as a parent image\nFROM wordpress:latest\n\n# Install Xdebug\nRUN pecl install xdebug \n\n# Install WP-CLI\nRUN curl -O https:\/\/raw.githubusercontent.com\/wp-cli\/builds\/gh-pages\/phar\/wp-cli.phar && \\\n chmod +x wp-cli.phar && \\\n mv wp-cli.phar \/usr\/local\/bin\/wp\n\n# Copy xdebug.ini into the container\nCOPY xdebug.ini \/usr\/local\/etc\/php\/conf.d\/xdebug.ini\n\n<\/pre><\/div>\n
\u00c9tape 2 : Le fichier de configuration Xdebug (xdebug.ini)<\/h3>\n\n
\nini\nzend_extension=xdebug\nxdebug.mode=debug\nxdebug.client_port=9003\nxdebug.start_with_request=yes\n\n<\/pre><\/div>\n
\u00c9tape 3 : Le fichier Docker Compose<\/h3>\n\n
\nyaml\nversion: '3'\nservices:\n # MySQL Service\n mysql:\n image: mysql:latest\n container_name: mysql_container\n restart: always\n volumes:\n - db_data:\/var\/lib\/mysql\n environment:\n MYSQL_ROOT_PASSWORD: root\n MYSQL_USER: wordpress\n MYSQL_PASSWORD: wordpress\n MYSQL_DATABASE: wordpress\n \n # WordPress Service\n wordpress:\n depends_on: \n - mysql\n image: wordpress:latest\n container_name: wp_container\n volumes:\n - .\/wp_data:\/var\/www\/html\n environment:\n WORDPRESS_DB_HOST: mysql\n WORDPRESS_DB_USER: wordpress\n WORDPRESS_DB_PASSWORD: wordpress\n WORDPRESS_DB_NAME: wordpress\n WORDPRESS_DEBUG: 1\n XDEBUG_CONFIG: client_host=host.docker.internal\n ports:\n - "8000:8000"\n\nvolumes:\n db_data:\n\n<\/pre><\/div>\n
\u00c9tape 4 : Ex\u00e9cution de votre environnement de d\u00e9veloppement local WordPress<\/h3>\n\n
\nbash\ndocker-compose up -d\n<\/pre><\/div>\n
\u00c9tape 4.5 : \u00c9tape bonus – Ajout du fichier phpinfo.php<\/strong><\/h3>\n\n
\n<?php phpinfo(); ?>\n<\/pre><\/div>\n
\n# Bonus: Copy phpinfo.php into the container\nCOPY phpinfo.php \/var\/www\/html\/phpinfo.php\n<\/pre><\/div>\n
\nbash\ndocker-compose down\ndocker-compose up -d --build\n<\/pre><\/div>\n
\u00c9tape 5 : Commencez le d\u00e9bogage<\/h3>\n\n
\n
Conclusion<\/h2>\n\n