Ubuntu

Ubuntu 20.04, WSL2, VSCode og Drupal 8 - Fikse “Gotchas”

Ubuntu 20.04, WSL2, VSCode og Drupal 8 - Fikse “Gotchas”

Microsoft har endelig levert en fantastisk løsning for utvikling av Linux-applikasjoner på Windows.  Windows Subsystem for Linux, WSL2, er ganske enkelt å installere og komme i gang, spesielt hvis du allerede er kjent med Linux.  Selv om du ikke er det, er det mange veldig gode artikler om å få en grunnleggende installasjon i gang.

Å utvikle Linux PHP-applikasjoner ved bruk av VSCode på Windows 10 er omtrent så stabil og sømløs en opplevelse man kan få. Likevel ble flere "gotchas" jeg kjørte på ikke beskrevet i noen av artiklene jeg fant om å sette opp LAMP på Ubuntu og WSL2.

Jeg hadde begrenset erfaring med Linux og var avhengig av artikler skrevet av de som kom før meg.  Mens de fikk meg det meste av veien dit, fikk jeg flere problemer med å få Drupal 8 til å kjøre uten feil og feilsøking i VSCode.  Løsningene ble funnet i kommentarfeltet til spørsmål lagt ut på internett. Dette tok mange timers leting, og jeg håper å redde folk ved å presentere løsningene jeg fant i denne artikkelen.

Mitt miljø er 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 og PHP Debug av Felix Becker-pakker.  Jeg kjører WSL fra Powershell i Windows Terminal.

Før vi setter i gang, er det noen anbefalinger som kan spare deg for tid.

Installasjon og bruk av apt-fast i stedet for apt kan virkelig øke hastigheten på installasjoner og oppdateringer.  Der jeg bor, er internett lav båndbredde og tregt, og apt-fast er mye raskere enn apt.

Du kan "sikkerhetskopiere og gjenopprette" Linux-distribusjonen din ved hjelp av WSL Export and Import. Som med ethvert system, er det tilrådelig å alltid ha en aktuell sikkerhetskopi.

Mariadb installerer fint, men kan ikke starte på nytt eller få status

Mariadb-installasjonen gikk bra.  Ingen feil eller advarsler.  Da jeg prøvde å sjekke statusen, fikk jeg en feil angående systemet.

$> systemctl status mysql
Systemet er ikke startet opp med systemd som init-system (PID 1). Kan ikke operere.

Årsaken til denne feilen er at Microsoft ikke støtter systemd i WSL.  Heldigvis opprettet Arkane Systems en pakke systemgenie for å aktivere systemd .  Jeg foreslår at du leser hjemmesiden deres grundig før du prøver følgende instruksjoner, som ble hentet fra den siden. Det er litt forskjellige instruksjoner for andre distribusjoner enn Ubuntu.

Først må du installere .Nett 5.0 kjøretid

$> sudo apt-rask oppdatering
$> sudo sudo apt-rask installasjon -y apt-transport-https
$> sudo apt-rask oppdatering
$> sudo apt-rask installasjon -y dotnet-sdk-5.0

Deretter må vi konfigurere wsl-transdebian Repository

$> sudo apt-rask installer apt-transport-https
$> wget -O / etc / apt / klarert.gpg.d / wsl-transdebian.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / klarert.gpg.d / wsl-transdebian.gpg
$> katt << 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-rask oppdatering

Nå kan vi installere systemgenie-pakken.

sudo apt-rask installasjon -y systemd-genie

Gå ut av Linux-skallet, og slå deretter av WSL fra Power shell

PS C: \ Users \ UsrName> wsl - shutdown

Start WSL på nytt med en genie fra Powershell-ledeteksten.

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

Du vil se "Venter på systemd .. .!!!!!!!!!!!!!!!”.  Det tar 180 sekunder å laste helt inn.  Bare vent til den er ferdig.  Når det er gjort, skal det nye skallvinduet se slik ut:

Venter på systemd .. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Tidsavbrudd ventet på at systemd skulle gå i kjører tilstand.
Dette kan indikere en systemd konfigurasjonsfeil.
Prøver å fortsette.

Bekreft at genien er installert og systemd fungerer:

systemctl status mariadb

Du bør få statusutdata for mariadb.  Merk at systemctl status mysql også fungerer.

Arkane Systems anbefaler å avslutte WSL-geniesesjonen med wsl-shutdown.  Dette vil frigjøre alt minne som brukes av WSL i Windows.

Drupal installerer men ingen CSS blir lastet

Etter å ha kjørt den grunnleggende installasjonen for Drupal 8, hadde sidene ingen formatering.  Å vise sidekilde viste at ingen CSS-filer ble lastet inn. Det tok meg to dager å finne ut denne, men novellen er at Drupal antar at apache2 bruker / tmp-katalogen, men det er ikke.  Som standard er apache2 konfigurert til å bruke en privat tmp-katalog.  Merkelig nok å ringe, sys_get_temp_dir () fra php return / tmp, men det er ikke det apache2 bruker.  Når Drupal oppretter sine optimaliserte css- og js-filer, prøver den først å skrive dem til / tmp-mappen, og flytter dem deretter til målmappen, vanligvis nettsteder / standard / filer / css og / js. Men apache2 bruker ikke / tmp, så denne prosessen mislykkes, og ingen av css- eller js-filene. Hvis du fjerner avmerkingen for samlede CSS- og Javascript-filer, vil dette omgå dette, men så lastes alle individuelle css- og js-filer inn, så dette er ikke en løsning.

Du kan bekrefte at dette problemet / tmp ikke er tilgjengelig med følgende enkle php-fil. Det oppretter en tmpfil og viser filnavnet.  Til å begynne med vil filnavnet være tomt fordi samtalen til tmpfile () returnerer NULL.  Jeg satte følgende kode på prøve.php og kalte det fra nettstedet mitt, localhost / mysite / test.php

ekko "\ n ";
ekko "\ n ";
ekko "Mitt andre PHP-eksempel\ n ";
ekko "\ n ";
ekko "\ n ";
ekko "

Hvis du ser på sidekilden \ r \ n, finner du en ny linje i denne strengen.";
 
ekko "

testing

";
$ tmpDir = sys_get_temp_dir ();
ekko "

TMP direcory = '$ tmpDir'

";
$ fil = tmpfile ();
$ path = stream_get_meta_data ($ file) ['uri'];
ekko "

Path of tmp file = '$ path'

";
 
ekko "\ n ";
ekko "\ n ";
?>
 
Dette resulterte i "Path of tmp file ="

Jeg fant en løsning på dette i kommentarene til Stackoverflow-spørsmålet fra brukeren One In a Million Apps.  Denne løsningen endrer apache2-konfigurasjonen fra PrivateTmp = true til PrivateTmp = false. Merk at endring av apache2 for å bruke en privat tmp-katalog ble gjort av sikkerhetsgrunner, og de fleste apper kan konfigureres til å bruke en annen tmp-mappe.  Jeg prøvde det med Drupal, men klarte ikke å få det til å fungere. Dette er mitt første forsøk på å kjøre Drupal på Linux, og jeg ønsket at ting bare skulle "fungere" på den bærbare datamaskinen min med liten bekymring for sikkerhet.

Først må du se etter filen som inneholder PrivateTmp ved å bruke denne fra / lib-katalogen:

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

Dette ga meg en lang liste med kamper.  Se etter den som inneholder filen apache2.service.  I mitt tilfelle ble det funnet på / usr / lib / systemd / system / apache2.service.  kopier denne filen til / etc. katalog. Rediger / etc / apache2.tjenester og endre PrivateTmp = true til PrivateTmp = false, lagre og start apache2-tjenesten på nytt.

systemctl start apache2 på nytt

Kjør testen på nytt.php-siden igjen, og du bør få vist tmp-filen som heter, bekrefter tilgang til / tmp-mappen.

Fjern alle Drupal-hurtigbuffer og last inn sidene på nytt.  De skal nå vises riktig. Jeg vet ikke hvorfor, men funksjonen Drupal Clear Cache fungerer ikke alltid for meg.  Manuell sletting av alle filer i nettsteder / standard / filer / css js, og deretter bruker du PhpMyAdmin for å tømme hurtigbuffertabellene.

Sette opp VSCode-feilsøking

Konfigurer Xdebug

Først installerer du pakkene Remote - WSL og PHP Debug by Felix Becker til VSCode.

Jeg installerte deretter Xdebug

sudo apt-rask php7.3-xdebug

Denne installerte versjonen 3.02 av Xdebug.

Jeg prøvde å konfigurere den ved å følge de mange eksemplene på internett.  Ingenting fungerte.  Det viser seg at de fleste eksemplene er for Xdebug 2.x, og disse konfigurasjonsinnstillingene fungerer ikke lenger med 3.x

Jeg endelig fikk det til å fungere med følgende php.ini-innstillinger.

Jeg måtte legge til følgende i begge / etc / php / 7.3 / apache2 / php.ini og / etc / php / 7.3 / cli / php.ini på systemet mitt.

Du finner plasseringen til xdebug.så ved å flytte til / lib katalogfilen og deretter kjøre

finn-navn xdebug.så [xdebug]
zend_extension = ./ lib / php / 20180731 / xdebug.så
xdebug.start_with_request = trigger
xdebug.modus = feilsøking
xdebug.discover_client_host = 1
xdebug.logg = / tmp / xdebug_remote.Logg
xdebug.klient_port = 9003

Konfigurer VSCode

Ekstern feilsøking i VSCode bruker en lansering.json-fil lagret i roten til prosjektkatalogen din i .vscode / lansering.json.

Du kan opprette lanseringen.json-fil gjennom VSCode UI, men jeg synes det er lettere å lage den manuelt.  Gå til roten til nettstedet ditt og opprett en .vscode katalog. Lag en lansering.json-filen og last den i VSCode.

$> mkdir .vscode
$> cd .vscode
$> berøringsstart.json
$> kodelansering.json

Legg følgende json i filen og lagre den.


// Bruk IntelliSense for å lære om mulige attributter.
// Hold markøren for å vise beskrivelser av eksisterende attributter.
// For mer informasjon, besøk: https: // go.Microsoft.com / fwlink /?linkid = 830387
"versjon": "0.2.0 ",
"konfigurasjoner": [

"name": "Lytt etter XDebug",
"type": "php",
"request": "launch",
"port": 9003,
"stopOnEntry": sant,
"logg": sant,
"pathMappings":

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

,

"name": "Start for øyeblikket åpent skript",
"type": "php",
"request": "launch",
"program": "$ file",
"cwd": "$ fileDirname",
"port": 9003

]

Merk under pathMappings, der jeg har “/ var / www / html”, bør du legge hele banen til roten til nettstedet ditt.

Lukk VSCode. I WSL Linux-ledeteksten, flytt deg tilbake til roten på nettstedet ditt og last prosjektet i VSCode.  Forutsatt at du fortsatt er i .vscode katalog,

$> cd ..
$> kode .

Dette skal laste prosjektet i VSCode, og du bør se hele katalogtreet til prosjektet til venstre.  Åpne startsiden, for eksempel indeks.php, og legg til et brytpunkt.  Trykk på F5 for å starte feilsøking.  Gå til en nettleser og last inn nettstedet. Bytt tilbake til VSCode, og du burde se at den stoppet ved punktet ditt.

Koden kjører ikke med zsh Shell

Som standard er WSL konfigurert til å fungere med Bash-skallet, og den ser banen til VSCode-kjørbar i PATH.  Jeg byttet til zsh, og VSCode kunne ikke lenger kjøre.  Løsningen var å sette inn et alias .zshrc

$> cd ~
$> kode .zshrc

Legg til følgende alias, som peker på hele banen til den kjørbare mappen for koden, sett av Ubuntu i WSL.  Erstatt ditt brukernavn med ditt faktiske Windows-brukernavn.

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

Du må nå laste zsh-konfigurasjonen på nytt med

$> kilde .zshrc

Koden skal nå lastes fra zsh-skallet.

Det er det!!  Disse trinnene fikk endelig Drupal og VSCode-feilsøking til å fungere riktig for meg.  Det tok meg to dager å finne ut av dette. Jeg er en noob! Forhåpentligvis fungerer dette for deg og sparer deg litt tid.

Bare en påminnelse om miljøet mitt.  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 og PHP Debug av Felix Becker-pakker.

Glad koding!

Mus Microsoft Sculpt Touch Wireless Mouse Review
Microsoft Sculpt Touch Wireless Mouse Review
Jeg har nylig lest om Microsoft Sculpt Touch trådløs mus og bestemte meg for å kjøpe den. Etter å ha brukt den en stund bestemte jeg meg for å dele mi...
Mus AppyMouse Pekeplate og musepeker på skjermen for Windows-nettbrett
AppyMouse Pekeplate og musepeker på skjermen for Windows-nettbrett
Nettbrettbrukere savner ofte musepekeren, spesielt når de bruker vanlige bærbare datamaskiner. Berøringsskjermen Smarttelefoner og nettbrett har mange...
Mus Midterste museknapp fungerer ikke i Windows 10
Midterste museknapp fungerer ikke i Windows 10
De midtre museknapp hjelper deg med å bla gjennom lange websider og skjermer med mye data. Hvis det stopper, vil du ende opp med å bruke tastaturet ti...