Con Docker Compose, Xdebug y PhpStorm, puedes crear un entorno de desarrollo local reproducible, aislado y fácilmente gestionable que refleja un servidor de producción, mejorando la calidad de tus proyectos de WordPress.
¡Hola, compañeros desarrolladores de WordPress y usuarios avanzados! Hoy, estoy emocionado de compartir un tutorial completo pero sencillo sobre cómo configurar un entorno de desarrollo local de WordPress usando Docker Compose. Habiéndome unido recientemente al dinámico equipo de OnTheGoSystems, decidí traer mi zona de confort conmigo, que es de lo que trata esta configuración.
El objetivo era simple: desarrollar una configuración donde pudiera tener un control granular sobre mis herramientas de desarrollo, integrando Xdebug y WP-CLI con la imagen oficial de Docker de WordPress. Esta configuración no se trata de reinventar la rueda, sino de personalizarla para alinearse con las preferencias y estilos de trabajo individuales. Espero que esta guía te sea útil para configurar un entorno similar, mejorando tu viaje en el desarrollo de WordPress.
Requisitos previos
Para aprovechar al máximo este tutorial, necesitarás tener las siguientes dependencias instaladas:
- Docker: Usaremos Docker como nuestra herramienta principal para crear, desplegar y ejecutar aplicaciones utilizando contenedores. Nos permite empaquetar una aplicación con todas las partes que necesita en un contenedor y enviarla como un solo paquete. Lo que hace que Docker sea aún más poderoso es su promesa de control granular, permitiéndonos definir cada aspecto de la configuración de nuestra aplicación con precisión. Este control ayuda a crear un entorno de desarrollo que se adapta exactamente a nuestras necesidades.
- Xdebug Chrome Extension: Esta extensión del navegador nos ayudará a recorrer nuestro código, detectar errores y mejorar la calidad general de nuestros proyectos de WordPress.
- PhpStorm: Un IDE inteligente y completamente equipado para PHP desarrollado por JetBrains. Proporciona un editor para PHP, HTML y JavaScript con análisis de código en tiempo real y refactorización automatizada para estos lenguajes.
¿Por qué Docker, Xdebug y PhpStorm?
Nuestro objetivo es establecer un entorno de desarrollo local de WordPress que sea aislado, reproducible y fácilmente gestionable. Docker forma la columna vertebral de esta configuración, proporcionando la infraestructura para contener y gestionar nuestra aplicación. Xdebug y PhpStorm son las piezas complementarias de este rompecabezas, ofreciendo capacidades mejoradas de desarrollo y depuración de código PHP.
Nuestro viaje comenzará con la creación de un Dockerfile que extiende la imagen oficial de Docker de WordPress. Mejoraremos esta imagen incorporando Xdebug y WP-CLI, herramientas fundamentales en nuestras tareas de desarrollo y depuración de WordPress.
A continuación, redactaremos un archivo Docker Compose para orquestar dos servicios clave: WordPress y MySQL. Y créelo o no, ¡eso es esencialmente todo!
La belleza de esta configuración es que resulta en un entorno de desarrollo local que no solo refleja un servidor de producción, sino que también es fácilmente replicable. Esto significa que podemos duplicar la configuración exacta en múltiples entornos o máquinas con facilidad, asegurando consistencia y reduciendo problemas relacionados con la configuración.
Tutorial paso a paso
Paso 1: El Dockerfile
Nuestro viaje comienza con la creación de un nuevo Dockerfile. Este archivo instruye a Docker sobre cómo construir nuestra imagen. Aquí está la configuración básica con la que suelo empezar:
# 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
En este Dockerfile, partimos de la imagen oficial de WordPress. Luego instalamos Xdebug y WP-CLI por separado para mayor claridad y mantenibilidad. El archivo de configuración de Xdebug (xdebug.ini) se copia en el directorio apropiado en el contenedor. Esto forma la base de mi configuración habitual para un entorno de desarrollo local de WordPress.
Paso 2: El archivo de configuración de Xdebug (xdebug.ini)
Ahora que tenemos Xdebug instalado en nuestra imagen de Docker, necesitamos configurarlo para que funcione en nuestro entorno de desarrollo local. Esto implica crear un archivo xdebug.ini con los siguientes ajustes:
ini
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_port=9003
xdebug.start_with_request=yes
Estos ajustes habilitan la extensión Xdebug, la configuran para iniciar la depuración con cada solicitud y definen el puerto del cliente al que debe conectarse (en este caso, 9003). Puede que hayas notado que aún no hemos especificado un client_host, pero no temas, entrará en juego muy pronto en nuestro proceso de configuración.
Paso 3: El archivo Docker Compose
A continuación, crearemos un archivo docker-compose.yml que configurará nuestros servicios de WordPress y 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:
En este archivo, hemos definido dos servicios – MySQL y WordPress. Ambos servicios tienen nombres de contenedor únicos, para una referencia y gestión más fáciles.
La directiva restart: always asegura que el servicio siempre se reiniciará si se detiene inesperadamente. Si se detiene manualmente, solo se reinicia cuando el contenedor se reinicia manualmente.
El servicio MySQL monta un volumen de Docker (db_data), asegurando almacenamiento persistente incluso si se elimina el contenedor. Para el servicio de WordPress, estamos montando un directorio local (./wp_data) en el contenedor. Esto significa que cualquier cambio en los archivos de WordPress en nuestro sistema local se reflejará en el contenedor.
Hemos añadido dos variables de entorno adicionales para el servicio de WordPress – WORDPRESS_DEBUG para habilitar la depuración de WordPress y XDEBUG_CONFIG para especificar el host cliente para Xdebug. El client_host está configurado en host.docker.internal, que es un nombre DNS especial que se dirige a la dirección IP interna del host, permitiendo que Xdebug se comunique con nuestro IDE en el host.
Tenga en cuenta que la configuración de client_host está adaptada para Windows y macOS. Para Linux, una alternativa común es reemplazar host.docker.internal con la dirección IP real de su máquina, que se puede obtener mediante el comando de terminal ip addr show.
Paso 4: Ejecutar su Entorno de Desarrollo Local de WordPress
Una vez que su Dockerfile, archivo de configuración de Xdebug y archivo Docker Compose estén listos, es hora de poner en marcha su entorno de desarrollo local de WordPress.
Para hacer esto, simplemente navegue al directorio que contiene su archivo Docker Compose en la terminal y ejecute el siguiente comando:
bash
docker-compose up -d
Este comando instruirá a Docker para que inicie sus servicios en segundo plano.
Tras una ejecución exitosa, tendrá un sitio de WordPress ejecutándose en su máquina local, accesible a través de http://localhost:8000. Cualquier cambio que realice en sus archivos PHP de WordPress ahora se reflejará en este sitio, ofreciendo una manera fácil y efectiva de desarrollar y depurar su aplicación de WordPress.
Además, su servicio de MySQL también estará en funcionamiento, accesible en el puerto 3306. Esto proporciona una base de datos MySQL completamente funcional para su aplicación de WordPress, replicando un entorno realista para sus necesidades de desarrollo.
Paso 4.5: Paso Adicional – Añadir el Archivo phpinfo.php
Para aquellos que quieran profundizar un poco más en su configuración de PHP, podemos introducir un archivo phpinfo.php en nuestra imagen de Docker.
Cuando se accede, este archivo presentará una visión general completa de su configuración de PHP.
Para añadir el archivo phpinfo.php, primero deberá crearlo en el mismo directorio que su Dockerfile.
El archivo debe contener el siguiente código PHP:
<?php phpinfo(); ?>
A continuación, añada la siguiente línea a su Dockerfile:
# Bonus: Copy phpinfo.php into the container
COPY phpinfo.php /var/www/html/phpinfo.php
Este comando copiará el archivo phpinfo.php en el directorio raíz de WordPress dentro de la imagen de Docker.
Para asegurar que estos cambios surtan efecto, deberá reconstruir su imagen de Docker y reiniciar los servicios de Docker Compose. Ejecute los siguientes comandos en su terminal:
bash
docker-compose down
docker-compose up -d --build
El comando docker-compose down detiene y elimina sus contenedores de Docker actuales.
Después de esto, docker-compose up -d –build reconstruye la imagen de Docker con el archivo phpinfo.php recién añadido, y reinicia sus servicios de WordPress y MySQL en segundo plano.
Ahora puede acceder al archivo phpinfo.php navegando a http://localhost:8000/phpinfo.php en su navegador web.
Aquí verá una página detallada que describe su configuración de PHP, lo que puede ser un recurso valioso para la depuración y verificación.
Paso 5: Comenzar a Depurar
Ahora que tiene su entorno de desarrollo local de WordPress configurado con Docker, Xdebug y PhpStorm, puede comenzar a depurar su sitio de WordPress. Aquí hay un resumen rápido de cómo empezar:
- Configurar Xdebug en PhpStorm: Abra PhpStorm y vaya a Archivo → Configuración (Preferencias en Mac) → Lenguajes & Frameworks → PHP → Depuración. En la sección Xdebug, asegúrese de que el Puerto de depuración esté configurado en 9003 y la opción Puede aceptar conexiones externas esté marcada.
- Agregar un servidor PhpStorm: Navega a PHP → Servidores. Agrega un nuevo servidor con el nombre wordpress y el host localhost. Configura el puerto a 8000. Asegúrate de que las asignaciones de rutas estén configuradas correctamente: la ruta absoluta en el servidor para la carpeta wp_data debe ser /var/www/html.
- Instalar la extensión Xdebug helper: Instala la extensión Xdebug helper para Google Chrome. Una vez instalada, haz clic en el icono de error y configura la clave IDE a PHPSTORM.
- Comenzar a escuchar conexiones de depuración PHP: En PhpStorm, haz clic en el icono de error en la esquina superior derecha para comenzar a escuchar conexiones de depuración PHP.
- Comenzar a depurar: Con los pasos anteriores completados, estás listo para comenzar a depurar tu aplicación de WordPress. Simplemente establece tus puntos de interrupción en PhpStorm según sea necesario, luego simplemente recarga tu sitio web. ¡Feliz depuración!
Conclusión
Al concluir este tutorial, espero que se convierta en un recurso valioso para ti como lo ha sido para mí en mi camino. La capacidad de personalizar esta configuración, como lo hicimos al agregar el archivo phpinfo.php, abre un sinfín de posibilidades, haciendo nuestro proceso de desarrollo más robusto y eficiente. Todo el código está disponible en este repositorio de GitHub. ¡No dudes en clonarlo, probarlo y sugerir mejoras!
Personalmente uso un sistema operativo Ubuntu, ¡pero la belleza de esta configuración es que gracias a Docker no importa! Gracias al hecho de que Docker puede ejecutarse en cualquier sistema operativo por igual, ya sea que prefieras macOS, Windows o Linux, la configuración y el uso son los mismos.
Gracias por acompañarme en este recorrido. Espero escuchar de ti sobre tus experiencias o cualquier sugerencia que puedas tener para mejorar aún más esta configuración. Recuerda, el crecimiento prospera con el conocimiento compartido y el espíritu de colaboración.
¡Feliz codificación, y sigamos creando experiencias increíbles de WordPress juntos!