Настройка окружения для разработки под Windows в 2022 (Laravel, WSL, Docker, Sail, VS Code)

Laravel под Windows. Настройка окружения.

В прошлой статье мы рассмотрели изменение инфраструктуры разработки под Windows с 2000-х. Теперь составим гайд настройки среды разработки под Windows для Laravel на современных, для 2022 года, концепциях.

Содержание:

Установка WSL2

Ссылка: https://docs.microsoft.com/en-us/windows/wsl/install

Windows Subsystem for Linux (WSL) - подсистема Linux в Windows. Нужна нам для запуска Ubuntu - хостового сервера на котором будут жить все docker контейнеры, эмулируя серверную среду.

Для установки, запускаем PowerShell под Администратором:

wsl --install

Процесс установки WSL под Windows

После установки нужно перезагрузить компьютер и начнется установка Ubuntu как хостовой операционной системы Linux.

Установка Ubuntu под Windows

Дальше вас спросят имя пользователя которое будете использовать. Может не совпадать с вашим Windows пользователем:

Настройка пользователя при устанвоке Ubuntu под Windows

И после того как зададите новый пароль, вы успешно попадете в систему:

Первый успешный вход в Ubuntu под Windows

Установка Docker Desktop

Ссылка: https://www.docker.com/products/docker-desktop/

Нужен для работы с docker контейнерами. С установкой сложностей не должно возникнуть - скачиваем, устанавливаем.

Процесс установки Docker Desktop под Windows

После установки будет предложено выйти из системы и снова зайти. Покоряемся.

Не забываем проверить, что в настройках Docker Desktop установлена интеграция именно с вашим Linux дистрибутивом:

Настройки Docker Desktop

Если дистрибутива нет, то устанавливаем через стандартный магазин приложений Windows - ищем по запросу "Ubuntu".

Концепция удаленной работы с кодом под Windows

Ссылка на Laravel: https://laravel.com/docs/9.x#getting-started-on-windows

Ссылка на VS Code: https://code.visualstudio.com/

Удаленная разработка: https://code.visualstudio.com/docs/remote/remote-overview

Из всех PHP фреймворков мне ближе Laravel. В качестве IDE использую VS Code.

Если мы будем размещать код проекта в среде windows, то его передача сперва в wsl, а потом в docker контейнер с последующей сборкой фронта будет приводить к существенной потере производительности.

Самое простое решение - удаленное подключение вашего IDE к запушенному VS Code Server-у. В таком случае ваш IDE выступает в роли тонкого клиента, лишь показывая изменения. Вся работа проводится на сервере с минимальными потерями производительности.

Схема удаленной разработки в VS Code

Для реализации этого функционала нужно установить дополнение к VS Code под названием "WSL" от Microsoft:

Страница плагина WSL к VS Code.

Далее по тексту, когда вы будете видеть команду "code ." это как раз и есть запуск удаленного VS Code Server и подключение к нему вашего экземпляра VS Code.

Запуск Laravel в Docker контейнерах

Ссылка на Sail: https://laravel.com/docs/9.x/sail

Sail - это инструмент Laravel, упрощающий взаимодействие с Docker. После его установки весь проект можно запускать командой sail up. Также sail нужно добавлять к командам composer, npm , artisan - они будут выполняться в нужном контейнере.

Механика создания нового проекта и подключение sail к существующему различаются. В следующим разделах мы рассмотрим обе ситуации.

Создание нового проекта Laravel под Windows

Сперва зайдем в нашу Linux подсистему:

wsl

Следующая команда скачает и выполнит скрипт создания нового laravel проекта с указанными модулями:

cd ~
curl -s https://laravel.build/test_name?with=mysql | bash

Замените название проекта test_name на необходимое. В блоке with можно указать другой набор стартовых компонентов (см. документацию).

Когда вы выполните эту команду, будет создана папка test_name и в ней будет развернута вся необходима инфраструктура для разработки с установленной последней версией Laravel. Останется только набрать:

cd test_name
./vendor/bin/sail up

Итога завершения команды как таковой не будет. Вы увидите служебные сообщения о запуске и работе контейнеров:

Отображение запущенного проекта Laravel в WSL

Проверить работу можно зайдя в Windows браузере на localhost. Вы должны увидеть стартовый экран Laravel:

Стартовый экран Laravel

В Docker Desktop также будут видны запущенные контейнеры:

Отображение запущенных контейнеров в Docker Desktop

Теперь запустим новое окно терминала Windows и выполним в нем:

wsl
cd test_name (путь до вашего проекта)
code .

Если вы все сделали правильно, то будет запущен новый экземпляр VS Code в который сразу будет загружен код нашего проекта. Все изменения в коде будут сразу применяться.

Код нового Laravel проекта в VS Code

В следующих статьях обязательно рассмотрим работу с Git, а пока можно считать задачу создания нового проекта на Laravel под Windows успешно выполненной.

Клонирование существующего Laravel проекта в WSL

Если проект на Laravel хранится в репозитории и вам нужно его установить к себе на машину, то заходим в WSL:

wsl

Далее вы клонируете репозиторий в нужную директорию:

git clone git@github.com:***ACCOUNT***/***REPO***.git

В хостовой операционке WSL у вас может быть не установлен composer и после копирования репозитория не получится подтянуть зависимости и запустить тот же sail. Скорее всего вы увидите следующую ошибку:

bash: vendor/bin/sail: No such file or directory

Для исправления :

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v $(pwd):/var/www/html \
    -w /var/www/html \
    laravelsail/php83-composer:latest \
    composer install --ignore-platform-reqs

После этого уже можно выполнить:

sail composer update
sail npm update
sail up

Добавление Sail в существующий проект

Есть в проекте Laravel еще не установлен Sail, то нужно выполнить следующие действия:

1). Добавляем sail в dev зависимости:

composer require laravel/sail --dev

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

sudo apt update
sudo apt install -y php-xml php-mbstring

2). Устанавливаем Sail. Будет создан файл docker-compose.yml в корне вашего проекта:

php artisan sail:install --devcontainer

Тут вас спросят какие модули нужны. Поставьте цифры в зависимости от потребностей вашего проекта:

Укажите какие модули для вашего проекта нужно установить.

Лайфхак 1: копирование ssh ключей из windows в wsl

Если для работы с репозиторием GIT вам нужно скопировать ключи SSH из windows директории Users\<Имя пользователя>\.ssh или в инфраструктуре WSL, тогда SSH ключи расположены в директории ~/.ssh

cd /mnt/c/Users/<username>/.ssh
cp * ~/.ssh
chmod 600 ~/.ssh/id_rsa

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

Вы можете вызывать проекты в браузере не только по имени localhost:port но и задать для них доменные сокращения. Для этого в Windows открываем файл hosts в режиме редактирования (в режиме Администратора):

c:\Windows\System32\drivers\etc\hosts

Дальше в конец файла вы можете добавить следующий текст:

127.0.0.1    test.loc

Это значит что при вызове test.loc система сперва будет идти на локальный адрес 127.0.0.1.

Лайфхак 3: сокращение вызова sail через alias

Если вы не хотите каждый раз при вызове sail набирать ./vendor/bin/sail, то вы можете сохранить в системе alias вызова этой команды. Наберите в среде WSL:

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

Команда сохранится на время текущей сессии. Если хотите сохранить ее надолго, то наберите:

nano ~/.bashrc

Это откроет редактор настроек баша. Добавьте в конец этого файла ту же строчку.

Лайфхак 4: несколько Laravel проектов одновременно

Если вы используете несколько Sail проектов на одной машине, то они могут начать конфликтовать по портам. Первое что нужно сделать - это добавить в .env файл в корне проектов переменную APP_PORT, например:

APP_PORT=1234

Дальше вы можете обращаться к проекту по адресу 127.0.0.1:1234

Скорее всего аналогичные действия нужно будет совершить относительно открытого порта каждого контейнера, который есть в других проектах.

Для этого смотрим ошибку в консоли, видим какой порт вызывал ошибку, находим его в docker-compose.yml, смотрим какая переменная за него отвечает и добавляем эту переменную в .env файл с увеличением порт на +1. Например:

FORWARD_MAILHOG_DASHBOARD_PORT=8026
FORWARD_DB_PORT=3307
FORWARD_MAILHOG_PORT=1026
FORWARD_MINIO_PORT=9001
FORWARD_MINIO_CONSOLE_PORT=8901
HMR_PORT=8083

Дерзайте, и все получится.