Ubuntu

Ubuntu 20.04, WSL2, VSCode et Drupal 8 - Correction des « Gotchas »

Ubuntu 20.04, WSL2, VSCode et Drupal 8 - Correction des « Gotchas »

Microsoft a enfin livré une solution fantastique pour développer des applications Linux sur Windows.  Le sous-système Windows pour Linux, WSL2, est assez facile à installer et à mettre en service, surtout si vous êtes déjà familiarisé avec Linux.  Même si vous ne l'êtes pas, il existe de nombreux articles très utiles sur la mise en place et le fonctionnement d'une installation de base.

Le développement d'applications PHP Linux à l'aide de VSCode sur Windows 10 est une expérience à peu près aussi stable et transparente que l'on peut obtenir. Pourtant, plusieurs « trucs » que j'ai rencontrés n'ont été décrits dans aucun des articles que j'ai trouvés sur la configuration de LAMP sur Ubuntu et WSL2.

J'avais une expérience limitée avec Linux et dépendais fortement des articles écrits par ceux qui m'ont précédé.  Alors qu'ils m'ont fait la plupart du temps, j'ai rencontré plusieurs problèmes pour que Drupal 8 s'exécute sans erreur et que le débogage fonctionne dans VSCode.  Les solutions ont été trouvées dans les sections commentaires des questions postées sur internet. Cela a pris de nombreuses heures de recherche, et j'espère sauver des gens en présentant les solutions que j'ai trouvées dans cet article.

Mon environnement est Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode avec Remote - WSL et PHP Debug by Felix Becker packages.  J'exécute WSL à partir de Powershell dans Windows Terminal.

Avant de commencer, voici quelques recommandations qui pourraient vous faire gagner du temps.

L'installation et l'utilisation d'apt-fast au lieu d'apt peuvent vraiment accélérer les installations et les mises à jour.  Là où je vis, Internet est à faible bande passante et lent, et apt-fast est beaucoup plus rapide qu'apt.

Vous pouvez « sauvegarder et restaurer » votre distribution Linux en utilisant WSL Export and Import. Comme pour tout système, il est conseillé de toujours conserver une sauvegarde à jour.

Mariadb s'installe correctement, mais ne peut pas redémarrer ou obtenir le statut

L'installation de Mariadb s'est bien passée.  Aucune erreur ni avertissement.  Lorsque j'ai essayé de vérifier l'état, j'ai eu une erreur concernant le système.

$>systemctl état mysql
Le système n'a pas été démarré avec systemd comme système d'initialisation (PID 1). Ne peut pas fonctionner.

La raison de cette erreur est que Microsoft ne prend pas en charge systemd dans WSL.  Heureusement, Arkane Systems a créé un package system-genie pour activer systemd .  Je suggère de lire attentivement leur page Web avant d'essayer les instructions suivantes, qui ont été tirées de cette page. Il existe des instructions légèrement différentes pour les distributions autres qu'Ubuntu.

Tout d'abord, vous devez installer le .filet 5.0 temps d'exécution

$> mise à jour sudo apt-fast
$> sudo sudo apt-fast install -y apt-transport-https
$> mise à jour sudo apt-fast
$> sudo apt-fast install -y dotnet-sdk-5.0

Ensuite, nous devons configurer le référentiel wsl-transdebian

$> 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
$>chat << EOF > /etc/apt/sources.liste.d/wsl-transdebian.liste
$>deb https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$>deb-src https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$> apt-mise à jour rapide

Nous pouvons maintenant installer le package system-genie.

sudo apt-fast install -y systemd-genie

Quittez votre shell Linux, puis fermez WSL à partir de Power Shell

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

Redémarrez WSL avec un génie à partir de l'invite Powershell.

PS C:\Users\UsrName> génie wsl --s

Vous verrez « En attente de systemd… .!!!!!!!!!!!!!!!".  Il faut 180 secondes pour charger complètement.  Attends juste que ça se termine.  Quand c'est fait, votre nouvelle fenêtre shell devrait ressembler à ceci :

En attente de systemd… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Délai d'attente dépassé pour que systemd entre dans l'état de fonctionnement.
Cela peut indiquer une erreur de configuration systemd.
Tenter de continuer.

Confirmez que genie est installé et que systemd fonctionne :

état systemctl mariadb

Vous devriez obtenir la sortie d'état pour mariadb.  Notez que systemctl status mysql fonctionne également.

Arkane Systems recommande de fermer votre session WSL genie avec wsl -shutdown.  Cela libérera toute la mémoire utilisée par WSL dans Windows.

Drupal s'installe mais aucun CSS n'est chargé

Après avoir exécuté l'installation de base de Drupal 8, les pages n'avaient pas de formatage.  L'affichage de la source de la page a montré qu'aucun fichier CSS n'était en cours de chargement. Il m'a fallu deux jours pour comprendre celui-ci, mais la courte histoire est que Drupal suppose qu'apache2 utilise le répertoire /tmp, mais ce n'est pas le cas.  Par défaut, apache2 est configuré pour utiliser un répertoire tmp privé.  Curieusement, appeler sys_get_temp_dir() de php return /tmp, mais ce n'est pas ce que Apache2 utilise.  Lorsque Drupal crée ses fichiers css et js optimisés, il essaie d'abord de les écrire dans le dossier /tmp, puis les déplace vers le dossier de destination, généralement sites/default/files/css et /js. Mais apache2 n'utilise pas /tmp, donc ce processus échoue, et aucun des fichiers css ou js. Décocher les fichiers CSS et Javascript agrégés contournera cela, mais tous les fichiers css et js individuels seront chargés, ce n'est donc pas une solution.

Vous pouvez confirmer que ce problème /tmp n'est pas accessible avec le simple fichier php suivant. Il crée un fichier tmp et affiche le nom du fichier.  Initialement, le nom du fichier sera vide car l'appel à tmpfile() renvoie NULL.  j'ai mis le code suivant en test.php et l'ai appelé depuis mon site, localhost/mysite/test.php

écho "\n";
écho "\n";
écho "Mon deuxième exemple PHP\n";
écho "\n";
écho "\n";
écho "

Si vous consultez la source de la page \r\n vous trouverez une nouvelle ligne dans cette chaîne.";
 
écho "

essai

" ;
$tmpDir = sys_get_temp_dir( );
écho "

Répertoire TMP = '$tmpDir'

" ;
$file = tmpfile();
$path = stream_get_meta_data($file)['uri'] ;
écho "

Chemin du fichier tmp = '$path'

" ;
 
écho "\n";
écho "\n";
?>
 
Cela a abouti à "Chemin du fichier tmp ="

J'ai trouvé une solution à cela dans les commentaires de la question Stackoverflow de l'utilisateur One In a Million Apps.  Cette solution modifie la configuration apache2 de PrivateTmp=true à PrivateTmp=false. Notez que changer apache2 pour utiliser un répertoire tmp privé a été fait pour des raisons de sécurité, et la plupart des applications peuvent être configurées pour utiliser un dossier tmp différent.  J'ai essayé avec Drupal mais je n'ai pas réussi à le faire fonctionner. Il s'agit de ma première tentative d'exécution de Drupal sur Linux, et je voulais que les choses "fonctionnent" sur mon ordinateur portable sans se soucier de la sécurité.

Tout d'abord, recherchez le fichier contenant PrivateTmp en utilisant ceci dans le répertoire /lib :

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

Cela m'a donné une longue liste de correspondances.  Recherchez celui contenant le fichier apache2.un service.  Dans mon cas, il a été trouvé dans /usr/lib/systemd/system/apache2.un service.  copier ce fichier dans le /etc. annuaire. Modifier /etc/apache2.services et remplacez PrivateTmp=true par PrivateTmp=false, enregistrez et redémarrez le service apache2.

systemctl redémarrer apache2

Refaire le test.php à nouveau, et vous devriez obtenir le fichier tmp nommé affiché, confirmant l'accès au dossier /tmp.

Videz tous les caches Drupal et rechargez les pages.  Ils devraient maintenant s'afficher correctement. Je ne sais pas pourquoi, mais la fonction Drupal Clear Cache ne fonctionne pas toujours pour moi.  Supprimer manuellement tous les fichiers dans sites/default/files/css js, puis utiliser PhpMyAdmin pour vider les tables de cache fonctionne toujours.

Configuration du débogage VSCode

Configurer Xdebug

Tout d'abord, installez les packages Remote - WSL et PHP Debug by Felix Becker sur VSCode.

J'ai ensuite installé Xdebug

sudo apt-fast php7.3-xdebug

Cette version installée 3.02 de Xdebug.

J'ai essayé de le configurer en suivant les nombreux exemples sur internet.  Rien n'a fonctionné.  Il s'avère que la plupart des exemples sont pour Xdebug 2.x, et ces paramètres de configuration ne fonctionnent plus avec 3.X

J'ai finalement réussi à le faire fonctionner avec le php suivant.paramètres ini.

J'ai dû ajouter ce qui suit à la fois /etc/php/7.3/apache2/php.ini et /etc/php/7.3/cli/php.ini sur mon système.

Vous pouvez trouver l'emplacement de votre xdebug.donc en déplaçant vers le fichier de répertoire /lib puis en exécutant

find -name xdebug.donc [xdebug]
zend_extension = ./lib/php/20180731/xdebug.donc
xdebug.start_with_request = déclencheur
xdebug.mode = débogage
xdebug.découvre_client_hôte = 1
xdebug.log = /tmp/xdebug_remote.Journal
xdebug.client_port = 9003

Configurer VSCode

Le débogage à distance dans VSCode utilise un lancement.json stocké à la racine de votre répertoire de projet dans .vscode/lancement.json.

Vous pouvez créer le lancement.json via l'interface utilisateur VSCode, mais je trouve qu'il est plus facile de le créer manuellement.  Déplacez-vous à la racine de votre site Web et créez un .répertoire vscode. Créer un lancement.json et chargez-le dans VSCode.

$>mkdir .vscode
$>cd .vscode
$>touchez le lancement.json
$>lancement de code.json

Mettez le json suivant dans le fichier et enregistrez-le.


// Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
// Survolez pour afficher les descriptions des attributs existants.
// Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?id de lien=830387
"version": "0.2.0",
"configurations": [

"name": "Écoutez XDebug",
"type": "php",
"demande": "lancement",
"port": 9003,
"stopOnEntry": vrai,
"log": vrai,
"pathMappings":

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

,

"name": "Lancer le script actuellement ouvert",
"type": "php",
"demande": "lancement",
"programme": "$fichier",
"cwd": "$fileDirname",
"port": 9003

]

Notez sous pathMappings, où j'ai "/var/www/html", vous devez mettre le chemin complet vers la racine de votre site Web.

Fermer VSCode. Dans votre invite WSL Linux, revenez à la racine de votre site Web et chargez le projet dans VSCode.  En supposant que vous soyez toujours dans le .répertoire vscode,

$>cd…
$>code .

Cela devrait charger le projet dans VSCode, et vous devriez voir l'arborescence complète des répertoires de votre projet sur la gauche.  Ouvrez votre page de démarrage, comme l'index.php et ajoutez un point d'arrêt.  Appuyez sur F5 pour commencer le débogage.  Accédez à un navigateur Web et chargez le site. Revenez à VSCode, et vous devriez le voir s'arrêter à votre point d'arrêt.

Le code ne fonctionne pas avec zsh Shell

Par défaut, WSL est configuré pour fonctionner avec le shell Bash et voit le chemin d'accès à l'exécutable VSCode dans le PATH.  Je suis passé à zsh et VSCode ne fonctionnerait plus.  Le correctif consistait à mettre un alias dans .zshrc

$>cd ~
$>code .zshrc

Ajoutez l'alias suivant, qui pointe vers le chemin complet vers le dossier du code exécutable, comme vu par Ubuntu dans WSL.  Remplacez YourUserName par votre nom d'utilisateur Windows réel.

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

Vous devez maintenant recharger la configuration zsh avec

$>source .zshrc

Le code devrait maintenant se charger à partir du shell zsh.

C'est ça!!  Ces étapes ont finalement permis au débogage Drupal et VSCode de fonctionner correctement pour moi.  Il m'a fallu deux jours pour tout comprendre. je suis un noob! J'espère que cela fonctionne pour vous et vous fait gagner du temps.

Juste un rappel de mon environnement.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode avec Remote - WSL et PHP Debug by Felix Becker packages.

Bon codage!

Comment changer les boutons gauche et droit de la souris sur un PC Windows 10
Il est tout à fait normal que tous les appareils de souris d'ordinateur soient conçus de manière ergonomique pour les droitiers. Mais il existe des so...
Émulez les clics de souris en survolant à l'aide de la souris sans clic dans Windows 10
L'utilisation d'une souris ou d'un clavier dans la mauvaise posture d'une utilisation excessive peut entraîner de nombreux problèmes de santé, notamme...
Ajoutez des gestes de souris à Windows 10 à l'aide de ces outils gratuits
Ces dernières années, les ordinateurs et les systèmes d'exploitation ont considérablement évolué. Il fut un temps où les utilisateurs devaient utilise...