Настройка локального окружения для разработки на основе Docker и WordPress

В этой статье мы вместе с разработчиком We Wizards Константином Агафоновым подробно на практике разберемся, как настроить локальное окружение для разработки сайта на WordPress с помощью Docker (все примеры команд и кода приводятся для операционной системы Linux).

Docker — это платформа, которая позволяет упаковать в контейнер приложение со всем окружением и зависимостями, а затем доставить и запустить его в целевой системе. Похож на виртуальные машины (VirtualBox, WMvare), но работает по немного другим принципам. В этой статье мы не будем погружаться в теоретические тонкости или разбирать установку Docker на чистую систему. Предлагаю вам самостоятельно установить его по инструкции на официальном сайте. Также вам будут необходимы приложение Docker Compose (про его установку здесь), аккаунт на Github и настроенные ключи по инструкции.

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

Теперь клонируем только что созданный репозиторий в локальную папку:

На локальной системе в консоли переходим в папку, где необходимо создать локальную папку для разработки, и вводим команды:

Заходим на публичный репозиторий образов для Docker и ищем образ, который содержит CMS WordPress:

Находим строку Example docker-compose.yml for wordpress: и копируем код, который идет после этой строки. В рабочей папке создаем файл с названием docker-compose.уml и вставляем в него скопированный код, заменив в первой строке значение 3.1 на 3.8:

Запускаем в консоли команду:

По завершении процесса переходим в браузере по URL http://localhost:8080 и видим стандартный интерфейс установки WordPress, и после установки получаем полностью рабочий сайт:

Здесь необходимо пояснить, что произошло. После команды docker compose up Docker скачал с hub.docker.com необходимые образы WordPress и MySQL (в конфигурационном файле docker-compose.уml за это отвечают строки wordpress: image: wordpress и db: image: mysql:5.7), а затем на их основе создал контейнеры и запустил их. Список запущенных контейнеров можно посмотреть по команде:

Здесь мы имеем два контейнера: WordPress содержит исполняемые файлы CMS WordPress, MySQL содержит базу данных. Cтроки ports: - 8080:80 указывают Docker пробросить внутренний стандартный http-порт контейнера 80 наружу через порт 8080. Другими словами, при обращении извне контейнера на порт 8080 идет обращение внутрь контейнера на порт 80. Если эти строки убрать, то обратиться из браузера к WordPress извне мы не сможем.

Вы, наверное, заметили, что при установке WordPress пропускается стандартный шаг интерфейса установки, где предлагается ввести данные БД — название, имя пользователя и пароль. Это происходит потому что в конфигурации Docker уже зашиты эти данные. В разделе db: image: mysql:5.7 указаны переменные среды, содержащие доступ к БД:

Эти же данные используются в разделе wordpress: image: wordpress:

Ведь для этого нам необходимо открыть папку темы WordPress в редакторе кода. Остановим контейнеры Docker командой:

Сохраним текущее состояние репозитория в гите:

Код темы можно было бы хранить в том же репозитории docker_wordpress_local, что и конфигурацию, но мы разделим эти части окружения на разные репозитории. Для этого используем функционал git — сабмодули (сабмодуль (submodule) — это репозиторий внутри другого репозитория в подпапке). Создаем еще один репозиторий для темы WordPress, заходим на его страницу и копируем URL в адресной строке браузера. В родительском репозитории docker_wordpress_local выполняем команду:

После выполнения этой команды создался файл .gitmodules со следующим содержимым:

Также появляется подпапка my_wordpress_theme c содержимым репозитория темы. Сохраним изменения в родительском репозитории:

Настройка сабмодуля завершена. Если мы будем клонировать родительский репозиторий на новом месте, то необходимо добавлять параметр --recurse-submodules к команде git clone:

Заполним заготовку темы. Для этого заходим в папку темы и создаем файл style.css со следующим содержимым:

Создадим пустой файл functions.php и index.php со следующим содержимым:

Cохраним изменения в репозитории темы:

После каждого изменения в сабмодуле необходимо сохранять изменения и в родительском репозитории:

В файле docker-compose.yml после volumes: - wordpress:/var/www/html добавляем строку: добавляем строку:

Важно соблюдать количество пробелов. Запускаем Docker снова командой:

Заходим в амдинку сайта по URL localhost:8080/wp-admin. В разделе Внешний вид > Темы появилась созданная нами тема. Активируем ее, переходим на фронтенд сайта и видим фразу “Привет, мир!”. Открываем папку my_wordpress_theme в редакторе кода, меняем фразу в файле index.php на другую и перезагружаем фронт сайта в браузере. Видим, что изменения в файле index.php применились. Это произошло, потому что добавив строку, мы добавили дополнительный volume с содержанием папки my_wordpress_theme, и эта папка отражается на папку /var/www/html/wp-content/themes/my_wordpress_theme внутри контейнера.