WPML 5.0 Beta – Una experiencia rediseñada y una traducción automática más inteligente
WPML 5.0 es la mayor actualización que hemos publicado en años.
Con Docker Compose, Xdebug y PhpStorm, puede crear un entorno de desarrollo local reproducible, aislado y fácil de gestionar que refleja un servidor de producción, mejorando la calidad de sus proyectos de WordPress.
¡Hola, compañeros desarrolladores de WordPress y usuarios avanzados! Hoy me complace compartir un tutorial completo pero sencillo sobre cómo configurar un entorno de desarrollo local de WordPress utilizando Docker Compose. Tras haberme incorporado recientemente al dinámico equipo de OnTheGoSystems, decidí traer conmigo mi zona de confort, que es de lo que trata esta configuración.
El objetivo era sencillo: desarrollar una configuración en la que pudiera tener un control granular sobre mis herramientas de desarrollo, integrando Xdebug y WP-CLI con la imagen oficial de Docker para WordPress. Esta configuración no trata de reinventar la rueda, sino de personalizarla para que se adapte a las preferencias y estilos de trabajo individuales. Espero que esta guía le resulte útil para configurar un entorno similar y mejorar su experiencia en el desarrollo de WordPress.
Requisitos previos
Para aprovechar al máximo este tutorial, necesitará tener instaladas las siguientes dependencias:
- Docker: Utilizaremos 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 potente es su promesa de control granular, lo que nos permite 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 adapte exactamente a nuestras necesidades.
- Extensión de Xdebug para Chrome: Esta extensión del navegador nos ayudará a revisar nuestro código paso a paso, detectar errores y mejorar la calidad general de nuestros proyectos de WordPress.
- PhpStorm: Un IDE inteligente y completo para PHP desarrollado por JetBrains. Proporciona un editor para PHP, HTML y JavaScript con análisis de código sobre la marcha y refactorización automática 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ácil de gestionar. 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, ya que ofrecen capacidades mejoradas de desarrollo y depuración de código PHP.
Nuestro viaje comenzará con la creación de un Dockerfile que amplía la imagen oficial de Docker para 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 de Docker Compose para orquestar dos servicios clave: WordPress y MySQL. Y, aunque no lo crea, ¡eso es básicamente todo!
La belleza de esta configuración es que da como resultado 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, garantizando la consistencia y reduciendo los 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 le indica a Docker cómo construir nuestra imagen. Esta es 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 facilidad de mantenimiento. El archivo de configuración de Xdebug (xdebug.ini) se copia en el directorio correspondiente del 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 activan la extensión Xdebug, la configuran para que inicie la depuración con cada petición y definen el puerto del cliente al que debe conectarse (en este caso, 9003). Habrá notado que aún no hemos especificado un client_host, pero no se preocupe, entrará en juego muy pronto en nuestro proceso de configuración.
Paso 3: El archivo de Docker Compose
A continuación, crearemos un archivo docker-compose.yml que configure 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 facilitar su referencia y gestión.
La directiva restart: always garantiza que el servicio siempre se reiniciará si se detiene inesperadamente. Si se detiene manualmente, solo se reiniciará cuando el contenedor se reinicie manualmente.
El servicio MySQL monta un volumen de Docker (db_data), lo que garantiza un 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 de nuestro sistema local se reflejará en el contenedor.
Hemos añadido dos variables de entorno adicionales para el servicio de WordPress: WORDPRESS_DEBUG para activar la depuración de WordPress y XDEBUG_CONFIG para especificar el host del cliente para Xdebug. El client_host está configurado como host.docker.internal, que es un nombre DNS especial que enruta a la dirección IP interna del host, permitiendo a Xdebug comunicarse 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 a través del comando de terminal ip addr show.
Paso 4: Ejecutar su entorno de desarrollo local de WordPress
Una vez que su Dockerfile, el archivo de configuración de Xdebug y el archivo de Docker Compose estén listos, es el momento de dar vida a su entorno de desarrollo local de WordPress.
Para ello, simplemente navegue hasta el directorio que contiene su archivo de Docker Compose en la terminal y ejecute el siguiente comando:
bash docker-compose up -d
Este comando le indicará a Docker que inicie sus servicios en segundo plano.
Tras una ejecución exitosa, tendrá un sitio de WordPress funcionando en su máquina local, accesible a través de http://localhost:8000. Cualquier cambio que realice en sus archivos PHP de WordPress se reflejará ahora en este sitio, ofreciendo una forma fácil y efectiva de desarrollar y depurar su aplicación de WordPress.
Además, su servicio 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. Al acceder a él, este archivo presentará una visión general completa de sus ajustes de PHP.
Para añadir el archivo phpinfo.php, primero tendrá que 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 asegurarse de que estos cambios surtan efecto, tendrá que 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 actuales de Docker. A continuación, 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, la cual puede ser un recurso valioso para la depuración y verificación.
Paso 5: Iniciar la depuración
Ahora que tiene configurado su entorno de desarrollo local de WordPress con Docker, Xdebug y PhpStorm, puede empezar a depurar su sitio de WordPress. Aquí tiene un breve resumen de cómo empezar:
- Configurar Xdebug en PhpStorm: Abra PhpStorm y vaya a File → Settings (Preferences en Mac) → Languages & Frameworks → PHP → Debug. En la sección Xdebug, asegúrese de que el Debug port esté configurado en 9003 y que la opción Can accept external connections esté marcada.
- Añadir un servidor en PhpStorm: Navegue hasta PHP → Servers. Añada un nuevo servidor con el nombre wordpress y el host localhost. Configure el puerto en 8000. Asegúrese 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: Instale la extensión Xdebug helper para Google Chrome. Una vez instalada, haga clic en el icono del bicho y configure la clave del IDE como PHPSTORM.
- Empezar a escuchar las conexiones de depuración de PHP: En PhpStorm, haga clic en el icono del bicho en la esquina superior derecha para empezar a escuchar las conexiones de depuración de PHP.
- Iniciar la depuración: Con los pasos anteriores completados, ya está listo para empezar a depurar su aplicación de WordPress. Solo tiene que establecer sus puntos de interrupción en PhpStorm según sea necesario y luego simplemente recargar su sitio web. ¡Feliz depuración!
Conclusión
Al concluir este tutorial, espero que se convierta en un recurso valioso para usted como lo ha sido para mí en mi trayectoria. La capacidad de personalizar esta configuración, como hicimos al añadir el archivo phpinfo.php, abre un sinfín de posibilidades, haciendo que nuestro proceso de desarrollo sea más robusto y eficiente. Todo el código está disponible en este repositorio de GitHub. ¡No dude en descargarlo, probarlo y sugerir mejoras!
Personalmente utilizo un sistema operativo Ubuntu, pero la belleza de esta configuración es que, gracias a Docker, ¡eso no importa! Gracias al hecho de que Docker puede ejecutarse en cualquier sistema operativo por igual, ya sea que prefiera macOS, Windows o Linux, ¡la configuración y el uso son los mismos!
Gracias por acompañarme en este recorrido. Espero conocer sus experiencias o cualquier sugerencia que pueda tener para seguir mejorando esta configuración. Recuerde que el crecimiento prospera gracias al conocimiento compartido y al espíritu de colaboración.
¡Feliz programación y sigamos creando experiencias increíbles en WordPress juntos!
