Ubuntu 20.04, WSL2, VSCode та Drupal 8 - виправлення “Gotchas”

Microsoft нарешті запропонувала фантастичне рішення для розробки додатків Linux на Windows.  Підсистему Windows для Linux, WSL2, досить просто встановити та запустити та запустити, особливо якщо ви вже знайомі з Linux.  Навіть якщо ви ні, є багато дуже хороших статей про те, як встановити та запустити базову установку.

Розробка PHP-додатків для Linux за допомогою VSCode в Windows 10 - це настільки ж стабільний і бездоганний досвід, який можна отримати. Тим не менше, декілька "прийомів", з якими я зіткнувся, не були описані в жодній статті, яку я знайшов про налаштування LAMP на Ubuntu та WSL2.

Я мав обмежений досвід роботи з Linux і сильно залежав від статей, написаних тими, хто прийшов до мене.  Поки вони потрапили мені більшу частину шляху туди, я зіткнувся з кількома проблемами, коли Drupal 8 працював без помилок та налагоджував роботу у VSCode.  Рішення були знайдені в розділах коментарів до питань, розміщених в Інтернеті. Це зайняло багато годин пошуку, і я сподіваюся врятувати людей, представивши рішення, які я знайшов у цій одній статті.

Моє середовище - Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode with Remote - WSL і PHP Debug by Felix Becker.  Я запускаю WSL від Powershell в Терміналі Windows.

Перш ніж ми почнемо, ось кілька рекомендацій, які можуть заощадити ваш час.

Встановлення та використання apt-fast замість apt може дійсно пришвидшити встановлення та оновлення.  Там, де я живу, Інтернет має низьку пропускну здатність і повільний, а швидкий - набагато швидший, ніж apt.

Ви можете “зробити резервну копію та відновити” ваш дистрибутив Linux, використовуючи WSL Export and Import. Як і в будь-якій іншій системі, бажано завжди підтримувати поточну резервну копію.

Mariadb добре встановлюється, але не може перезапуститись або отримати статус

Встановлення Mariadb пройшло нормально.  Жодних помилок та попереджень.  Коли я спробував перевірити статус, я отримав повідомлення про помилку щодо системи.

$> systemctl статус mysql
Система не завантажилася з systemd як init system (PID 1). Не може працювати.

Причиною цієї помилки є те, що Microsoft не підтримує systemd в WSL.  На щастя, Arkane Systems створив пакет system-genie для включення systemd .  Я пропоную ретельно прочитати їх веб-сторінку, перш ніж спробувати наступні інструкції, взяті з цієї сторінки. Існують дещо інші інструкції щодо дистрибутивів, окрім Ubuntu.

По-перше, вам потрібно встановити .Чиста 5.0 час виконання

$> sudo apt-швидке оновлення
$> sudo sudo apt-fast install -y apt-transport-https
$> sudo apt-швидке оновлення
$> sudo apt-fast install -y dotnet-sdk-5.0

Далі нам потрібно налаштувати сховище wsl-transdebian

$> sudo apt-fast install apt-transport-https
$> wget -O / etc / apt / trusted.gpg.д / wsl-трансдебіан.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / trusted.gpg.д / wsl-трансдебіан.gpg
$> кішка << EOF > / etc / apt / sources.список.д / wsl-трансдебіан.список
$> deb https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye main
$> deb-src https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye main
$> apt-швидке оновлення

Тепер ми можемо встановити пакет system-genie.

sudo apt-fast install -y systemd-genie

Вийдіть із оболонки Linux, а потім вимкніть WSL із оболонки Power

PS C: \ Users \ UsrName> wsl --shutdown

Перезапустіть WSL із джином із запиту Powershell.

PS C: \ Users \ UsrName> wsl genie --s

Ви побачите “Очікування systemd .. .!!!!!!!!!!!!!!!".  Повне завантаження займає 180 секунд.  Просто почекайте, поки це закінчиться.  Коли це буде зроблено, ваше нове вікно оболонки має виглядати так:

Чекає systemd… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Час очікування, поки systemd перейде в робочий стан.
Це може свідчити про помилку конфігурації systemd.
Спроба продовжити.

Переконайтеся, що genie встановлено та працює systemd:

systemctl статус mariadb

Ви повинні отримати вихідний статус для mariadb.  Зверніть увагу, що systemctl status mysql також працює.

Arkane Systems рекомендує вимкнути ваш сеанс WSL genie за допомогою wsl -shutdown.  Це звільнить всю пам’ять, яка використовується WSL у Windows.

Друпал встановлюється, але CSS не завантажується

Після запуску базової інсталяції для Drupal 8 сторінки не мали форматування.  Перегляд джерела сторінки показав, що не завантажуються файли CSS. Мені знадобилося два дні, щоб зрозуміти це, але коротка історія: Drupal передбачає, що apache2 використовує каталог / tmp, але це не так.  За замовчуванням apache2 налаштовано на використання приватного каталогу tmp.  Як не дивно виклик, sys_get_temp_dir () з php return / tmp, але це не те, що використовує apache2.  Коли Drupal створює свої оптимізовані файли css та js, він спочатку намагається записати їх у папку / tmp, а потім переміщує до цільової папки, як правило, sites / default / files / css та / js. Але apache2 не використовує / tmp, тому цей процес не вдається, і жоден із файлів css або js. Знявши прапорець з сукупних файлів CSS та Javascript це буде обійдено, але тоді всі окремі файли css та js завантажуються, тож це не рішення.

Ви можете підтвердити, що ця проблема / tmp недоступна, за допомогою наступного простого php-файлу. Він створює файл tmp і відображає ім'я файлу.  Спочатку ім'я файлу буде порожнім, оскільки виклик tmpfile () повертає NULL.  Я перевірив наступний код.php і викликав його з мого сайту, localhost / mysite / test.php

відлуння "\ n ";
відлуння "\ n ";
ехо "\ n ";
відлуння "\ n ";
ехо "\ n ";
відлуння "

Якщо ви переглядаєте джерело сторінки \ r \ n, ви знайдете новий рядок у цьому рядку.";
 
відлуння "

тестування

";
$ tmpDir = sys_get_temp_dir ();
ехо "

TMP direcory = '$ tmpDir'

";
$ файл = tmpfile ();
$ path = stream_get_meta_data ($ файл) ['uri'];
ехо "

Шлях до файлу tmp = '$ шлях'

";
 
ехо "\ n ";
відлуння "\ n ";
?>
 
Це призвело до "Шляху tmp file ="

Я знайшов вирішення цього питання в коментарях до запитання Stackoverflow від користувача One In a Million Apps.  Це рішення змінює конфігурацію apache2 з PrivateTmp = true на PrivateTmp = false. Зверніть увагу, що зміна apache2 на використання приватного каталогу tmp було зроблено з міркувань безпеки, і більшість програм можна налаштувати на використання іншої папки tmp.  Я спробував це з Drupal, але не зміг змусити його працювати. Це моя перша спроба запустити Drupal на Linux, і я хотів, щоб на моєму ноутбуці все просто “працювало”, мало турбуючись про безпеку.

Спочатку знайдіть файл, що містить PrivateTmp, використовуючи це з каталогу / lib:

%> sudo find / -mount -type f -exec grep -e "PrivateTmp" '' ';' -друк

Це дало мені довгий список матчів.  Шукайте файл, що містить файл apache2.обслуговування.  У моєму випадку його було знайдено за адресою / usr / lib / systemd / system / apache2.обслуговування.  скопіюйте цей файл в / etc. каталог. Відредагуйте / etc / apache2.служби та змініть PrivateTmp = true на PrivateTmp = false, збережіть і перезапустіть службу apache2.

systemctl перезапустіть apache2

Повторно запустіть тест.php знову, і ви повинні показати файл із ім'ям tmp, що підтверджує доступ до папки / tmp.

Очистіть усі кеші Drupal та перезавантажте сторінки.  Тепер вони повинні відображатися правильно. Не знаю чому, але функція очищення кешу Drupal не завжди працює для мене.  Видалення всіх файлів у файлах sites / default / files / css js вручну, а потім використання PhpMyAdmin для очищення таблиць кешу завжди працює.

Налаштування налагодження VSCode

Налаштуйте Xdebug

Спочатку встановіть пакети Remote - WSL та PHP Debug by Felix Becker у VSCode.

Потім я встановив Xdebug

sudo apt-fast php7.3-xdebug

Ця встановлена ​​версія 3.02 з Xdebug.

Я спробував його налаштувати, дотримуючись багатьох прикладів в Інтернеті.  Нічого не працювало.  Виявляється, більшість прикладів стосуються Xdebug 2.x, і ці параметри конфігурації більше не працюють з 3.х

Врешті-решт, я працюю з наступним php.налаштування ini.

Мені довелося додати наступне до обох / etc / php / 7.3 / apache2 / php.ini та / etc / php / 7.3 / cli / php.ini в моїй системі.

Ви можете знайти розташування вашого xdebug.отже, перейшовши до файлу каталогу / lib, а потім запустивши

знайти -ім'я xdebug.так [xdebug]
zend_extention = ./ lib / php / 20180731 / xdebug.так
xdebug.start_with_request = тригер
xdebug.режим = налагодження
xdebug.Discover_client_host = 1
xdebug.log = / tmp / xdebug_remote.журнал
xdebug.client_port = 9003

Налаштуйте VSCode

Віддалена налагодження у VSCode використовує запуск.json, що зберігається у кореневій директорії вашого проекту в .vscode / запуск.json.

Ви можете створити запуск.json через інтерфейс VSCode, але мені легше створити його вручну.  Перейдіть до кореневої сторінки веб-сайту та створіть .каталог vscode. Створіть запуск.json і завантажте його у VSCode.

$> mkdir .vscode
$> cd .vscode
$> сенсорний запуск.json
$> запуск коду.json

Помістіть наступний json у файл та збережіть його.

// Використовуйте IntelliSense, щоб дізнатись про можливі атрибути.
// Наведіть курсор, щоб переглянути описи існуючих атрибутів.
// Для отримання додаткової інформації відвідайте: https: // go.Microsoft.com / fwlink /?посилання = 830387
"version": "0.2.0 ",
"конфігурації": [

"name": "Слухати XDebug",
"type": "php",
"request": "запуск",
"порт": 9003,
"stopOnEntry": true,
"log": істина,
"pathMappings":

"/ var / www / html": "$ workspaceRoot"

,

"name": "Запустити відкритий скрипт",
"type": "php",
"request": "запуск",
"program": "$ файл",
"cwd": "$ fileDirname",
"порт": 9003

]

Зауважте, під pathMappings, де у мене є “/ var / www / html”, ви повинні розмістити повний шлях до кореневої сторінки вашого веб-сайту.

Закрийте VSCode. У підказці WSL Linux поверніться до кореня веб-сайту та завантажте проект у VSCode.  Якщо припустити, що ви все ще в .каталог vscode,

$> кд ..
$> код .

Це має завантажити проект у VSCode, і ви побачите повне дерево каталогів вашого проекту зліва.  Відкрийте свою початкову сторінку, наприклад, індекс.php та додайте точку зупинки.  Натисніть F5, щоб розпочати налагодження.  Перейдіть у веб-браузер і завантажте сайт. Поверніться до VSCode, і ви побачите, що він зупинився у вашій точці зупинки.

Код не працює із zsh Shell

За замовчуванням WSL налаштований на роботу з оболонкою Bash, і він бачить шлях до виконуваного файлу VSCode у PATH.  Я перейшов на zsh, і VSCode більше не працюватиме.  Виправлення полягало в тому, щоб вставити псевдонім .zshrc

$> cd ~
$> код .zshrc

Додайте наступний псевдонім, який вказує на повний шлях до виконуваної папки коду, як це бачить Ubuntu в WSL.  Замініть YourUserName своїм дійсним іменем користувача Windows.

псевдонім = "/ mnt / c / Users / YourUserName / AppData / Local / Programs / Microsoft \ VS \ Code / bin / code"

Тепер потрібно перезавантажити конфігурацію zsh за допомогою

$> джерело .zshrc

Тепер код повинен завантажуватися з оболонки zsh.

Це воно!!  Ці кроки нарешті змусили налагодження Drupal та VSCode працювати належним чином для мене.  Мені знадобилося два дні, щоб це все зрозуміти. Я нуб! Сподіваємось, це працює для вас і економить час.

Просто нагадування про моє оточення.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode with Remote - пакети налагодження WSL та PHP від ​​Felix Becker.

Щасливого кодування!