WordPress

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

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

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

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

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

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

> git clone git@github.com:konstantin-agafonov/docker_wordpress_local.git
> ls docker_wordpress_local

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

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

version: '3.8'

services:

  wordpress:

    image: wordpress

    restart: always

    ports:

      - 8080:80

    environment:

      WORDPRESS_DB_HOST: db

      WORDPRESS_DB_USER: exampleuser

      WORDPRESS_DB_PASSWORD: examplepass

      WORDPRESS_DB_NAME: exampledb

    volumes:

      - wordpress:/var/www/html

  db:

    image: mysql:5.7

    restart: always

    environment:

      MYSQL_DATABASE: exampledb

      MYSQL_USER: exampleuser

      MYSQL_PASSWORD: examplepass

      MYSQL_RANDOM_ROOT_PASSWORD: '1'

    volumes:

      - db:/var/lib/mysql

volumes:

  wordpress:

  db:

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

> docker compose up -d --build

По завершении процесса переходим в браузере по 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), а затем на их основе создал контейнеры и запустил их. Список запущенных контейнеров можно посмотреть по команде: 

> docker ps

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

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

  environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'

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

    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb

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

> docker compose down

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

> git add -A
> git commit -m ‘docker-compose.уml версия 1’
> git push

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

> git submodule add https://github.com/konstantin-agafonov/my_wordpress_theme

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

[submodule "my_wordpress_theme"]
path = my_wordpress_theme
url = https://github.com/konstantin-agafonov/my_wordpress_theme

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

> git add -A
> git commit -m ‘Создаёт сабмодуль темы’
> git push

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

> git clone --recurse-submodules git@github.com:konstantin-agafonov/docker_wordpress_local.git

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

/* Theme Name: My wordpress theme */

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

<?php echo "Привет, мир!";

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

> git add -A
> git commit -m ‘Заготовка темы’
> git push

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

> cd ..
> git add -A
> git commit -m ‘Изменения в сабмодуле’
> git push

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

    volumes:
      - wordpress:/var/www/html
      - ./my_wordpress_theme:/var/www/html/wp-content/themes/my_wordpress_theme

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

> docker compose up -d --build

Заходим в амдинку сайта по 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 внутри контейнера. 

Готово! Теперь мы имеем полностью настроенное окружение, достаточное для локальной разработки на WordPress.