Настройка локальной среды разработки WordPress с помощью Docker, Xdebug и PhpStorm

С помощью Docker Compose, Xdebug и PhpStorm Вы можете создать воспроизводимую, изолированную и легко управляемую локальную среду разработки, которая является точной копией рабочего сервера, что повысит качество Ваших проектов на WordPress.

Приветствую коллег-разработчиков WordPress и опытных пользователей! Сегодня я рад поделиться подробным, но простым руководством по настройке локальной среды разработки WordPress с использованием Docker Compose. Недавно став частью динамичной команды OnTheGoSystems, я решил перенести свою привычную рабочую среду с собой, чему и посвящена эта настройка.

Цель была простой: создать среду, в которой у меня был бы детальный контроль над инструментами разработки, интегрировав Xdebug и WP-CLI с официальным образом WordPress для Docker. Речь идет не об изобретении велосипеда, а о его адаптации под индивидуальные предпочтения и стиль работы. Надеюсь, что это руководство поможет Вам в настройке аналогичной среды и сделает Вашу работу с WordPress еще эффективнее.

Предварительные требования

Чтобы извлечь максимум пользы из этого руководства, Вам потребуется установить следующие зависимости:

1. Docker: мы будем использовать Docker в качестве основного инструмента для создания, развертывания и запуска приложений с использованием контейнеров. Он позволяет упаковать приложение со всеми необходимыми компонентами в контейнер и поставлять его как единое целое. Что делает Docker еще более мощным, так это возможность детального контроля, позволяющая точно определять каждый аспект настройки нашего приложения. Этот контроль помогает создать среду разработки, которая идеально соответствует нашим потребностям.
2. Расширение Xdebug для Chrome: это расширение для браузера поможет нам пошагово выполнять код, находить ошибки и повышать общее качество наших проектов на WordPress.
3. PhpStorm: умная и полнофункциональная IDE для PHP, разработанная компанией JetBrains. Она предоставляет редактор для PHP, HTML и JavaScript с анализом кода на лету и автоматическим рефакторингом для этих языков.

Почему именно Docker, Xdebug и PhpStorm?

Наша цель — создать локальную среду разработки WordPress, которая будет изолированной, воспроизводимой и легко управляемой. Docker составляет основу этой системы, предоставляя инфраструктуру для контейнеризации приложения и управления им. Xdebug и PhpStorm дополняют эту картину, предлагая расширенные возможности для разработки и отладки PHP-кода.

Наш путь начнется с создания файла Dockerfile, который расширяет официальный образ WordPress для Docker. Мы улучшим этот образ, добавив Xdebug и WP-CLI — инструменты, играющие ключевую роль в задачах разработки и отладки WordPress.

Затем мы составим файл Docker Compose для координации двух ключевых сервисов: WordPress и MySQL. И, хотите верьте, хотите нет, но на этом, по сути, всё!

Прелесть этой настройки в том, что в результате получается локальная среда разработки, которая не только является точной копией рабочего сервера, но и легко воспроизводится. Это означает, что мы можем без труда продублировать точно такую же конфигурацию в нескольких средах или на разных машинах, обеспечивая согласованность и снижая количество проблем, связанных с настройкой.

Пошаговое руководство

Шаг 1: файл Dockerfile

Наш путь начинается с создания нового файла Dockerfile. Этот файл указывает Docker, как собрать наш образ. Вот базовая конфигурация, с которой я обычно начинаю:

# 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

В этом Dockerfile мы берем за основу официальный образ WordPress. Затем мы устанавливаем Xdebug и WP-CLI отдельно для ясности и удобства обслуживания. Конфигурационный файл Xdebug (xdebug.ini) копируется в соответствующий каталог внутри контейнера. Это формирует основу моей стандартной конфигурации локальной среды разработки WordPress.

Шаг 2: конфигурационный файл Xdebug (xdebug.ini)

Теперь, когда Xdebug установлен в нашем образе Docker, нам нужно настроить его для работы в локальной среде разработки. Для этого необходимо создать файл xdebug.ini со следующими настройками:

ini
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_port=9003
xdebug.start_with_request=yes

Эти настройки включают расширение Xdebug, задают запуск отладки при каждом запросе и определяют порт клиента, к которому оно должно подключаться (в данном случае 9003). Возможно, Вы заметили, что мы еще не указали client_host, но не волнуйтесь, он появится очень скоро в процессе нашей настройки.

Шаг 3: файл Docker Compose

Далее мы создадим файл docker-compose.yml, который настраивает наши сервисы WordPress и 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:

В этом файле мы определили два сервиса — MySQL и WordPress. Оба этих сервиса имеют уникальные имена контейнеров для упрощения обращения к ним и управления.

Директива restart: always гарантирует, что сервис всегда будет перезапускаться в случае непредвиденной остановки. Если он остановлен вручную, он перезапустится только при ручном перезапуске контейнера.

Сервис MySQL монтирует том Docker (db_data), обеспечивая постоянное хранение данных даже при удалении контейнера. Для сервиса WordPress мы монтируем локальный каталог (./wp_data) в контейнер. Это означает, что любые изменения в файлах WordPress в нашей локальной системе будут отражаться в контейнере.

Мы добавили две дополнительные переменные окружения для сервиса WordPress: WORDPRESS_DEBUG для включения отладки WordPress и XDEBUG_CONFIG для указания хоста клиента для Xdebug. Для client_host задано значение host.docker.internal — это специальное DNS-имя, которое маршрутизируется на внутренний IP-адрес хоста, позволяя Xdebug обмениваться данными с нашей IDE на хосте.

Обратите внимание, что настройка client_host адаптирована для Windows и macOS. Для Linux распространенной альтернативой является замена host.docker.internal на фактический IP-адрес Вашей машины, который можно узнать с помощью команды терминала ip addr show.

Шаг 4: запуск локальной среды разработки WordPress

Когда Ваши файлы Dockerfile, конфигурационный файл Xdebug и файл Docker Compose будут готовы, придет время запустить локальную среду разработки WordPress.

Для этого просто перейдите в каталог, содержащий Ваш файл Docker Compose, в терминале и выполните следующую команду:

bash
docker-compose up -d

Эта команда укажет Docker запустить Ваши сервисы в фоновом режиме.

После успешного выполнения на Вашей локальной машине будет запущен сайт WordPress, доступный по адресу http://localhost:8000. Любые изменения, которые Вы вносите в PHP-файлы WordPress, теперь будут отражаться на этом сайте, предлагая простой и эффективный способ разработки и отладки Вашего приложения на WordPress.

Кроме того, будет запущен и сервис MySQL, доступный через порт 3306. Это обеспечивает полнофункциональную базу данных MySQL для Вашего приложения на WordPress, воссоздавая реалистичную среду для задач разработки.

Шаг 4.5: бонусный шаг — добавление файла phpinfo.php

Для тех, кто хочет глубже изучить конфигурацию PHP, мы можем добавить файл phpinfo.php в наш образ Docker. При обращении к этому файлу будет представлен подробный обзор Ваших настроек PHP.
Чтобы добавить файл phpinfo.php, Вам сначала нужно создать его в том же каталоге, что и Ваш Dockerfile. Файл должен содержать следующий PHP-код:

<?php phpinfo(); ?>

Затем добавьте следующую строку в Ваш Dockerfile:

# Bonus: Copy phpinfo.php into the container
COPY phpinfo.php /var/www/html/phpinfo.php

Эта команда скопирует файл phpinfo.php в корневой каталог WordPress внутри образа Docker.

Чтобы эти изменения вступили в силу, Вам нужно будет пересобрать образ Docker и перезапустить сервисы Docker Compose. Выполните следующие команды в терминале:

bash
docker-compose down
docker-compose up -d --build

Команда docker-compose down останавливает и удаляет Ваши текущие контейнеры Docker. После этого команда docker-compose up -d –build пересобирает образ Docker с недавно добавленным файлом phpinfo.php и перезапускает сервисы WordPress и MySQL в фоновом режиме.
Теперь Вы можете получить доступ к файлу phpinfo.php, перейдя по адресу http://localhost:8000/phpinfo.php в Вашем веб-браузере. Здесь Вы увидите подробную страницу с описанием конфигурации PHP, которая может стать ценным ресурсом для отладки и проверки.

Шаг 5: запуск отладки

Теперь, когда Ваша локальная среда разработки WordPress настроена с помощью Docker, Xdebug и PhpStorm, Вы можете приступить к отладке сайта на WordPress. Вот краткое описание того, как начать:

1. Настройте Xdebug в PhpStorm: откройте PhpStorm и перейдите в File → Settings (Preferences на Mac) → Languages & Frameworks → PHP → Debug. В разделе Xdebug убедитесь, что для параметра Debug port установлено значение 9003 и установлен флажок Can accept external connections .
2. Добавьте сервер в PhpStorm: перейдите в раздел PHP → Servers. Добавьте новый сервер с именем wordpress и хостом localhost. Установите порт 8000. Убедитесь, что сопоставления путей настроены правильно: абсолютный путь на сервере для папки wp_data должен быть /var/www/html.
3. Установите расширение Xdebug helper: установите расширение Xdebug helper для Google Chrome. После установки нажмите на значок жука и установите ключ IDE на PHPSTORM.
4. Запустите прослушивание подключений для отладки PHP: в PhpStorm нажмите на значок жука в правом верхнем углу, чтобы начать прослушивание подключений для отладки PHP.
5. Начните отладку: выполнив предыдущие шаги, Вы готовы начать отладку Вашего приложения на WordPress. Просто установите точки останова в PhpStorm по мере необходимости, а затем просто перезагрузите сайт. Удачной отладки!

Заключение

В завершение этого руководства я надеюсь, что оно станет для Вас таким же ценным ресурсом, каким было для меня в моей работе. Возможность настройки этой среды — как мы это сделали, добавив файл phpinfo.php — открывает множество возможностей, делая наш процесс разработки более надежным и эффективным. Весь код доступен в этом репозитории GitHub. Не стесняйтесь скачивать его, пробовать и предлагать улучшения!

Лично я использую ОС Ubuntu, но прелесть этой конфигурации в том, что благодаря Docker это не имеет значения! Поскольку Docker может одинаково работать в любой операционной системе, предпочитаете ли Вы macOS, Windows или Linux, настройка и использование остаются неизменными!

Спасибо, что прошли это руководство вместе со мной. Надеюсь услышать от Вас о Вашем опыте или любых предложениях по дальнейшему улучшению этой конфигурации. Помните, что развитие основывается на обмене знаниями и духе сотрудничества.

Успешного программирования, и давайте продолжать создавать потрясающие проекты на WordPress вместе!