Наконец-то у меня дошли руки разобраться с Docker и написать свою конфигурацию для работы с Vesp.

Теперь не нужно заморачиваться настройкой локального окружения через Valet, а можно просто запустить разработку в контейнере.

Вам будет доступна и база данных, и hot reload при разработке фронтенда, и даже Xdebug.

Установка

Для работы у вам уже должен быть установлен Docker на компьютере.

Скачиваем исходники из https://github.com/bezumkin/vesp.git, и переходим в директорию vesp/docker/. Затем переименовываем .env.dist в .env и запускаем docker-compose up.

Всё то же самое, только для любителей консоли:

git clone https://github.com/bezumkin/vesp.git
cd vesp/docker/
cp .env.dist .env
docker-compose up

В файле docker/.env находятся настройки и для контейнеров, и для запущенного внутри них Vesp.

При первом запуске придётся подождать минут 5-10, пока всё скачается и соберётся, но это только в первый раз, затем всё быстро.

Пока контейнеры запущены, вы будете видеть лог сообщений из них. Прервать работу можно обычным Ctrl+c,

Работа

После запуска вам доступны:

  • 127.0.0.1:8080/ - Nginx сервер, который открывает собранные версии сайта и админки + отвечает на API запросы.
  • 127.0.0.1:4000/admin/ - это админка в режиме разработки
  • 127.0.0.1:4100/ - веб-сайт в режиме разработки
  • 127.0.0.1:3333 - внешний порт MySQL, база vesp, юзер и пароль такие же

Теперь нужно зайти в контейнер с PHP и запустить наши миграции. Вход делается командой docker exec -it idконтейнера, и чтобы не узнавать каждый раз этот id, делаем вот так:

docker exec -it $(docker ps --filter ancestor="vesp_php-fpm" -q) bash

Вы окажетесь в обычной консоли сервера, сразу в рабочей директории, где можно запускать composer:

composer install
composer db:migrate
composer db:seed

Если вы пользуетесь десктопным приложением, то там заходить в контейнеры можно прямо через интерфейс.

Статичные страницы для Nginx собираются в том случае, если при запуске контейнеров не было обнаружено директории frontend/dist. Так что если хотите пересобрать статику, то просто удалите эту директорию и перезапустите контейнеры.

Xdebug

В контейнере с PHP встроен Xdebug, и вы можете легко использовать его для отладки в PhpStorm.

Первым делом создаём новый сервер с обязательным именем VespDocker, прописываем адрес и порт контейнера Nginx и задаём соответствие 2х директорий: core и www:

Ну и настраиваем сам Xdebug примерно так:

Дальше указываем точку остановки где-нибудь в проекте, например в api.php и жмём на трубку в правом верхнем углу, чтобы она стала зелёной:

Теперь при каждом запросе в API ваш PhpStorm будет тормозить в указанном месте и ждать, пока вы там всё посмотрите.

Заключение

Выражаю благодарность Евгению Терину за его конфиги docker-compose, которыми я вдохновлялся, пока писал свои.

Надеюсь теперь познакомиться и начать работу с Vesp будет проще!

Обновлено 25.07.2022

Как оказалось, из-за особенностей работы MacOS с файловой системой, Docker в ней работает не очень быстро.

Почитал о проблеме и добавил работу через Mutagen Compose, который меняет логику синхронизации файлов между хостом и доком, ускоряя её разы.

Установить его можно через Homebrew:

brew install mutagen-io/mutagen/mutagen mutagen-io/mutagen/mutagen-compose

А затем запускать mutagen-compose вместо docker-compose:

mutagen-compose -f ./mutagen-compose.yml up --build

То есть, теперь у Vesp есть стандартный docker-compose.yml, и расширенный mutagen-compose.yml, которые запускаются разными командами.

И чтобы вам не заморачиваться их запоминанием, я добавил скрипт run.sh, который пытается запустить контейнеры через mutagen, а если его нет, то стандартным способом.

Разница между ними очень серьёзная. Установка зависимостей Node.js на моём Mac Mini M1 занимает:

  • 245 секунд стандартным docker-compose
  • 90 секунд при запуске через mutagen-compose
  • 71 секунда при установке вообще без Docker, с локальным Node.js

Таким образом, если вы хотите работать с Docker на MacOS, обязательно установите Mutagen, это даст вам производительность сопоставимую с нативной работой с файлами.

← Предыдущая заметка
Быстрый личный VPN через Wireguard
Следующая заметка →
Тестируем VirtioFS в Docker
Комментарии (0)
inetlover
Александр Наумов
27.09.2022 22:16
Василий, спасибо тебе большое! Обалдеть, как круто!
Сергей Лелеко
26.09.2022 10:22
Тоже задействовал! Прекрасная функция!
inetlover
Александр Наумов
19.09.2022 11:56
Компонента Sidebar у Bootstrap нет, значит нужны только стили из Bootstrap-Vue @import '~boot...
bezumkin
Василий Наумкин
13.08.2022 14:41
неужели, все глобальное, так просто можно взять и сделать Да, именно так. Мелкие затыки, конечно ж...
bezumkin
Василий Наумкин
13.08.2022 11:18
Killed говорит, что сервер прибивает задачу, скорее всего у провайдера есть какие-то лимиты по нагру...
bezumkin
Василий Наумкин
11.08.2022 18:46
Класс!! Рад, что тебе нравится! нужно добавить @click="showCart = true" в: Спасибо, попра...
bezumkin
Василий Наумкин
09.08.2022 14:27
На здоровье!
inetlover
Александр Наумов
30.07.2022 22:58
Василий, спасибо большое! Первый вариант помог, не было вот этой настройки: php_value[sys_temp_dir].
bezumkin
Василий Наумкин
06.07.2022 17:06
Базовый Vue, базовый ES 6: импорт-экспорт модулей, вот это всё. Если что-то будет непонятно - просто...
bezumkin
Василий Наумкин
06.07.2022 14:19
Спасибо, что читаешь!