Ubuntu 20.04, WSL2, VSCode i Drupal 8 - Ispravljanje Gotchas

Microsoft je napokon isporučio fantastično rješenje za razvoj Linux aplikacija na sustavu Windows.  Podsistem Windows za Linux, WSL2, prilično je jednostavan za instalaciju i pokretanje, pogotovo ako ste već upoznati s Linuxom.  Čak i ako niste, postoji mnogo vrlo dobrih članaka o pokretanju i pokretanju osnovne instalacije.

Razvoj Linux PHP aplikacija pomoću VSCodea na sustavu Windows 10 približno je jednako stabilno i besprijekorno iskustvo koje se može dobiti. Ipak, nekoliko "dogovora" na koje sam naletio nije opisano ni u jednom članku koji sam pronašao o postavljanju LAMP-a na Ubuntu i WSL2.

Imao sam ograničeno iskustvo s Linuxom i uvelike sam ovisio o člancima onih koji su došli prije mene.  Iako su me odveli većinu puta tamo, naišao sam na nekoliko problema s pokretanjem Drupal 8 bez grešaka i otklanjanjem pogrešaka radeći u VSCode.  Rješenja su pronađena u odjeljcima za komentare pitanja objavljenih na internetu. To je trajalo mnogo sati pretraživanja i nadam se da ću spasiti ljude predstavljajući rješenja koja sam pronašao u ovom jednom članku.

Moje okruženje je Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows terminal, VSCode s daljinskim upravljačem - WSL i PHP Debug paketi Felix Becker.  Izvodim WSL iz Powershella unutar Windows terminala.

Prije nego što započnemo, evo nekoliko preporuka koje vam mogu uštedjeti vrijeme.

Instaliranje i korištenje apt-fast umjesto apt stvarno može ubrzati instalacije i ažuriranja.  Tamo gdje ja živim, internet ima malu propusnost i spor je, a brz i brz je puno brži od apt-a.

Možete "sigurnosno kopirati i vratiti" svoju Linux distribuciju pomoću WSL izvoza i uvoza. Kao i za bilo koji drugi sustav, poželjno je uvijek održavati trenutnu sigurnosnu kopiju.

Mariadb se dobro instalira, ali ne može se ponovno pokrenuti ili dobiti status

Instalacija Mariadba prošla je u redu.  Nema pogrešaka ili upozorenja.  Kad sam pokušao provjeriti status, dobio sam pogrešku u vezi sa sustavom.

$> systemctl status mysql
Sustav nije pokrenut sa systemd kao init sustav (PID 1). Ne mogu raditi.

Razlog ove pogreške je što Microsoft ne podržava systemd u WSL-u.  Srećom, Arkane Systems stvorio je paket system-genie kako bi omogućio systemd .  Predlažem da temeljito pročitate njihovu web stranicu prije nego što isprobate sljedeće upute preuzete s te stranice. Postoje malo drugačije upute za distribucije koje nisu Ubuntu.

Prvo morate instalirati .Mreža 5.0 vrijeme izvođenja

$> sudo apt-brzo ažuriranje
$> sudo sudo apt-brza instalacija -y apt-transport-https
$> sudo apt-brzo ažuriranje
$> sudo apt-brza instalacija -y dotnet-sdk-5.0

Dalje moramo konfigurirati spremište wsl-transdebian

$> sudo apt-brzo instaliraj apt-transport-https
$> wget -O / etc / apt / trusted.gpg.d / wsl-transdebijski.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / trusted.gpg.d / wsl-transdebijski.gpg
$> mačka << EOF > / etc / apt / sources.popis.d / wsl-transdebijski.popis
$> deb https: // arkane-sustavi.github.io / wsl-transdebian / apt / bullseye glavni
$> deb-src https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye glavna
$> apt-brzo ažuriranje

Sada možemo instalirati paket system-genie.

sudo apt-brza instalacija -y systemd-genie

Izađite iz svoje Linux školjke, a zatim isključite WSL iz Power ljuske

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

Ponovno pokrenite WSL s duhom iz Powershell upita.

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

Vidjet ćete „Čeka se systemd .. .!!!!!!!!!!!!!!!".  Za potpuno učitavanje potrebno je 180 sekundi.  Samo pričekaj da završi.  Kad završi, vaš novi prozor ljuske trebao bi izgledati ovako:

Čeka se systemd .. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Isteklo je vrijeme čekanja da systemd uđe u stanje rada.
To može ukazivati ​​na sistemsku pogrešku u konfiguraciji.
Pokušaj nastavka.

Potvrdite da je genie instaliran i da systemd radi:

systemctl status mariadb

Trebali biste dobiti izlaz statusa za mariadb.  Imajte na umu da systemctl status mysql također radi.

Arkane Systems preporučuje isključivanje vaše WSL genie sesije pomoću wsl-shutdown.  Ovo će osloboditi svu memoriju koju WSL koristi u sustavu Windows.

Drupal se instalira, ali nijedan CSS se ne učitava

Nakon pokretanja osnovne instalacije za Drupal 8, stranice nisu imale formatiranje.  Pregled stranice prikaza pokazao je da se ne učitavaju CSS datoteke. Trebala su mi dva dana da to shvatim, ali kratka priča je da Drupal pretpostavlja da apache2 koristi direktorij / tmp, ali nije.  Prema zadanim postavkama, apache2 je konfiguriran za upotrebu privatnog tmp direktorija.  Čudno je pozivanje, sys_get_temp_dir () iz php return / tmp, no to apache2 ne koristi.  Kada Drupal kreira svoje optimizirane css i js datoteke, prvo ih pokušava zapisati u mapu / tmp, a zatim ih premjesti u odredišnu mapu, obično sites / default / files / css i / js. Ali apache2 ne koristi / tmp, pa ovaj postupak ne uspijeva, niti jedna od css ili js datoteka. Poništavanjem označavanja zbirnih CSS i Javascript datoteka to će zaobići, ali tada se učitavaju sve pojedinačne css i js datoteke, pa ovo nije rješenje.

Možete potvrditi da ovaj problem / tmp nije dostupan sljedećom jednostavnom php datotekom. Stvara tmpfile i prikazuje naziv datoteke.  U početku će naziv datoteke biti prazan jer poziv na tmpfile () vraća NULL.  Stavio sam sljedeći kod na test.php i pozvao ga s moje stranice, localhost / mysite / test.php

jeka "\ n ";
jeka "\ n ";
jeka "\ n ";
jeka "\ n ";
jeka "\ n ";
jeka "

Ako pregledate izvor stranice \ r \ n, u ovom ćete nizu pronaći novi redak.";
 
jeka "

testiranje

";
$ tmpDir = sys_get_temp_dir ();
jeka "

TMP direcory = '$ tmpDir'

";
$ datoteka = tmpfile ();
$ path = stream_get_meta_data ($ datoteka) ['uri'];
jeka "

Put tmp datoteke = '$ put'

";
 
jeka "\ n ";
jeka "\ n ";
?>
 
To je rezultiralo "Putem tmp datoteke ="

Rješenje za to pronašao sam u komentarima na pitanje Stackoverflow korisnika Jedna u milijun aplikacija.  Ovo rješenje mijenja konfiguraciju apache2 iz PrivateTmp = true u PrivateTmp = false. Imajte na umu da je promjena apache2 za upotrebu privatnog tmp direktorija izvršena iz sigurnosnih razloga, a većina aplikacija može se konfigurirati da koristi drugu tmp mapu.  Pokušao sam to s Drupalom, ali nisam uspio uspjeti. Ovo je moj prvi pokušaj pokretanja Drupala na Linuxu i želio sam da stvari "jednostavno funkcioniraju" na mojem prijenosnom računalu bez malo brige o sigurnosti.

Prvo potražite datoteku koja sadrži PrivateTmp koristeći ovo iz direktorija / lib:

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

Ovo mi je dalo dugački popis utakmica.  Potražite onaj koji sadrži datoteku apache2.servis.  U mom slučaju pronađen je na / usr / lib / systemd / system / apache2.servis.  kopirajte ovu datoteku u / etc. imenik. Uredi / etc / apache2.usluge i promijenite PrivateTmp = true u PrivateTmp = false, spremite i ponovo pokrenite uslugu apache2.

systemctl ponovno pokrenite apache2

Ponovno pokrenite test.php stranicu i trebali biste prikazati tmp datoteku s imenom koja potvrđuje pristup mapi / tmp.

Očistite sve Drupalove predmemorije i ponovo učitajte stranice.  Sada bi se trebali ispravno prikazati. Ne znam zašto, ali funkcija Drupal Clear Cache ne radi uvijek za mene.  Ručno brisanje svih datoteka u sites / default / files / css js, a zatim korištenje PhpMyAdmin za pražnjenje tablica predmemorije uvijek radi.

Postavljanje otklanjanja pogrešaka VSCode

Konfigurirajte Xdebug

Prvo instalirajte Remote - WSL i PHP Debug by Felix Becker pakete na VSCode.

Zatim sam instalirao Xdebug

sudo apt-brzi php7.3-xdebug

Ova instalirana verzija 3.02 od Xdebuga.

Pokušao sam ga konfigurirati slijedeći brojne primjere na internetu.  Ništa nije uspjelo.  Ispada da je većina primjera za Xdebug 2.x, a te konfiguracijske postavke više ne rade s 3.x

Napokon sam uspio raditi sa sljedećim php-om.ini postavke.

Morao sam dodati sljedeće u oba / etc / php / 7.3 / apache2 / php.ini i / etc / php / 7.3 / cli / php.ini na mom sustavu.

Možete pronaći mjesto vašeg xdebuga.pa premještanjem u datoteku direktorija / lib, a zatim izvođenjem

pronađi -ime xdebug.tako [xdebug]
zend_extention = ./ lib / php / 20180731 / xdebug.tako
xdebug.start_with_request = okidač
xdebug.način = otklanjanje pogrešaka
xdebug.Discover_client_host = 1
xdebug.log = / tmp / xdebug_remote.zapisnik
xdebug.client_port = 9003

Konfigurirajte VSCode

Daljinsko ispravljanje pogrešaka u VSCode koristi pokretanje.json datoteka pohranjena u korijenu direktorija vašeg projekta u .vscode / pokretanje.json.

Možete stvoriti pokretanje.json datoteku kroz VSCode UI, ali smatram da je lakše ručno je stvoriti.  Pomaknite se do korijena vaše web stranice i stvorite a .vscode direktorij. Stvorite lansiranje.json datoteku i učitajte je u VSCode.

$> mkdir .vscode
$> cd .vscode
$> pokretanje dodira.json
$> pokretanje koda.json

U datoteku stavite sljedeći json i spremite ga.

// Koristite IntelliSense za učenje o mogućim atributima.
// Zadržite pokazivač miša za prikaz opisa postojećih atributa.
// Za više informacija posjetite: https: // go.Microsofta.com / fwlink /?veza = 830387
"version": "0.2.0 ",
"konfiguracije": [

"name": "Slušajte XDebug",
"type": "php",
"request": "pokretanje",
"luka": 9003,
"stopOnEntry": istina,
"log": istina,
"preslikavanja puta":

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

,

"name": "Pokreni trenutno otvorenu skriptu",
"type": "php",
"request": "pokretanje",
"program": "$ datoteka",
"cwd": "$ fileDirname",
"luka": 9003

]

Napomena pod pathMappings, gdje imam “/ var / www / html”, trebali biste staviti puni put do korijena vaše web stranice.

Zatvorite VSCode. U vašem WSL Linux odzivu vratite se na korijen vaše web stranice i učitajte projekt u VSCode.  Pod pretpostavkom da ste još uvijek u .vscode direktorij,

$> cd ..
$> kod .

Ovo bi trebalo učitati projekt u VSCode, a na lijevoj strani trebali biste vidjeti cijelo stablo direktorija vašeg projekta.  Otvorite svoju početnu stranicu, poput indeksa.php i dodajte točku prekida.  Pritisnite F5 za početak uklanjanja pogrešaka.  Idite na web preglednik i učitajte web mjesto. Vratite se na VSCode i trebali biste vidjeti da je zaustavljen na vašoj točki prekida.

Kôd se ne izvodi sa zsh školjkom

Prema zadanim postavkama, WSL je postavljen za rad s Bash školjkom i vidi put do izvršne datoteke VSCode u PATH.  Prebacio sam se na zsh i VSCode se više neće prikazivati.  Popravak je bio stavljanje aliasa .zshrc

$> cd ~
$> kod .zshrc

Dodajte sljedeći alias koji pokazuje na puni put do izvršne mape koda, kako to vidi Ubuntu u WSL-u.  Zamijenite YourUserName svojim stvarnim korisničkim imenom za Windows.

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

Sada trebate ponovno učitati zsh konfiguraciju sa

$> izvor .zshrc

Kod bi se sada trebao učitati iz zsh ljuske.

To je to!!  Ovi su koraci napokon doveli do ispravljanja pogrešaka u Drupalu i VSCodeu.  Trebala su mi dva dana da sve to shvatim. Ja sam noob! Nadam se da vam ovo odgovara i štedi vam malo vremena.

Samo podsjetnik na moje okruženje.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows terminal, VSCode s daljinskim upravljačem - WSL i PHP Debug paketi Felix Becker.

Sretno kodiranje!