Ubuntu 20.04, WSL2, VSCode e Drupal 8 - Risolvere i Gotcha

Microsoft ha finalmente fornito una fantastica soluzione per lo sviluppo di applicazioni Linux su Windows.  Il sottosistema Windows per Linux, WSL2, è abbastanza facile da installare e da mettere in funzione, soprattutto se hai già familiarità con Linux.  Anche se non lo sei, ci sono molti ottimi articoli su come ottenere un'installazione di base attiva e funzionante.

Lo sviluppo di applicazioni PHP Linux utilizzando VSCode su Windows 10 è un'esperienza stabile e senza interruzioni. Tuttavia, diversi "trucchi" in cui mi sono imbattuto non sono stati descritti in nessuno degli articoli che ho trovato sulla configurazione di LAMP su Ubuntu e WSL2.

Avevo un'esperienza limitata con Linux e dipendevo molto dagli articoli scritti da coloro che erano venuti prima di me.  Mentre mi hanno portato per la maggior parte del percorso, ho riscontrato diversi problemi nel far funzionare Drupal 8 senza errori e nel debug in VSCode.  Le soluzioni sono state trovate nelle sezioni dei commenti delle domande pubblicate su Internet. Ci sono volute molte ore di ricerca e spero di salvare le persone presentando le soluzioni che ho trovato in questo articolo.

Il mio ambiente è 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 - Debug WSL e PHP di Felix Becker packages.  Sto eseguendo WSL da Powershell all'interno di Windows Terminal.

Prima di iniziare, ecco alcuni consigli che potrebbero farti risparmiare tempo.

L'installazione e l'utilizzo di apt-fast invece di apt possono davvero velocizzare installazioni e aggiornamenti.  Dove vivo, Internet ha una larghezza di banda ridotta e lenta e apt-fast è molto più veloce di apt.

Puoi eseguire il "backup e ripristinare" la tua distribuzione Linux utilizzando Esportazione e importazione WSL. Come con qualsiasi sistema, è consigliabile mantenere sempre un backup aggiornato.

Mariadb si installa bene, ma non può riavviare o ottenere lo stato

L'installazione di Mariadb è andata bene.  Nessun errore o avviso.  Quando ho provato a controllare lo stato, ho ricevuto un errore relativo al sistema.

$>stato systemctl mysql
Il sistema non è stato avviato con systemd come init system (PID 1). Non posso operare.

Il motivo di questo errore è che Microsoft non supporta systemd in WSL.  Fortunatamente, Arkane Systems ha creato un pacchetto system-genie per abilitare systemd .  Suggerisco di leggere attentamente la loro pagina web prima di provare le seguenti istruzioni, che sono state prese da quella pagina. Ci sono istruzioni leggermente diverse per distribuzioni diverse da Ubuntu.

Per prima cosa, devi installare il .5 . netto.0 tempo di esecuzione

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

Quindi dobbiamo configurare il repository 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
$>gatto << EOF > /etc/apt/sources.elenco.d/wsl-transdebian.elenco
$>deb https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$>deb-src https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$>aggiornamento rapido apt

Ora possiamo installare il pacchetto system-genie.

sudo apt-fast install -y systemd-genie

Esci dalla tua shell Linux, quindi chiudi WSL da Power Shell

PS C:\Utenti\NomeUsr>wsl --shutdown

Riavvia WSL con un genio dal prompt di Powershell.

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

Vedrai "In attesa di systemd.. .!!!!!!!!!!!!!!!".  Ci vogliono 180 secondi per caricare completamente.  Aspetta solo che finisca.  Al termine, la nuova finestra della shell dovrebbe essere simile a questa:

In attesa di sistema.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Timeout in attesa che systemd entri nello stato di esecuzione.
Questo potrebbe indicare un errore di configurazione di systemd.
Tentativo di continuare.

Conferma che genie è installato e che systemd funziona:

stato systemctl mariadb

Dovresti ottenere l'output di stato per mariadb.  Nota che anche lo stato di systemctl mysql funziona.

Arkane Systems consiglia di chiudere la sessione genie WSL con wsl -shutdown.  Ciò libererà tutta la memoria utilizzata da WSL in Windows.

Drupal si installa ma non viene caricato alcun CSS

Dopo aver eseguito l'installazione di base per Drupal 8, le pagine non avevano alcuna formattazione.  La visualizzazione di Page Source ha mostrato che nessun file CSS veniva caricato. Mi ci sono voluti due giorni per capirlo, ma il racconto è che Drupal presuppone che apache2 stia usando la directory /tmp, ma non lo è.  Per impostazione predefinita, apache2 è configurato per utilizzare una directory tmp privata.  Stranamente chiamando, sys_get_temp_dir() da php return /tmp, ma non è quello che sta usando apache2.  Quando Drupal crea i suoi file css e js ottimizzati, prova prima a scriverli nella cartella /tmp, quindi li sposta nella cartella di destinazione, tipicamente sites/default/files/css e /js. Ma apache2 non sta usando /tmp, quindi questo processo fallisce e nessuno dei file css o js. Deselezionare Aggrega file CSS e Javascript lo ignorerà, ma poi tutti i singoli file css e js verranno caricati, quindi questa non è una soluzione.

Puoi confermare che questo problema /tmp non è accessibile con il seguente semplice file php. Crea un file tmp e visualizza il nome del file.  Inizialmente, il nome del file sarà vuoto perché la chiamata a tmpfile() restituisce NULL.  Ho messo il seguente codice in test.php e l'ho chiamato dal mio sito, localhost/mysite/test.php

eco "\n";
eco "\n";
eco "\n";
eco "\n";
eco "\n";
eco "

Se visualizzi l'origine della pagina \r\n troverai una nuova riga in questa stringa.";
 
eco "

test

";
$tmpDir = sys_get_temp_dir();
eco "

directory TMP = '$tmpDir'

";
$file = tmpfile();
$percorso = stream_get_meta_data($file)['uri'];
eco "

Percorso del file tmp = '$percorso'

";
 
eco "\n";
eco "\n";
?>
 
Ciò ha provocato "Percorso del file tmp ="

Ho trovato una soluzione a questo nei commenti della domanda Stackoverflow dell'utente One In a Million Apps.  Questa soluzione modifica la configurazione di apache2 da PrivateTmp=true a PrivateTmp=false. Nota che la modifica di apache2 per utilizzare una directory tmp privata è stata eseguita per motivi di sicurezza e la maggior parte delle app può essere configurata per utilizzare una cartella tmp diversa.  L'ho provato con Drupal ma non sono riuscito a farlo funzionare. Questo è il mio primo tentativo di eseguire Drupal su Linux e volevo che le cose "funzionassero" sul mio laptop con poca preoccupazione per la sicurezza.

Per prima cosa, cerca il file contenente PrivateTmp usando questo dalla directory /lib:

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

Questo mi ha dato una lunga lista di partite.  Cerca quello che contiene il file apache2.servizio.  Nel mio caso è stato trovato in /usr/lib/systemd/system/apache2.servizio.  copia questo file in /etc. directory. Modifica /etc/apache2.services e cambia PrivateTmp=true in PrivateTmp=false, salva e riavvia il servizio apache2.

systemctl riavvia apache2

Rifai il test.php di nuovo, e dovresti ottenere il file tmp denominato visualizzato, confermando l'accesso alla cartella /tmp.

Cancella tutte le cache di Drupal e ricarica le pagine.  Ora dovrebbero essere visualizzati correttamente. Non so perché, ma la funzione Drupal Clear Cache non funziona sempre per me.  Eliminare manualmente tutti i file in sites/default/files/css js, quindi usare PhpMyAdmin per svuotare le tabelle della cache funziona sempre.

Configurazione del debug di VSCode

Configura Xdebug

Innanzitutto, installa i pacchetti Remote - WSL e PHP Debug di Felix Becker su VSCode.

Ho quindi installato Xdebug

sudo apt-fast php7.3-xdebug

Questa versione installata 3.02 di Xdebug.

Ho provato a configurarlo seguendo i tanti esempi su internet.  Niente ha funzionato.  Risulta che la maggior parte degli esempi sono per Xdebug 2.x, e quelle impostazioni di configurazione non funzionano più con 3.X

Alla fine ho funzionato con il seguente php.impostazioni ini.

Ho dovuto aggiungere quanto segue a entrambi /etc/php/7.3/apache2/php.ini e /etc/php/7.3/cli/php.ini sul mio sistema.

Puoi trovare la posizione del tuo xdebug.quindi spostandoti nel file della directory /lib e poi in esecuzione

trova -name xdebug.quindi [xdebug]
zend_extension = ./lib/php/20180731/xdebug.così
xdebug.start_with_request = trigger
xdebug.modalità = debug
xdebug.discovery_client_host = 1
xdebug.log = /tmp/xdebug_remote.log
xdebug.porta_client = 9003

Configura VSCode

Il debug remoto in VSCode utilizza un avvio.json archiviato nella radice della directory del tuo progetto in .vscode/lancio.json.

Puoi creare il lancio.json tramite l'interfaccia utente di VSCode, ma trovo più facile crearlo manualmente.  Vai alla radice del tuo sito web e crea un .directory vscode. Crea un lancio.json e caricalo in VSCode.

$>mkdir .vscodice
$>cd .vscodice
$>lancio tocco.json
$>lancio del codice.json

Metti il ​​seguente json nel file e salvalo.

// Usa IntelliSense per conoscere i possibili attributi.
// Passa il mouse per visualizzare le descrizioni degli attributi esistenti.
// Per ulteriori informazioni, visitare: https://go.microsoft.com/fwlink/?linkid=830387
"versione": "0.2.0",
"configurazioni": [

"name": "Ascolta XDebug",
"tipo": "php",
"richiesta": "lancio",
"porto": 9003,
"stopOnEntry": vero,
"log": vero,
"pathMapping":

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

,

"name": "Avvia lo script attualmente aperto",
"tipo": "php",
"richiesta": "lancio",
"programma": "$file",
"cwd": "$fileDirname",
"porto": 9003

]

Nota sotto pathMappings, dove ho "/var/www/html", dovresti mettere il percorso completo alla radice del tuo sito web.

Chiudi VSCode. Nel tuo prompt WSL Linux torna alla radice del tuo sito web e carica il progetto in VSCode.  Supponendo che tu sia ancora nel .directory vscode,

$>cd..
$>codice .

Questo dovrebbe caricare il progetto in VSCode e dovresti vedere l'albero di directory completo del tuo progetto a sinistra.  Apri la tua pagina iniziale, ad esempio index.php e aggiungi un punto di interruzione.  Premi F5 per avviare il debug.  Vai su un browser web e carica il sito. Torna a VSCode e dovresti vederlo fermato al tuo punto di interruzione.

Il codice non funziona con zsh Shell

Per impostazione predefinita, WSL è configurato per funzionare con la shell Bash e vede il percorso dell'eseguibile VSCode nel PATH.  Sono passato a zsh e VSCode non funzionava più.  La soluzione era inserire un alias .zshrc

$>cd ~
$>codice .zshrc

Aggiungi il seguente alias, che punta al percorso completo della cartella eseguibile del codice, come visto da Ubuntu in WSL.  Sostituisci YourUserName con il tuo vero nome utente di Windows.

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

Ora devi ricaricare la configurazione di zsh con

$>fonte .zshrc

Il codice dovrebbe ora essere caricato dalla shell zsh.

Questo è tutto!!  Questi passaggi hanno finalmente fatto funzionare correttamente il debug di Drupal e VSCode per me.  Mi ci sono voluti due giorni per capire tutto. io sono un noob! Spero che questo funzioni per te e ti faccia risparmiare un po' di tempo.

Solo un promemoria del mio ambiente.  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 - Debug WSL e PHP di Felix Becker packages.

Codifica felice!