Настройка docker для laravel и vue проекта

Работая над несколькими проектам можно довольно быстро столкнуться с тем, что версии нужного ПО на рабочей машине подходят не ко всем проектам. В последние годы все шире и шире используется docker (и docker-compose для оркестрации контейнеров), чтобы настроить окружение для работы над проектом локально и решить проблему существования разных версий нужных пакетов одновременно. Дабы не думать над каждой опцией настроек каждый раз удобно иметь под рукой какие-либо заготовки. В этой статье будет представлена одна из них.

Обновление от 29.01.2023:
В текущей статье рассматривается проект, где frontend работает на основном домене, а для backend используется поддомен. Вероятно, вас также может заинтересовать статья, в которой Laravel и Vue работают на одном домене.

Уточную, что пример исключительно для локальной разработки. Если вы ищите решение для production, то здесь его не найдете.

В последнее время широко распространены SPA приложения. Приведенный пример содержит приложение, у которого в качестве frontend части используется vue приложение (установленное через vue-cli), а в качестве backend части laravel приложение. Исходный код расположен в репозитории с примерами. Основной конфигурационный файл – docker-compose.yml. Часть настроек (конфигурационные файлы nginx, настройка контейнера php-fpm и т.д.) находится в папке docker. Файлы снабжены комментариями. Поэтому в этой статье описываться подробно не будут.

Запуск проекта

Перед запуском убедитесь, что у вас уже на хост машине не работает nginx или apache на порту 80 и mysql на порту 3306. И что другие приложения не занимают эти порты. Освободите порты, если они заняты.

Домены используются следующие

• http://vue-laravel-app.local
• http://backend.vue-laravel-app.local

Поэтому, чтобы запустить пример, добавьте соответствующие записи в /etc/hosts:

127.0.0.1 vue-laravel-app.local backend.vue-laravel-app.local

Создайте файлы с переменными окружения:

cp backend/.env.example .env 
cp frontend/.env.development.example frontend/.env.development.local

Для запуска контейнеров, как обычно, используется команда

docker-compose up

После запуска проверим в соседней вкладке эмулятора терминала, что контейнеры успешно запущены

docker-compose ps
            Name                           Command               State                    Ports                  
-----------------------------------------------------------------------------------------------------------------
vue-laravel-docker_backend_1    docker-php-entrypoint php-fpm    Up      9000/tcp                                
vue-laravel-docker_db_1         docker-entrypoint.sh --cha ...   Up      0.0.0.0:3306->3306/tcp,:::3306->3306/tcp
vue-laravel-docker_frontend_1   docker-entrypoint.sh bash  ...   Up                                              
vue-laravel-docker_nginx_1      /docker-entrypoint.sh ngin ...   Up      0.0.0.0:80->80/tcp,:::80->80/tcp    

Далее установите composer зависимости laravel приложения и примените миграции БД:

docker-compose exec --user=www backend bash -c "composer install"
docker-compose exec --user=www backend bash -c "php artisan migrate"

После этого в браузере можете открыть сайт http://vue-laravel-app.local/. По окончании загрузки страницы нажмите на кнопку “Load data from server” и вы должны увидеть список миграций, который отдаст backend.

Важные настройки. Часть frontend использует URL backend, объявленный как переменная VUE_APP_BACKEND_ENDPOINT в файле frontend/.env.development.local. Чтобы браузер не выдавал ошибки политики одного источника в файле backend/config/cors.php backend части есть ряд настроек.

Взаимодействие с контейнерами Docker

Зайти в различные контейнеры можно командами

docker-compose exec --user=www backend bash
docker-compose exec --user=node frontend bash 
docker-compose exec db bash 

Подключиться к БД вы можете любым клиентом используя IP адрес хост машины (127.0.0.1) и порт 3306. Данные БД хранятся между запусками контейнера в именованном томе, который описан в файле docker-compose.yml. Чтобы удалить их полностью (например, для пересоздания БД) нужно удалить контейнер БД и том.

docker-compose rm db
docker volume rm vue-laravel-docker_dbdata

Имя тома здесь vue-laravel-docker_dbdata, но может отличаться. Для просмотра всего списка томов нужна команда docker volume ls.

После удаления снова запустите docker-compose up и примените миграции.

Конечно данная маленькая заготовка не может подойти ко всем возможным проектам на базе laravel и vue. В ряде случаев ее придется дорабатывать. Напомню, что для laravel также имеется такая большая заготовка как laradock. В ряде случаев удобнее использовать ее. А иногда полезно взять из нее какие-то настройки в свой проект.

Удобной вам разработки.

Обновление от 2022-04-18: Если вам нужен https для локального сайта, то полезной будет статья про mkcert.

Обновление от 2022-11-08: В Laravel есть удобный инструмент sail для легкой настройки типового docker окружения. Хотя у него и свои недостатки. Но об этом отдельная статья.