Ubuntu 20.04, WSL2, VSCode und Drupal 8 - Behebung der „Gotchas“

Microsoft hat endlich eine fantastische Lösung für die Entwicklung von Linux-Anwendungen unter Windows geliefert.  Das Windows-Subsystem für Linux, WSL2, ist relativ einfach zu installieren und einzurichten, insbesondere wenn Sie bereits mit Linux vertraut sind.  Auch wenn Sie es nicht sind, gibt es viele sehr gute Artikel darüber, wie Sie eine Basisinstallation zum Laufen bringen.

Die Entwicklung von Linux-PHP-Anwendungen mit VSCode unter Windows 10 ist ungefähr so ​​stabil und nahtlos, wie man es bekommen kann. Dennoch wurden mehrere „Folgen“, auf die ich gestoßen bin, in keinem der Artikel beschrieben, die ich über das Einrichten von LAMP unter Ubuntu und WSL2 gefunden habe.

Ich hatte nur begrenzte Erfahrung mit Linux und war stark von Artikeln abhängig, die von denen geschrieben wurden, die vor mir kamen.  Während sie mich den größten Teil des Weges dorthin brachten, hatte ich mehrere Probleme, Drupal 8 fehlerfrei zum Laufen zu bringen und das Debuggen in VSCode zu funktionieren.  Die Lösungen wurden in den Kommentaren der im Internet veröffentlichten Fragen gefunden. Die Suche hat viele Stunden gedauert. Ich hoffe, dass ich Menschen retten kann, indem ich die Lösungen vorstelle, die ich in diesem einen Artikel gefunden habe.

Meine Umgebung ist Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode mit Remote - WSL und PHP Debug von Felix Becker Paketen.  Ich führe WSL von Powershell im Windows Terminal aus.

Bevor wir beginnen, hier ein paar Empfehlungen, die Ihnen Zeit sparen können.

Die Installation und Verwendung von apt-fast anstelle von apt kann Installationen und Updates wirklich beschleunigen.  Wo ich wohne, hat das Internet eine geringe Bandbreite und ist langsam, und apt-fast ist viel schneller als apt.

Sie können Ihre Linux-Distribution mithilfe von WSL-Export und -Import „sichern und wiederherstellen“. Wie bei jedem System ist es ratsam, immer ein aktuelles Backup zu führen.

Mariadb installiert gut, kann aber nicht neu starten oder Status abrufen

Mariadb-Installation hat gut geklappt.  Keine Fehler oder Warnungen.  Als ich versucht habe, den Status zu überprüfen, habe ich eine Fehlermeldung bezüglich des Systems erhalten.

$>systemctl-status mysql
System wurde nicht mit systemd als Init-System gebootet (PID 1). Kann nicht funktionieren.

Der Grund für diesen Fehler ist, dass Microsoft systemd in WSL nicht unterstützt.  Glücklicherweise hat Arkane Systems ein Paket system-genie erstellt, um systemd . zu aktivieren .  Ich schlage vor, ihre Webseite gründlich zu lesen, bevor Sie die folgenden Anweisungen ausprobieren, die dieser Seite entnommen wurden. Es gibt etwas andere Anweisungen für andere Distributionen als Ubuntu.

Zuerst müssen Sie die . installieren .Netto 5.0 Laufzeit

$>sudo apt-schnelles Update
$>sudo sudo apt-fast install -y apt-transport-https
$>sudo apt-schnelles Update
$>sudo apt-fast install -y dotnet-sdk-5.0

Als nächstes müssen wir das wsl-transdebian Repository konfigurieren

$>sudo apt-fast install apt-transport-https
$>wget -O /etc/apt/trusted.gpg.d/wsl-transdebian.gpg https://arkane-systems.github.io/wsl-transdebian/apt/wsl-transdebian.gpg
$>chmod a+r /etc/apt/trusted.gpg.d/wsl-transdebian.gpg
$>Katze << EOF > /etc/apt/sources.aufführen.d/wsl-transdebian.aufführen
$>deb https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$>deb-src https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$>apt-schnelles Update

Jetzt können wir das System-Genie-Paket installieren.

sudo apt-fast install -y systemd-genie

Beenden Sie Ihre Linux-Shell und fahren Sie dann WSL über die Power-Shell herunter

PS C:\Benutzer\Benutzername>wsl --shutdown

Starten Sie WSL mit einem Genie über die Powershell-Eingabeaufforderung neu.

PS C:\Benutzer\Benutzername>wsl genie --s

Sie sehen „Warten auf systemd… .!!!!!!!!!!!!!!!”.  Es dauert 180 Sekunden, bis es vollständig geladen ist.  Warte einfach, bis es fertig ist.  Wenn es fertig ist, sollte Ihr neues Shell-Fenster so aussehen:

Warten auf systemd… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Zeitüberschreitung beim Warten darauf, dass systemd in den Ausführungszustand wechselt.
Dies kann auf einen Systemd-Konfigurationsfehler hinweisen.
Versuch fortzufahren.

Bestätigen Sie, dass genie installiert ist und systemd funktioniert:

systemctl-status mariadb

Sie sollten die Statusausgabe für mariadb erhalten.  Beachten Sie, dass systemctl status mysql auch funktioniert.

Arkane Systems empfiehlt, Ihre WSL-Genie-Sitzung mit wsl -shutdown herunterzufahren.  Dadurch wird der gesamte von WSL in Windows verwendete Speicher freigegeben.

Drupal installiert, aber kein CSS wird geladen

Nach der Grundinstallation von Drupal 8 hatten die Seiten keine Formatierung.  Das Anzeigen der Seitenquelle zeigte, dass keine CSS-Dateien geladen wurden. Ich habe zwei Tage gebraucht, um das herauszufinden, aber die Kurzgeschichte ist, dass Drupal davon ausgeht, dass Apache2 das /tmp-Verzeichnis verwendet, aber das ist es nicht.  Apache2 ist standardmäßig so konfiguriert, dass es ein privates tmp-Verzeichnis verwendet.  Seltsamerweise gibt der Aufruf von sys_get_temp_dir( ) von PHP /tmp zurück, aber das ist nicht das, was Apache2 verwendet.  Wenn Drupal seine optimierten CSS- und JS-Dateien erstellt, versucht es zuerst, sie in den /tmp-Ordner zu schreiben, und verschiebt sie dann in den Zielordner, normalerweise Sites/default/files/css und /js. Aber Apache2 verwendet nicht /tmp, daher schlägt dieser Prozess fehl und keine der CSS- oder js-Dateien. Durch Deaktivieren von Aggregate CSS- und Javascript-Dateien wird dies umgangen, aber dann werden alle einzelnen CSS- und js-Dateien geladen, daher ist dies keine Lösung.

Sie können dieses Problem mit der folgenden einfachen PHP-Datei bestätigen, dass /tmp nicht zugänglich ist. Es erstellt eine tmpfile und zeigt den Dateinamen an.  Anfangs ist der Dateiname leer, da der Aufruf von tmpfile() NULL zurückgibt.  Ich habe den folgenden Code in Test eingefügt.php und rief es von meiner Site auf, localhost/mysite/test.php

Echo "\n";
Echo "\n";
Echo "\n";
Echo "\n";
Echo "\n";
Echo "

Wenn Sie die Seitenquelle \r\n ansehen, finden Sie in diesem String eine neue Zeileline.";
 
Echo"

testen

";
$tmpDir = sys_get_temp_dir( );
Echo"

TMP-Verzeichnis = '$tmpDir'

";
$datei = tmpfile();
$path = stream_get_meta_data($file)['uri'];
Echo"

Pfad der tmp-Datei = '$path'

";
 
Echo "\n";
Echo "\n";
?>
 
Dies führte zu "Pfad der tmp-Datei ="

Ich habe in den Kommentaren der Stackoverflow-Frage des Benutzers One In a Million Apps eine Lösung dafür gefunden.  Diese Lösung ändert die Apache2-Konfiguration von PrivateTmp=true in PrivateTmp=false. Beachten Sie, dass die Änderung von Apache2 zur Verwendung eines privaten tmp-Verzeichnisses aus Sicherheitsgründen vorgenommen wurde und die meisten Apps so konfiguriert werden können, dass sie einen anderen tmp-Ordner verwenden.  Ich habe das mit Drupal versucht, konnte es aber nicht zum Laufen bringen. Dies ist mein erster Versuch, Drupal unter Linux auszuführen, und ich wollte, dass die Dinge auf meinem Laptop „einfach funktionieren“, ohne sich um die Sicherheit zu kümmern.

Suchen Sie zunächst im Verzeichnis /lib nach der Datei, die PrivateTmp enthält:

%>sudo find / -mount -type f -exec grep -e "PrivateTmp" '' ';' -drucken

Das gab mir eine lange Liste von Übereinstimmungen.  Suchen Sie nach der Datei mit der Datei apache2.Bedienung.  In meinem Fall wurde es unter /usr/lib/systemd/system/apache2 gefunden.Bedienung.  kopiere diese Datei nach /etc. Verzeichnis. /etc/apache2 . bearbeiten.services und ändere PrivateTmp=true in PrivateTmp=false, speichere und starte den Apache2-Dienst neu.

systemctl Neustart von Apache2

Führen Sie den Test erneut durch.php-Seite erneut, und Sie sollten die tmp-Datei mit dem Namen angezeigt bekommen, die den Zugriff auf den /tmp-Ordner bestätigt.

Löschen Sie alle Drupal-Caches und laden Sie die Seiten neu.  Sie sollten jetzt korrekt angezeigt werden. Ich weiß nicht warum, aber die Drupal Clear Cache Funktion funktioniert bei mir nicht immer.  Das manuelle Löschen aller Dateien in Sites/default/files/css js und anschließendes Leeren der Cache-Tabellen mit PhpMyAdmin funktioniert immer.

Einrichten des VSCode-Debuggings

Xdebug konfigurieren

Installieren Sie zunächst die Pakete Remote - WSL und PHP Debug by Felix Becker in VSCode.

Ich habe dann Xdebug installiert

sudo apt-fast php7.3-xdebug

Diese installierte Version 3.02 von Xdebug.

Ich habe versucht, es zu konfigurieren, indem ich den vielen Beispielen im Internet gefolgt bin.  Nichts hat geklappt.  Es stellte sich heraus, dass die meisten Beispiele für Xdebug 2 sind.x, und diese Konfigurationseinstellungen funktionieren nicht mehr mit 3.x

Ich habe es endlich zum Laufen gebracht mit dem folgenden php.ini-Einstellungen.

Ich musste Folgendes zu beiden hinzufügen /etc/php/7.3/apache2/php.ini und /etc/php/7.3/cli/php.ini auf meinem System.

Sie können den Speicherort Ihres xdebug finden.also indem Sie in die /lib-Verzeichnisdatei wechseln und dann ausführen

find -name xdebug.also [xdebug]
zend_extension = ./lib/php/20180731/xdebug.so
xdebug.start_with_request = auslösen
xdebug.Modus = Debuggen
xdebug.Discover_client_host = 1
xdebug.log = /tmp/xdebug_remote.Log
xdebug.client_port = 9003

VSCode konfigurieren

Remote-Debugging in VSCode verwendet einen Start.json-Datei, die im Stammverzeichnis Ihres Projektverzeichnisses gespeichert ist .vscode/start.json.

Sie können den Start erstellen.json-Datei über die VSCode-Benutzeroberfläche, aber ich finde es einfacher, sie manuell zu erstellen.  Wechseln Sie zum Stammverzeichnis Ihrer Website und erstellen Sie ein .vscode-Verzeichnis. Erstellen Sie einen Start.json-Datei und laden Sie sie in VSCode.

$>mkdir .vscode
$>CD .vscode
$>Start berühren.json
$>Code-Start.json

Fügen Sie den folgenden Json in die Datei ein und speichern Sie ihn.

// Verwenden Sie IntelliSense, um mehr über mögliche Attribute zu erfahren.
// Bewegen Sie den Mauszeiger, um Beschreibungen vorhandener Attribute anzuzeigen.
// Weitere Informationen finden Sie unter: https://go.Microsoft.com/fwlink/?linkid=830387
"Version": "0.2.0",
"Konfigurationen": [

"name": "Auf XDebug hören",
"typ": "php",
"anfrage": "starten",
"Hafen": 9003,
"stopOnEntry": wahr,
"log": wahr,
"Pfadzuordnungen":

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

,

"name": "Das aktuell geöffnete Skript starten",
"typ": "php",
"anfrage": "starten",
"Programm": "$file",
"cwd": "$fileDirname",
"Hafen": 9003

]

Beachten Sie, dass Sie unter pathMappings, wo ich "/var/www/html" habe, den vollständigen Pfad zum Stammverzeichnis Ihrer Website angeben sollten.

VSCode schließen. Gehen Sie in Ihrer WSL-Linux-Eingabeaufforderung zurück zum Stammverzeichnis Ihrer Website und laden Sie das Projekt in VSCode.  Vorausgesetzt, Sie sind noch im .vscode-Verzeichnis,

$>CD…
$>Code .

Dies sollte das Projekt in VSCode laden und Sie sollten den vollständigen Verzeichnisbaum Ihres Projekts auf der linken Seite sehen.  Öffnen Sie Ihre Startseite, z. B. index.php und füge einen Haltepunkt hinzu.  Drücken Sie F5, um mit dem Debuggen zu beginnen.  Gehen Sie zu einem Webbrowser und laden Sie die Site. Wechseln Sie zurück zu VSCode, und Sie sollten sehen, dass es an Ihrem Haltepunkt angehalten wird.

Code läuft nicht mit zsh Shell

Standardmäßig ist WSL für die Arbeit mit der Bash-Shell eingerichtet und sieht den Pfad zur ausführbaren VSCode-Datei im PATH.  Ich habe zu zsh gewechselt und VSCode würde nicht mehr ausgeführt.  Die Lösung bestand darin, einen Alias ​​​​einzufügen .zshrc

$>CD ~
$>Code .zshrc

Fügen Sie den folgenden Alias ​​hinzu, der auf den vollständigen Pfad zum ausführbaren Code-Ordner verweist, wie er von Ubuntu in WSL angezeigt wird.  Ersetzen Sie YourUserName durch Ihren tatsächlichen Windows-Benutzernamen.

alias code="/mnt/c/Users/YourUserName/AppData/Local/Programs/Microsoft\ VS\ Code/bin/code"

Sie müssen nun die zsh-Konfiguration neu laden mit

$>Quelle .zshrc

Code sollte jetzt aus der zsh-Shell geladen werden.

Das ist es!!  Diese Schritte haben das Drupal- und VSCode-Debugging für mich endlich richtig funktionieren lassen.  Ich habe zwei Tage gebraucht, um das alles herauszufinden. ich bin ein noob! Hoffentlich funktioniert das für Sie und spart Ihnen etwas Zeit.

Nur eine Erinnerung an meine Umgebung.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode mit Remote - WSL und PHP Debug von Felix Becker Paketen.

Viel Spaß beim Codieren!