Ubuntu

Ubuntu 20.04, WSL2, VSCode ja Drupal 8 - Gotchojen korjaaminen

Ubuntu 20.04, WSL2, VSCode ja Drupal 8 - Gotchojen korjaaminen

Microsoft on vihdoin toimittanut upean ratkaisun Linux-sovellusten kehittämiseen Windowsissa.  Windows-alijärjestelmä Linuxille, WSL2, on melko helppo asentaa ja saada käyttöön, varsinkin jos olet jo perehtynyt Linuxiin.  Vaikka et olisikaan, on olemassa monia erittäin hyviä artikkeleita perusasennuksen käyttöönotosta.

Linux PHP -sovellusten kehittäminen VSCoden avulla Windows 10: ssä on suunnilleen yhtä vakaa ja saumaton kokemus, jonka voi saada. Silti useita "gotchoja", joihin törmäsin, ei kuvattu missään artikkelissa, jonka löysin LAMPin asettamisesta Ubuntulle ja WSL2: lle.

Minulla oli rajallinen kokemus Linuxista ja riippuin suuresti artikkeleista, jotka kirjoittivat edeltäjäni.  Vaikka he saivat minut suurimman osan matkasta sinne, minulla oli useita ongelmia saada Drupal 8 toimimaan ilman virheitä ja virheenkorjaus toimi VSCode.  Ratkaisut löytyivät Internetiin lähetettyjen kysymysten kommenttiosista. Tämä kesti useita tunteja etsintää, ja toivon pelastavan ihmisiä esittelemällä ratkaisut, jotka löysin tästä artikkelista.

Ympäristöni on 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 - WSL ja PHP Debug by Felix Becker -paketit.  Käytän WSL: ää Powershellistä Windows Terminalissa.

Ennen kuin aloitamme, tässä on muutama suositus, joka voi säästää aikaa.

Apt-fastin asentaminen ja käyttäminen apt: n sijasta voi todella nopeuttaa asennuksia ja päivityksiä.  Asuinpaikkassani Internet on matala kaistanleveys ja hidas, ja apt-fast on paljon nopeampi kuin apt.

Voit varmuuskopioida ja palauttaa Linux-jakelusi WSL Export and Import -toiminnon avulla. Kuten minkä tahansa järjestelmän kohdalla, on suositeltavaa aina pitää nykyinen varmuuskopio.

Mariadb asentaa hienosti, mutta ei voi käynnistää uudelleen tai saada tilaa

Mariadb-asennus sujui hyvin.  Ei virheitä tai varoituksia.  Kun yritin tarkistaa tilan, sain virheen järjestelmän suhteen.

$> systemctl status mysql
Järjestelmää ei ole käynnistetty, kun systemd on init-järjestelmä (PID 1). Ei voi toimia.

Syynä tähän virheeseen on, että Microsoft ei tue systemd WSL: ssä.  Onneksi Arkane Systems loi paketti system-genie, jotta systemd .  Ehdotan, että luet heidän verkkosivunsa perusteellisesti, ennen kuin kokeilet seuraavia tältä sivulta otettuja ohjeita. Muille jakeluille kuin Ubuntuille on hieman erilaiset ohjeet.

Ensin sinun on asennettava .Verkko 5.0 ajonaikaista

$> sudo apt-nopea päivitys
$> sudo sudo apt-fast install -y apt-transport-https
$> sudo apt-nopea päivitys
$> sudo apt-fast install -y dotnet-sdk-5.0

Seuraavaksi meidän on määritettävä wsl-transdebian-arkisto

$> sudo apt-fast asenna apt-transport-https
$> wget -O / etc / apt / luotettu.gpg.d / wsl-transdebian.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / luotettu.gpg.d / wsl-transdebian.gpg
$> kissa << 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-nopea päivitys

Nyt voimme asentaa system-genie-paketin.

sudo apt-fast install -y systemd-genie

Poistu Linux-kuoresta ja sammuta sitten WSL Power Shellistä

PS C: \ Users \ UsrName> wsl - sammutus

Käynnistä WSL uudelleen genie-ohjelmalla Powershell-kehotteesta.

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

Näet "Odottaa järjestelmää .. .!!!!!!!!!!!!!!!”.  Täyteen lataaminen kestää 180 sekuntia.  Odota vain, kun se päättyy.  Kun se on valmis, uuden kuori-ikkunasi pitäisi näyttää tältä:

Odotetaan järjestelmää… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Aikakatkaisu odottaa, että systemd siirtyy käyttötilaan.
Tämä voi viitata systemd-määritysvirheeseen.
Yritetään jatkaa.

Varmista, että genie on asennettu ja systemd toimii:

systemctl-tila mariadb

Sinun pitäisi saada tilalähtö mariadb: lle.  Huomaa, että systemctl status mysql toimii myös.

Arkane Systems suosittelee WSL-genie-istunnon lopettamista wsl-sammutuksella.  Tämä vapauttaa kaiken WSL: n käyttämän muistin Windowsissa.

Drupal asentaa, mutta mitään CSS: ää ei ladata

Kun Drupal 8: n perusasennus oli suoritettu, sivuilla ei ollut muotoilua.  Sivulähteen tarkastelu osoitti, ettei CSS-tiedostoja ladattu. Kesti kaksi päivää tämän selvittämiseen, mutta novelli on Drupal olettaa, että apache2 käyttää / tmp-hakemistoa, mutta se ei ole.  Oletuksena apache2 on määritetty käyttämään yksityistä tmp-hakemistoa.  Kummallista kyllä, sys_get_temp_dir () php return / tmp: ltä, mutta apache2 ei kuitenkaan käytä sitä.  Kun Drupal luo optimoidut css- ja js-tiedostot, se yrittää ensin kirjoittaa ne / tmp-kansioon, sitten siirtää ne kohdekansioon, tyypillisesti sites / default / files / css ja / js. Mutta apache2 ei käytä / tmp: tä, joten tämä prosessi epäonnistuu eikä mikään css- tai js-tiedostoista. Yhdistettyjen CSS- ja Javascript-tiedostojen valinnan poistaminen ohittaa tämän, mutta sitten kaikki yksittäiset css- ja js-tiedostot ladataan, joten tämä ei ole ratkaisu.

Voit varmistaa, että ongelmaa / tmp ei ole käytettävissä seuraavalla yksinkertaisella php-tiedostolla. Se luo tmp-tiedoston ja näyttää tiedoston nimen.  Aluksi tiedoston nimi on tyhjä, koska kutsu tmpfile () palauttaa NULL.  Testasin seuraavan koodin.php ja kutsui sitä sivustoltani, localhost / mysite / test.php

kaiku "\ n ";
kaiku "\ n ";
kaiku "Toinen PHP-esimerkkini\ n ";
kaiku "\ n ";
kaiku "\ n ";
kaiku "

Jos tarkastelet sivulähdettä \ r \ n, löydät tämän merkkijonon uuden rivin.";
 
kaiku "

testaus

";
$ tmpDir = sys_get_temp_dir ();
kaiku "

TMP-hakemisto = '$ tmpDir'

";
$ tiedosto = tmpfile ();
$ polku = stream_get_meta_data ($ tiedosto) ['uri'];
kaiku "

Tmp-tiedoston polku = '$ polku'

";
 
kaiku "\ n ";
kaiku "\ n ";
?>
 
Tuloksena oli "tmp-tiedoston polku ="

Löysin ratkaisun tähän One In a Million -sovelluksen Stackoverflow-kysymyksen kommenteista.  Tämä ratkaisu muuttaa apache2-kokoonpanon arvosta PrivateTmp = true arvoon PrivateTmp = false. Huomaa, että apache2 vaihdettiin yksityiseen tmp-hakemistoon turvallisuussyistä, ja useimmat sovellukset voidaan määrittää käyttämään eri tmp-kansiota.  Yritin sitä Drupalin kanssa, mutta en saanut sitä toimimaan. Tämä on ensimmäinen yritykseni käyttää Drupalia Linuxissa, ja halusin, että asiat "vain toimivat" kannettavalla tietokoneellani huolimatta turvallisuudesta.

Ensin etsi tiedosto, joka sisältää PrivateTmp: n käyttämällä tätä hakemistosta / lib:

%> sudo etsi / -mount -type f -exec grep -e "PrivateTmp" '' ';' -Tulosta

Tämä antoi minulle pitkän luettelon otteluista.  Etsi tiedostoa apache2 sisältävä tiedosto.palvelu.  Minun tapauksessani se löytyi osoitteesta / usr / lib / systemd / system / apache2.palvelu.  kopioi tämä tiedosto tiedostoon / etc. hakemistoon. Muokkaa / etc / apache2.palvelut ja muuta PrivateTmp = true arvoon PrivateTmp = false, tallenna ja käynnistä apache2-palvelu uudelleen.

systemctl käynnistä apache uudelleen 2

Suorita testi uudelleen.php-sivu uudelleen, ja sinun pitäisi saada näkyviin tmp-tiedosto, joka vahvistaa pääsyn / tmp-kansioon.

Tyhjennä kaikki Drupal-välimuistit ja lataa sivut uudelleen.  Niiden pitäisi nyt näkyä oikein. En tiedä miksi, mutta Drupal Clear Cache -toiminto ei aina toimi minulle.  Kaikkien sivustojen / oletus / tiedostot / css js tiedostojen manuaalinen poistaminen ja sitten välimuistitaulukoiden tyhjentäminen PhpMyAdminin avulla toimii aina.

VSCode-virheenkorjauksen määrittäminen

Määritä Xdebug

Asenna ensin Remote - WSL ja FP Debug by Felix Becker -paketit VSCodeen.

Asensin sitten Xdebugin

sudo apt-fast php7.3-xdebug

Tämä asennettu versio 3.02 Xdebugista.

Yritin määrittää sen seuraamalla monia esimerkkejä Internetissä.  Mikään ei toiminut.  Osoittautui, että suurin osa esimerkeistä koskee Xdebug 2: ta.x, ja nämä kokoonpanoasetukset eivät enää toimi 3: n kanssa.x

Sain sen vihdoin toimimaan seuraavan php: n kanssa.ini-asetukset.

Minun piti lisätä seuraava molempiin / etc / php / 7.3 / apache2 / php.ini ja / etc / php / 7.3 / cli / php.ini järjestelmässäni.

Löydät xdebugisi sijainnin.joten siirtymällä sitten / lib-hakemistotiedostoon

etsi -nimi xdebug.niin [xdebug]
zend_extension = ./ lib / php / 20180731 / xdebug.niin
xdebug.start_with_request = laukaista
xdebug.mode = virheenkorjaus
xdebug.löydä_asiakkaan_isäntä = 1
xdebug.log = / tmp / xdebug_remote.Hirsi
xdebug.asiakas_portti = 9003

Määritä VSCode

VSCoden etävianmääritys käyttää käynnistystä.json - tiedosto, joka on tallennettu projektihakemistosi päähakemistoon .vscode / laukaisu.json.

Voit luoda laukaisun.json-tiedosto VSCode-käyttöliittymän kautta, mutta minusta on helpompaa luoda se manuaalisesti.  Siirry verkkosivustosi juuriin ja luo a .vscode-hakemisto. Luo käynnistys.json-tiedosto ja lataa se VSCode-tiedostoon.

$> mkdir .vscode
$> cd .vscode
$> kosketa käynnistää.json
$> koodin käynnistys.json

Lisää seuraava json tiedostoon ja tallenna se.


// Käytä IntelliSenseä oppiaksesi mahdollisista määritteistä.
// Vie hiiri nähdäksesi olemassa olevien määritteiden kuvaukset.
// Lisätietoja: https: // go.Microsoft.fi / fwlink /?linkid = 830387
"version": "0.2.0 ",
"kokoonpanot": [

"name": "Kuuntele XDebugia",
"type": "php",
"request": "launch",
"portti": 9003,
"stopOnEntry": totta,
"loki": totta,
"pathMappings":

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

,

"name": "Käynnistä tällä hetkellä avoin komentosarja",
"type": "php",
"request": "launch",
"ohjelma": "$ file",
"cwd": "$ fileDirname",
"portti": 9003

]

Huomaa kohdassa pathMappings, jossa minulla on "/ var / www / html", sinun on lisättävä koko polku verkkosivustosi juurelle.

Sulje VSCode. Siirry WSL Linux -kehotteessasi takaisin verkkosivustosi juuriin ja lataa projekti VSCode-tiedostoon.  Olettaen, että olet edelleen .vscode-hakemisto,

$> cd…
$> koodi .

Tämän pitäisi ladata projekti VSCodeen, ja sinun pitäisi nähdä projektisi koko hakemistopuu vasemmalla.  Avaa aloitussivusi, kuten hakemisto.php ja lisää katkaisupiste.  Aloita virheenkorjaus painamalla F5.  Siirry verkkoselaimeen ja lataa sivusto. Vaihda takaisin VSCode-koodiin, ja sinun pitäisi nähdä, että se pysähtyi katkaisupisteessäsi.

Koodi ei toimi zsh Shellin kanssa

Oletuksena WSL on määritetty toimimaan Bash-kuoren kanssa, ja se näkee polun VSCode-tiedostoon PATH: ssa.  Vaihdoin zsh-tiedostoon, eikä VSCode enää toimi.  Korjauksen tarkoituksena oli laittaa alias sisään .zshrc

$> cd ~
$> koodi .zshrc

Lisää seuraava alias, joka osoittaa koodin suoritettavan kansion koko polun, kuten Ubuntu WSL: ssä näkee.  Korvaa YourUserName todellisella Windows-käyttäjänimelläsi.

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

Sinun on nyt ladattava zsh-määritys uudelleen

$> lähde .zshrc

Koodin pitäisi nyt latautua zsh-kuoresta.

Se siitä!!  Nämä vaiheet saivat Drupalin ja VSCode-virheenkorjauksen toimimaan oikein minulle.  Kesti kaksi päivää tämän kaiken selvittämiseen. Olen noob! Toivottavasti tämä toimii sinulle ja säästää aikaa.

Vain muistutus ympäristöstäni.  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 - WSL ja PHP Debug by Felix Becker -paketit.

Hyvää koodausta!

Viisi parasta ergonomista tietokonehiirtä Linux-tuotteille
Aiheuttaako pitkäaikainen tietokoneen käyttö kipua ranteessasi tai sormissasi?? Onko sinulla nivelten jäykkyys ja sinun on jatkuvasti ravistettava kät...
How to Change Mouse and Touchpad Settings Using Xinput in Linux
Most Linux distributions ship with “libinput” library by default to handle input events on a system. It can process input events on both Wayland and X...
Remap your mouse buttons differently for different software with X-Mouse Button Control
Maybe you need a tool that could make your mouse's control change with every application that you use. If this is the case, you can try out an applica...