Наконец-то у меня дошли руки разобраться с 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 name="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, это даст вам производительность сопоставимую с нативной работой с файлами.

Обновлено 02.12.2022

Мутаген больше не нужен - https://bezumkin.ru/sections/servers/3100

← Предыдущая заметка
Быстрый личный VPN через Wireguard
Следующая заметка →
Тестируем VirtioFS в Docker
Комментарии (26)
NightRider
23.10.2022 15:30

Что-то установка падает на этапе установки xdebug.

Step 6/12 : RUN pecl install xdebug
---> Running in 00684a0e23b5
Package "xdebug" Version "3.1.5" does not have REST xml available install failed
ERROR: Service 'php-fpm' failed to build: The command '/bin/sh -c pecl install xdebug' returned a non-zero code: 1

NightRider
23.10.2022 20:44

Это на Ubuntu 22.04 такая ошибка, а на Маке всё поднялось.

bezumkinВасилий Наумкин
24.10.2022 06:12

У меня в последнее время бывают подобные ошибки из-за плохой связи. Исправляется повторной попыткой, или включением VPN.

Думаю это потому, что основные репозитории Docker находятся за рубежом, и соединение не всегда стабильное.

Сейчас проверил на Ubuntu 22.04.1 LTS - нет проблем, всё сразу завелось.

NightRider
24.10.2022 11:17

Понял, буду пробовать ещё. С Днём Рождения! )

bezumkinВасилий Наумкин
24.10.2022 15:10

Спасибо!

ni.kolokol@mail.ruНиколай Каленников
03.11.2022 14:49

Тоже Ubuntu 22.04. Все собралось успешно. Но почему-то запросы к api вылетают с 500 ошибкой. В консоли браузера показывает ошибку CORS, хотя в файле настроек CORS=1.

bezumkinВасилий Наумкин
03.11.2022 17:14

Это ошибка бэкенда - смотри логи.

ni.kolokol@mail.ruНиколай Каленников
03.11.2022 19:17

Ничего подозрительного в логах не нашел. Но вот когда меняешь урл с http://localhost:8080 на http://127.0.0.1:8080 то в админке авторизует без ошибки и все работает. Для портов 4000 и 4100 такой фокус не проходит.

bezumkinВасилий Наумкин
03.11.2022 19:36

Но вот когда меняешь урл с http://localhost:8080 на http://127.0.0.1:8080 то в админке авторизует без ошибки

Ну тогда дело и правда в CORS.

Но я только что по своей инструкции всё повторил с нуля и ошибок нет.

ni.kolokol@mail.ruНиколай Каленников
03.11.2022 19:43

Спасибо. Попробую тоже с нуля переставить

gvozdbПавел Гвоздь
14.01.2023 23:05

127.0.0.1:4000/admin/ - это админка в режиме разработки

При попытке войти под юзером admin/admin через эту версию админки, выдаёт "Ошибка 500: Ошибка сервера". Это проблема с CORS или с чем-то ещё? Vesp в докере запущен не на локалке, а на сервере с Ubuntu 16.

При этом без ошибок входит в админку на порту 8080.

gvozdbПавел Гвоздь
15.01.2023 08:57

Да, кстати, пишет CORS error http://joxi.ru/zANqX6NUwJyZ82

В .env, конечно же, прописал корректные и SITE_URL, и API_URL. Корректные – это значит, с портом 8080.

bezumkinВасилий Наумкин
15.01.2023 09:42

А корректные - это какие?

Проверил у себя сейчас: запустил на компе с Mac, прописал в .env внешний локальный IP

API_URL=http://192.168.0.254:8080/api/

Теперь все API запросы админки, неважно по какому адресу её открываешь (localhost или внешний), уходят на этот адрес. Понятное дело, он должен быть всем доступен по сети.

Проверил с другой машины - всё работает.

gvozdbПавел Гвоздь
15.01.2023 10:34

А корректные - это какие?

Пробовал и API_URL=http://domain.ru/api/, естественно предварительно настроив на NGINX сервера проксирование для данного домена:

location / {
    proxy_pass http://localhost:8080/;
}

Также пробовал и просто IP сервера прописать с портом 8080 API_URL=http://IP_сервера:8080/api/.

И в том, и в другом случае, главная страница и страница админки открываются (в первом случае по домену, во втором – по IP:8080) и запросы в API проходят корректно. Также открывается и админка в режиме разработки на порте 4000. Но вот запросы в API оттуда уже не проходят – пишет ошибку связанную с CORS.

bezumkinВасилий Наумкин
15.01.2023 10:48

Там принцип работы простой - фронт грузится в браузер и делает запросы на API_URL.

и запросы в API проходят корректно

Тот фронт, который открывается на 8080 - это production build, изменения .env его не трогают никак, пока не пересоберёшь. А вот порты 4000 и 4100 - это режим разработки, они читают .env при каждом запуске.

Ты, кстати, какой .env редактируешь? Который в docker лежит? Нужно именно его, если запускаешь в Docker.

В любом случае проверяй в браузере вкладку сети и смотри на какой IP идут запросы. Твой API должен открываться и по прямому запросу, например вот так:

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

gvozdbПавел Гвоздь
15.01.2023 11:02

пока не пересоберёшь

какой .env редактируешь? Который в docker лежит? Нужно именно его

Это то понятно.

Твой API должен открываться и по прямому запросу

Он вроде и открывается, только что-то криво. http://joxi.ru/eAOgxWJuGwDnYA

Тем не менее, через порт 8080 API корректно отрабатывает, не смотря на эту ошибку. А через порт 4000 запросы не принимает, из-за CORS. А как можно этот CORS отключить? В .env CORS=0?

bezumkinВасилий Наумкин
15.01.2023 11:13

Так создай директорию tmp в корне проекта -)

Про CORS почитай в инете, его отключить нельзя, это браузер делает.

gvozdbПавел Гвоздь
15.01.2023 11:21

Так создай директорию tmp в корне

Она была, конечно же) Но ты натолкнул меня на мысль, что может в правах дело. Дал права 777 на tmp и решилась проблема, о которой я даже не подозревал – в билд админки начал входить корректно. Ранее он входил под любыми данные доступа, как оказалось, а сейчас начал выдавать ошибку при неправильном логин-пароле и при входе в admin/admin теперь появились разделы "Пользователи" и "Группы".

Видимо из-за того, что я делаю всё от рута... Сейчас попробую настроить корректные права доступа и запущу контейнеры из под юзера.

bezumkinВасилий Наумкин
15.01.2023 11:23

Прикольно!

Рад, что заработало!

gvozdbПавел Гвоздь
15.01.2023 11:24

Оно не заработало. Проблема с CORS в админке в режиме разработки как была, так и осталась))

bezumkinВасилий Наумкин
15.01.2023 11:26

Я тогда уже не знаю что предложить и посоветовать.

Копай, разбирайся, потом расскажешь в чем было дело.

gvozdbПавел Гвоздь
15.01.2023 11:32

Ну тогда вот ещё:

  1. При установке сначала возникала ошибка ERROR [stage-0 5/10] RUN pecl install xdebug в контейнере php-fpm. Решилось установкой дополнительных модулей перед установкой xdebug (наверняка есть лишние, но я не стал разбираться, какой ему именно нужен):
RUN apk add --no-cache aspell gettext gnu-libiconv grpc icu imagemagick imap-dev libzip libbz2 librdkafka libxml2-utils libpq libmemcached libssh2 libevent libev libxslt linux-headers lua openldap openldap-back-mdb tidyhtml yaml zlib
  1. Дальше возникала проблема с MariaDB. Когда из контейнера php-fpm пытаешься запустить composer db:migrate, выдавал такую ошибку: [ERROR] [Entrypoint]: mariadbd failed while attempting to check config Can't initialize timers. Решилось уточнением версии MariaDB в .env:
MARIADB_VERSION=10.8.2
bezumkinВасилий Наумкин
15.01.2023 11:35
  1. Уже пофиксил в репо, файл php-fpm/Dockerinfo, просто указал версию xdebug 3.1.0
  2. Не встречал, но спасибо за инфу. Видимо как-то связано с хвостовой машиной
gvozdbПавел Гвоздь
15.01.2023 12:57

Удивительно. После того, как запустил контейнеры не через рута, а юзером-владельцем, то проблема с CORS пропала... Не понимаю связи.

bezumkinВасилий Наумкин
15.01.2023 13:36

Смотри, когда браузер ругается на CORS - это общая ошибка, которая говорит, что он не получил ответ с нужными заголовками. Значит, этот запрос не безопасный и его данные не надо принимать.

Но, если на сервере какая-то ошибка и запрос сам по себе не выполнен правильно - заголовков тоже не будет. И браузер об этом напишет.

Ты думаешь, что проблема в заголовках, а на самом деле просто не работает API. Смотри сырой ответ от сервера и логи, которые контейнер пишет в свою консоль.

То есть, при запросах на другие домены вместо ошибки 500 или подобной, ты можешь видеть ошибку CORS - но суть та же, это ошибка сервера. Что в случае запусков из под рута или проблем прав доступа самое обычно дело.

gvozdbПавел Гвоздь
15.01.2023 13:47

Теперь понял. Благодарю!

inetlover
Александр Наумов
06.02.2023 00:48
Ок, спасибо!
inetlover
Александр Наумов
28.01.2023 18:27
Классно, все работает!
inetlover
Александр Наумов
24.01.2023 18:31
Понял, спасибо!
inetlover
Александр Наумов
16.01.2023 16:41
Понял, спасибо!
gvozdb
Павел Гвоздь
15.01.2023 13:47
Теперь понял. Благодарю!
bezumkin
Василий Наумкин
14.01.2023 05:16
Да, мне тоже нравится Vite и он по умолчанию используется в Vue 3 и Nuxt 3. Более того, он вроде как...
inetlover
Александр Наумов
09.01.2023 14:35
Ясно, спасибо!
bezumkin
Василий Наумкин
29.12.2022 04:19
На здоровье!
inetlover
Александр Наумов
04.12.2022 15:12
Понятно, спасибо! А то в интернете пишут о минусах разных я и сомневаться стал.
born2slip
pishnaa istntome
22.11.2022 14:06
огромное спасибо! )