Ubuntu

Ubuntu 20.04, WSL2, VSCode și Drupal 8 - Fixarea „Gotchas”

Ubuntu 20.04, WSL2, VSCode și Drupal 8 - Fixarea „Gotchas”

Microsoft a livrat în cele din urmă o soluție fantastică pentru dezvoltarea aplicațiilor Linux pe Windows.  Subsistemul Windows pentru Linux, WSL2, este destul de ușor de instalat și de pornit, mai ales dacă sunteți deja familiarizat cu Linux.  Chiar dacă nu sunteți, există multe articole foarte bune despre punerea în funcțiune a unei instalări de bază.

Dezvoltarea aplicațiilor PHP Linux folosind VSCode pe Windows 10 este la fel de stabilă și fără probleme o experiență pe care o poți obține. Cu toate acestea, mai multe „gotcha-uri” pe care le-am întâlnit nu au fost descrise în niciunul dintre articolele pe care le-am găsit despre configurarea LAMP pe Ubuntu și WSL2.

Am avut o experiență limitată cu Linux și am depins foarte mult de articolele scrise de cei care au venit înaintea mea.  În timp ce m-au dus aproape tot acolo, am întâmpinat mai multe probleme când Drupal 8 funcționează fără erori și depanare funcționează în VSCode.  Soluțiile au fost găsite în secțiunile de comentarii ale întrebărilor postate pe internet. Acest lucru a durat multe ore de căutare și sper să salvăm oamenii prezentând soluțiile pe care le-am găsit în acest articol.

Mediul meu este Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode cu Remote - WSL și PHP Debug de pachetele Felix Becker.  Execut WSL de la Powershell în Windows Terminal.

Înainte de a începe, iată câteva recomandări care vă pot economisi timp.

Instalarea și utilizarea apt-fast în loc de apt pot accelera cu adevărat instalările și actualizările.  Unde locuiesc, internetul este lățime de bandă redusă și lent, iar apt-fast este mult mai rapid decât apt.

Puteți „face backup și restaura” distribuția Linux folosind WSL Export and Import. Ca și în cazul oricărui sistem, este recomandabil să mențineți întotdeauna o copie de rezervă curentă.

Mariadb se instalează bine, dar nu poate reporni sau obține starea

Instalarea Mariadb a mers bine.  Fără erori sau avertismente.  Când am încercat să verific starea, am primit o eroare în ceea ce privește sistemul.

$> systemctl status mysql
Sistemul nu a fost pornit cu systemd ca sistem init (PID 1). Nu pot opera.

Motivul acestei erori este că Microsoft nu acceptă systemd în WSL.  Din fericire, Arkane Systems a creat un pachet system-genie pentru a activa systemd .  Vă sugerez să le citiți pagina web cu atenție înainte de a încerca următoarele instrucțiuni, care au fost preluate de pe pagina respectivă. Există instrucțiuni ușor diferite pentru distribuții, altele decât Ubuntu.

Mai întâi, trebuie să instalați fișierul .Net 5.0 runtime

$> 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

Apoi trebuie să configurăm depozitul wsl-transdebian

$> sudo apt-fast install apt-transport-https
$> wget -O / etc / apt / Trust.gpg.d / wsl-transdebian.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / Trust.gpg.d / wsl-transdebian.gpg
$> pisică << EOF > / etc / apt / sources.listă.d / wsl-transdebian.listă
$> deb https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye main
$> deb-src https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye main
$> actualizare apt-fast

Acum putem instala pachetul system-genie.

sudo apt-fast install -y systemd-genie

Ieșiți din shell-ul Linux, apoi opriți WSL din Power shell

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

Reporniți WSL cu un genie de la promptul Powershell.

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

Veți vedea „Se așteaptă sistemul .. .!!!!!!!!!!!!!!!”.  Durează 180 de secunde pentru a încărca complet.  Așteptați doar să se termine.  Când se termină, noua fereastră de shell ar trebui să arate astfel:

Se așteaptă sistemul .. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Expirat, așteptând ca systemd să intre în starea de rulare.
Acest lucru poate indica o eroare de configurare systemd.
Încercarea de a continua.

Confirmați genie instalat și systemd funcționează:

systemctl status mariadb

Ar trebui să obțineți ieșirea de stare pentru mariadb.  Rețineți că și starea systemctl MySQL funcționează.

Arkane Systems recomandă închiderea sesiunii de geniu WSL cu wsl -shutdown.  Aceasta va elibera toată memoria utilizată de WSL în Windows.

Drupal se instalează, dar nu se încarcă CSS

După executarea instalării de bază pentru Drupal 8, paginile nu au formatat.  Vizualizarea sursei paginii a arătat că nu se încarcă fișiere CSS. Mi-au trebuit două zile să-l descopăr, dar nuvela este că Drupal presupune că apache2 folosește directorul / tmp, dar nu este.  În mod implicit, apache2 este configurat pentru a utiliza un director tmp privat.  În mod ciudat, apelarea, sys_get_temp_dir () din php return / tmp, totuși nu asta folosește apache2.  Când Drupal își creează fișierele css și js optimizate, mai întâi încearcă să le scrie în folderul / tmp, apoi le mută în folderul de destinație, de obicei site-uri / implicite / files / css și / js. Dar apache2 nu folosește / tmp, deci acest proces eșuează și niciunul dintre fișierele css sau js. Debifând fișierele CSS și Javascript agregate va ocoli acest lucru, dar apoi toate fișierele CSS și js individuale sunt încărcate, deci aceasta nu este o soluție.

Puteți confirma că această problemă / tmp nu este accesibilă cu următorul fișier php simplu. Se creează un tmpfile și afișează numele fișierului.  Inițial, numele fișierului va fi necompletat, deoarece apelul către tmpfile () returnează NULL.  Am pus următorul cod în test.php și l-am numit de pe site-ul meu, localhost / mysite / test.php

ecou "\ n ";
ecou "\ n ";
ecou "Al doilea exemplu PHP\ n ";
ecou "\ n ";
ecou "\ n ";
ecou "

Dacă vizualizați sursa paginii \ r \ n, veți găsi o nouă linie în acest șir.";
 
ecou "

testarea

";
$ tmpDir = sys_get_temp_dir ();
ecou "

TMP direcory = '$ tmpDir'

";
$ file = tmpfile ();
$ cale = stream_get_meta_data ($ fișier) ['uri'];
ecou "

Calea fișierului tmp = '$ cale'

";
 
ecou "\ n ";
ecou "\ n ";
?>
 
A rezultat „Calea fișierului tmp =”

Am găsit o soluție la acest lucru în comentariile întrebării Stackoverflow de către utilizatorul One In a Million Apps.  Această soluție modifică configurația apache2 din PrivateTmp = true în PrivateTmp = false. Rețineți că schimbarea apache2 pentru a utiliza un director privat tmp a fost făcută din motive de securitate, iar majoritatea aplicațiilor pot fi configurate pentru a utiliza un alt director tmp.  Am încercat asta cu Drupal, dar nu am reușit să funcționeze. Aceasta este prima mea încercare de a rula Drupal pe Linux și am vrut ca lucrurile să „funcționeze” pe laptopul meu, cu puțină grijă pentru securitate.

Mai întâi, căutați fișierul care conține PrivateTmp folosind acest lucru din directorul / lib:

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

Acest lucru mi-a dat o listă lungă de meciuri.  Căutați cel care conține fișierul apache2.serviciu.  În cazul meu, a fost găsit la / usr / lib / systemd / system / apache2.serviciu.  copiați acest fișier în / etc. director. Editați / etc / apache2.servicii și schimbați PrivateTmp = true la PrivateTmp = false, salvați și reporniți serviciul apache2.

systemctl reporniți apache2

Relansați testul.pagina php din nou și ar trebui să afișați fișierul tmp denumit, confirmând accesul la folderul / tmp.

Ștergeți toate cache-urile Drupal și reîncărcați paginile.  Acum ar trebui să se afișeze corect. Nu știu de ce, dar funcția Drupal Clear Cache nu funcționează întotdeauna pentru mine.  Ștergerea manuală a tuturor fișierelor din site-uri / implicit / files / css js, apoi utilizarea PhpMyAdmin pentru golirea tabelelor cache funcționează întotdeauna.

Configurarea depanării VSCode

Configurați Xdebug

Mai întâi, instalați pachetele Remote - WSL și PHP Debug by Felix Becker pe VSCode.

Am instalat apoi Xdebug

sudo apt-fast php7.3-xdebug

Această versiune instalată 3.02 din Xdebug.

Am încercat să-l configurez urmând numeroasele exemple de pe internet.  Nimic nu a funcționat.  Se pare că cele mai multe exemple sunt pentru Xdebug 2.x, iar aceste setări de configurare nu mai funcționează cu 3.X

În cele din urmă am reușit să lucrez cu următorul php.setările ini.

A trebuit să adaug următoarele la ambele / etc / php / 7.3 / apache2 / php.ini și / etc / php / 7.3 / cli / php.ini pe sistemul meu.

Puteți găsi locația xdebug-ului dvs.deci mutându-vă în fișierul director / lib apoi rulați

find -name xdebug.deci [xdebug]
zend_extension = ./ lib / php / 20180731 / xdebug.asa de
xdebug.start_with_request = declanșator
xdebug.mode = depanare
xdebug.host_client_client = 1
xdebug.log = / tmp / xdebug_remote.Buturuga
xdebug.client_port = 9003

Configurați codul VSC

Depanarea la distanță în VSCode utilizează o lansare.fișier json stocat în rădăcina directorului de proiect în .vscode / lansare.json.

Puteți crea lansarea.json prin interfața de utilizare VSCode, dar mi se pare mai ușor să-l creez manual.  Mutați la rădăcina site-ului dvs. web și creați un .director vscode. Creați o lansare.json și încărcați-l în VSCode.

$> mkdir .vscode
$> cd .vscode
$> lansare tactilă.json
$> lansare cod.json

Puneți următorul json în fișier și salvați-l.


// Utilizați IntelliSense pentru a afla despre posibile atribute.
// Plasați cursorul pentru a vizualiza descrierile atributelor existente.
// Pentru mai multe informații, vizitați: https: // go.microsoft.com / fwlink /?linkid = 830387
"version": "0.2.0 ",
„configurații”: [

"name": "Ascultați XDebug",
„tip”: „php”,
"request": "lansare",
„port”: 9003,
„stopOnEntry”: adevărat,
„jurnal”: adevărat,
„pathMappings”:

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

,

"name": "Lansați scriptul deschis în prezent",
„tip”: „php”,
"request": "lansare",
"program": "$ file",
"cwd": "$ fileDirname",
„port”: 9003

]

Notă în pathMappings, unde am „/ var / www / html”, ar trebui să puneți calea completă către rădăcina site-ului dvs.

Închideți codul VSC. În promptul WSL Linux mutați înapoi la rădăcina site-ului dvs. web și încărcați proiectul în VSCode.  Presupunând că sunteți încă în .director vscode,

$> cd ..
$> cod .

Aceasta ar trebui să încarce proiectul în VSCode și ar trebui să vedeți arborele directorului complet al proiectului dvs. în stânga.  Deschideți pagina de start, cum ar fi indexul.php și adăugați un punct de întrerupere.  Apăsați F5 pentru a începe depanarea.  Accesați un browser web și încărcați site-ul. Reveniți la VSCode și ar trebui să vedeți oprit la punctul de întrerupere.

Codul nu rulează cu zsh Shell

În mod implicit, WSL este configurat să funcționeze cu shell-ul Bash și vede calea către executabilul VSCode în PATH.  Am trecut la zsh, iar VSCode nu va mai rula.  Soluția era să introduci un alias .zshrc

$> cd ~
$> cod .zshrc

Adăugați următorul alias, care indică calea completă către folderul executabil de cod, așa cum se vede de Ubuntu în WSL.  Înlocuiți YourUserName cu numele dvs. de utilizator Windows actual.

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

Acum trebuie să reîncărcați configurația zsh cu

$> sursă .zshrc

Codul ar trebui să se încarce acum din shell-ul zsh.

Asta este!!  Acești pași au dus în final la depanarea Drupal și VSCode să funcționeze corect pentru mine.  Mi-au trebuit două zile să descopăr totul. Sunt un noob! Sperăm că acest lucru funcționează pentru dvs. și vă economisește ceva timp.

Doar o reamintire a mediului meu.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode cu Remote - WSL și PHP Debug de pachetele Felix Becker.

Codificare fericită!

Install and Get Started with PowerShell on Ubuntu
PowerShell is a task based configuration tool used for automation and configuration of Windows operating system. It is a very powerful tool built on t...
How to use the touch command on Ubuntu
“touch” is a basic Linux command to create empty files or change files timestamps (last date or time of file access or modification). The command touc...
How to change the hostname in Ubuntu
The hostname is a translation of our IP address, it is our device ID in the network, like a domain name (a hostname can be a domain name). Hostname's ...