Ubuntu

Ubuntu 20.04, WSL2, VSCode och Drupal 8 - Fixa “Gotchas”

Ubuntu 20.04, WSL2, VSCode och Drupal 8 - Fixa “Gotchas”

Microsoft har äntligen levererat en fantastisk lösning för att utveckla Linux-applikationer på Windows.  Windows Subsystem för Linux, WSL2, är ganska enkelt att installera och komma igång, särskilt om du redan är bekant med Linux.  Även om du inte är det finns det många mycket bra artiklar om att få igång en grundläggande installation.

Att utveckla Linux PHP-applikationer med VSCode på Windows 10 är ungefär lika stabil och sömlös en upplevelse man kan få. Flera "gotchas" som jag stötte på beskrivs inte i någon av de artiklar jag hittade om att ställa in LAMP på Ubuntu och WSL2.

Jag hade begränsad erfarenhet av Linux och var mycket beroende av artiklar skrivna av dem som kom före mig.  Medan de fick mig det hela vägen dit, stötte jag på flera problem att få Drupal 8 igång utan fel och felsökning i VSCode.  Lösningarna hittades i kommentarsektionerna i frågor som publicerats på internet. Det tog många timmars sökning, och jag hoppas kunna rädda människor genom att presentera de lösningar jag hittade i den här artikeln.

Min miljö är Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode med Remote - WSL och PHP Debug av Felix Becker-paket.  Jag kör WSL från Powershell i Windows Terminal.

Innan vi börjar, här är några rekommendationer som kan spara tid.

Installera och använda apt-fast istället för apt kan verkligen påskynda installationer och uppdateringar.  Där jag bor är internet låg bandbredd och långsamt, och apt-fast är mycket snabbare än apt.

Du kan ”säkerhetskopiera och återställa” din Linux-distribution med WSL Export and Import. Som med alla system är det lämpligt att alltid ha en aktuell säkerhetskopia.

Mariadb installerar bra men kan inte starta om eller få status

Mariadb-installationen gick bra.  Inga fel eller varningar.  När jag försökte kontrollera statusen fick jag ett fel angående systemet.

$> systemctl status mysql
Systemet har inte startats med systemd som init-system (PID 1). Kan inte fungera.

Anledningen till detta fel är att Microsoft inte stöder systemd i WSL.  Lyckligtvis skapade Arkane Systems en systemgenie för att aktivera systemd .  Jag föreslår att du läser deras webbsida noggrant innan du testar följande instruktioner, som hämtades från den sidan. Det finns lite olika instruktioner för andra distributioner än Ubuntu.

Först måste du installera .Netto 5.0 körtid

$> sudo apt-snabb uppdatering
$> sudo sudo apt-snabb installation -y apt-transport-https
$> sudo apt-snabb uppdatering
$> sudo apt-snabb installation -y dotnet-sdk-5.0

Därefter måste vi konfigurera wsl-transdebian Repository

$> sudo apt-snabb installera apt-transport-https
$> wget -O / etc / apt / betrodd.gpg.d / wsl-transdebian.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / betrodd.gpg.d / wsl-transdebian.gpg
$> cat << EOF > / etc / apt / sources.lista.d / wsl-transdebian.lista
$> deb https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye main
$> deb-src https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye main
$> apt-snabb uppdatering

Nu kan vi installera systemgeniepaketet.

sudo apt-snabb installation -y systemd-genie

Avsluta ditt Linux-skal och stäng sedan av WSL från Power shell

PS C: \ Users \ UsrName> wsl - avstängning

Starta om WSL med en genie från Powershell-prompten.

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

Du kommer att se "Väntar på systemd .. .!!!!!!!!!!!!!!!”.  Det tar 180 sekunder att ladda helt.  Vänta bara tills den är klar.  När det är klart ska ditt nya skalfönster se ut så här:

Väntar på systemd .. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Tidsavbrott väntar på att systemd ska gå in i körläge.
Detta kan indikera ett systemd konfigurationsfel.
Försöker fortsätta.

Bekräfta att genie är installerad och systemd fungerar:

systemctl status mariadb

Du bör få statusutdata för mariadb.  Observera att systemctl-status mysql också fungerar.

Arkane Systems rekommenderar att du stänger av din WSL-geniesession med wsl -avstängning.  Detta frigör allt minne som används av WSL i Windows.

Drupal installerar men ingen CSS laddas

Efter att ha kört grundinstallationen för Drupal 8 hade sidorna ingen formatering.  Visning av sidkälla visade att inga CSS-filer laddades. Det tog mig två dagar att räkna ut den här, men novellen är att Drupal antar att apache2 använder katalogen / tmp, men det är inte.  Som standard är apache2 konfigurerad för att använda en privat tmp-katalog.  Konstigt nog ringer, sys_get_temp_dir () från php return / tmp, men det är inte vad apache2 använder.  När Drupal skapar sina optimerade css- och js-filer försöker den först skriva dem till / tmp-mappen och flyttar dem sedan till målmappen, vanligtvis webbplatser / standard / filer / css och / js. Men apache2 använder inte / tmp, så den här processen misslyckas och ingen av css- eller js-filerna. Avmarkering av sammanlagda CSS- och Javascript-filer kommer att kringgå detta, men då laddas alla enskilda css- och js-filer, så det här är ingen lösning.

Du kan bekräfta detta problem / tmp är inte tillgängligt med följande enkla php-fil. Det skapar en tmpfil och visar filnamnet.  Inledningsvis är filnamnet tomt eftersom samtalet till tmpfile () returnerar NULL.  Jag testade följande kod.php och kallade det från min webbplats, localhost / mysite / test.php

eko "\ n ";
eko "\ n ";
eko "Mitt andra PHP-exempel\ n ";
eko "\ n ";
eko "\ n ";
eko "

Om du ser sidkällan \ r \ n hittar du en ny rad i den här strängen.";
 
eko "

testning

";
$ tmpDir = sys_get_temp_dir ();
eko "

TMP direcory = '$ tmpDir'

";
$ file = tmpfile ();
$ sökväg = stream_get_meta_data ($ fil) ['uri'];
eko "

Sökväg till tmp-fil = '$ path'

";
 
eko "\ n ";
eko "\ n ";
?>
 
Detta resulterade i "Path of tmp file ="

Jag hittade en lösning på detta i kommentarerna till Stackoverflow-frågan av användaren One In a Million Apps.  Denna lösning ändrar konfigurationen av apache2 från PrivateTmp = true till PrivateTmp = false. Observera att ändring av apache2 för att använda en privat tmp-katalog gjordes av säkerhetsskäl, och de flesta appar kan konfigureras för att använda en annan tmp-mapp.  Jag försökte det med Drupal men kunde inte få det att fungera. Detta är mitt första försök att köra Drupal på Linux, och jag ville att saker och ting ”bara skulle fungera” på min bärbara dator med liten oro för säkerhet.

Leta först efter filen som innehåller PrivateTmp med den här från / lib-katalogen:

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

Detta gav mig en lång lista över matchningar.  Leta efter den som innehåller filen apache2.service.  I mitt fall hittades det på / usr / lib / systemd / system / apache2.service.  kopiera den här filen till / etc. katalog. Redigera / etc / apache2.tjänster och ändra PrivateTmp = true till PrivateTmp = false, spara och starta om apache2-tjänsten.

systemctl starta om apache2

Kör testet igen.php-sidan igen, och du bör visa namnet tmp-fil, vilket bekräftar åtkomst till / tmp-mappen.

Rensa alla Drupal-cachar och ladda om sidorna.  De ska nu visas korrekt. Jag vet inte varför, men funktionen Drupal Clear Cache fungerar inte alltid för mig.  Manuellt radering av alla filer i webbplatser / standard / filer / css js, sedan använder PhpMyAdmin för att tömma cachetabellerna fungerar alltid.

Konfigurera VSCode-felsökning

Konfigurera Xdebug

Installera först Remote - WSL och PHP Debug by Felix Becker-paketen till VSCode.

Jag installerade sedan Xdebug

sudo apt-snabb php7.3-xdebug

Denna installerade version 3.02 i Xdebug.

Jag försökte konfigurera den genom att följa de många exemplen på internet.  Ingenting fungerade.  Visar sig att de flesta exemplen är för Xdebug 2.x, och dessa konfigurationsinställningar fungerar inte längre med 3.x

Jag fick det äntligen att fungera med följande php.ini-inställningar.

Jag var tvungen att lägga till följande till båda / etc / php / 7.3 / apache2 / php.ini och / etc / php / 7.3 / cli / php.ini på mitt system.

Du hittar platsen för din xdebug.så genom att flytta till / lib-katalogfilen och sedan köra

hitta-namn xdebug.så [xdebug]
zend_extension = ./ lib / php / 20180731 / xdebug.så
xdebug.start_with_request = trigger
xdebug.mode = felsökning
xdebug.discover_client_host = 1
xdebug.log = / tmp / xdebug_remote.logga
xdebug.client_port = 9003

Konfigurera VSCode

Fjärrfelsökning i VSCode använder en lansering.json-fil lagrad i roten till din projektkatalog i .vscode / launch.json.

Du kan skapa lanseringen.json-fil genom VSCode UI, men jag tycker att det är lättare att skapa den manuellt.  Gå till roten på din webbplats och skapa en .vscode-katalog. Skapa en lansering.json-filen och ladda den i VSCode.

$> mkdir .vscode
$> cd .vscode
$> pekstart.json
$> kodstart.json

Lägg till följande json i filen och spara den.


// Använd IntelliSense för att lära dig om möjliga attribut.
// Håll muspekaren för att visa beskrivningar av befintliga attribut.
// Mer information finns på: https: // go.Microsoft.com / fwlink /?linkid = 830387
"version": "0.2.0 ",
"konfigurationer": [

"name": "Lyssna efter XDebug",
"type": "php",
"request": "launch",
"port": 9003,
"stopOnEntry": sant,
"logg": sant,
"pathMappings":

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

,

"name": "Starta för närvarande öppet skript",
"type": "php",
"request": "starta",
"program": "$ file",
"cwd": "$ fileDirname",
"port": 9003

]

Notera under pathMappings, där jag har “/ var / www / html”, bör du lägga hela sökvägen till roten på din webbplats.

Stäng VSCode. I din WSL Linux-prompt går du tillbaka till roten på din webbplats och laddar projektet i VSCode.  Förutsatt att du fortfarande är i .vscode-katalog,

$> cd ..
$> kod .

Detta bör ladda projektet i VSCode, och du ska se hela katalogträdet för ditt projekt till vänster.  Öppna din startsida, till exempel index.php och lägg till en brytpunkt.  Tryck på F5 för att starta felsökning.  Gå till en webbläsare och ladda webbplatsen. Byt tillbaka till VSCode, och du borde se att den stannade vid din brytpunkt.

Koden körs inte med zsh Shell

Som standard är WSL inställd på att fungera med Bash-skalet och det ser vägen till VSCode-körningen i PATH.  Jag bytte till zsh och VSCode skulle inte längre köras.  Fixen var att sätta in ett alias .zshrc

$> cd ~
$> kod .zshrc

Lägg till följande alias, som pekar på hela sökvägen till den körbara mappkoden, som visas av Ubuntu i WSL.  Byt ut ditt användarnamn med ditt faktiska Windows-användarnamn.

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

Du måste nu ladda om zsh-konfigurationen med

$> källa .zshrc

Koden ska nu laddas från zsh-skalet.

Det är allt!!  Dessa steg fick äntligen Drupal och VSCode-felsökning fungera korrekt för mig.  Det tog mig två dagar att räkna ut allt detta. Jag är en noob! Förhoppningsvis fungerar det här för dig och sparar lite tid.

Bara en påminnelse om min miljö.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode med Remote - WSL och PHP Debug av Felix Becker-paket.

Glad kodning!

Bästa Linux Distros för spel 2021
Linux-operativsystemet har kommit långt från sitt ursprungliga, enkla, serverbaserade utseende. Detta operativsystem har förbättrats enormt de senaste...
Hur du fångar och strömmar din spelsession på Linux
Tidigare betraktades spel bara som en hobby, men med tiden såg spelindustrin en enorm tillväxt när det gäller teknik och antalet spelare. Spelpubliken...
Bästa spel att spela med handspårning
Oculus Quest introducerade nyligen den fantastiska idén om handspårning utan kontroller. Med ett ständigt ökande antal spel och aktiviteter som utför ...