Ubuntu 20.04, WSL2, VSCode, dan Drupal 8 - Memperbaiki Gotchas

Microsoft akhirnya memberikan penyelesaian hebat untuk mengembangkan aplikasi Linux pada Windows.  Subsistem Windows untuk Linux, WSL2, cukup mudah untuk dipasang dan dijalankan, terutamanya jika anda sudah biasa dengan Linux.  Walaupun anda tidak, terdapat banyak artikel yang sangat baik mengenai pemasangan dan operasi asas.

Membangunkan aplikasi PHP Linux menggunakan VSCode pada Windows 10 sama stabilnya dan pengalaman yang dapat diperoleh seseorang. Namun, beberapa "gotchas" yang saya hadapi tidak dijelaskan dalam artikel yang saya dapati mengenai penyediaan LAMP di Ubuntu dan WSL2.

Saya mempunyai pengalaman yang terhad dengan Linux dan sangat bergantung pada artikel yang ditulis oleh mereka yang datang sebelum saya.  Walaupun mereka membuat saya hampir sampai di sana, saya menghadapi beberapa masalah semasa menjalankan Drupal 8 tanpa ralat dan penyahpepijatan bekerja di VSCode.  Penyelesaiannya dijumpai di bahagian komen soalan yang dipaparkan di internet. Ini memerlukan banyak jam pencarian, dan saya berharap dapat menyelamatkan orang dengan memberikan penyelesaian yang saya dapati dalam artikel yang satu ini.

Persekitaran saya adalah Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode dengan Remote - WSL dan PHP Debug oleh pakej Felix Becker.  Saya menjalankan WSL dari Powershell dalam Terminal Windows.

Sebelum kita memulakan, berikut adalah beberapa cadangan yang dapat menjimatkan masa anda.

Memasang dan menggunakan apt-fast bukannya apt dapat mempercepat pemasangan dan kemas kini.  Di mana saya tinggal, internet lebar jalur rendah dan perlahan, dan pantas cepat jauh lebih pantas daripada apt.

Anda boleh "membuat sandaran dan memulihkan" pengedaran Linux menggunakan WSL Export and Import. Seperti mana-mana sistem, disarankan untuk selalu menyimpan cadangan semasa.

Mariadb Pemasangan dengan Baik, tetapi Tidak Dapat Memulakan Semula atau Mendapatkan Status

Pemasangan Mariadb berjalan lancar.  Tiada kesilapan atau amaran.  Semasa saya menyemak status, saya mendapat ralat mengenai sistem.

$> status systemctl mysql
Sistem belum di-boot dengan systemd seperti sistem init (PID 1). Tidak dapat beroperasi.

Sebab ralat ini adalah bahawa Microsoft tidak menyokong systemd di WSL.  Nasib baik, Arkane Systems membuat sistem pakej-genie untuk membolehkan systemd .  Saya cadangkan membaca halaman web mereka dengan teliti sebelum mencuba arahan berikut, yang diambil dari halaman tersebut. Terdapat arahan yang sedikit berbeza untuk pengedaran selain Ubuntu.

Pertama, anda perlu Memasang .Bersih 5.0 jangka masa

$> sudo kemas kini pantas
$> sudo sudo apt-fast install -y apt-transport-https
$> sudo kemas kini pantas
$> sudo apt-fast install -y dotnet-sdk-5.0

Seterusnya kita perlu Mengkonfigurasi Repositori wsl-transdebian

$> sudo apt-fast install apt-transport-https
$> wget -O / etc / apt / dipercayai.gpg.d / wsl-transdebian.gpg https: // arkane-sistem.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / dipercayai.gpg.d / wsl-transdebian.gpg
$> kucing << EOF > / etc / apt / sumber.senarai.d / wsl-transdebian.senarai
$> deb https: // arkane-sistem.github.io / wsl-transdebian / apt / bullseye utama
$> deb-src https: // arkane-sistem.github.io / wsl-transdebian / apt / bullseye utama
$> kemas kini pantas

Sekarang kita boleh memasang pakej sistem-jin.

sudo apt-fast install -y systemd-genie

Keluar dari shell Linux anda kemudian matikan WSL dari Power shell

PS C: \ Users \ UsrName> wsl - shutdown

Mulakan semula WSL dengan jin dari arahan Powershell.

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

Anda akan melihat "Menunggu sistemd .. .!!!!!!!!!!!!!!!".  Masa 180 saat untuk dimuat sepenuhnya.  Tunggu sahaja sehingga selesai.  Setelah selesai, tetingkap shell baru anda akan kelihatan seperti ini:

Menunggu sistemd… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Tamat masa menunggu sistemd memasuki keadaan berjalan.
Ini mungkin menunjukkan ralat konfigurasi systemd.
Berusaha untuk meneruskan.

Sahkan jin terpasang dan systemd berfungsi:

status sistemctl mariadb

Anda harus mendapatkan output status untuk mariadb.  Perhatikan bahawa status sistemctl mysql juga berfungsi.

Arkane Systems mengesyorkan mematikan sesi jin WSL anda dengan mematikan wsl.  Ini akan membebaskan semua memori yang digunakan oleh WSL di Windows.

Pemasangan Drupal Tetapi CSS Tidak Dimuat

Setelah menjalankan pemasangan asas untuk Drupal 8, halaman tidak mempunyai format.  Melihat Sumber Halaman menunjukkan bahawa tidak ada file CSS yang dimuat. Saya mengambil masa dua hari untuk mencari tahu ini, tetapi cerpennya adalah Drupal menganggap apache2 menggunakan direktori / tmp, tetapi tidak.  Secara lalai, apache2 dikonfigurasi untuk menggunakan direktori tmp peribadi.  Panggilan cukup aneh, sys_get_temp_dir () dari php return / tmp, namun itu bukan yang digunakan oleh apache2.  Apabila Drupal membuat fail css dan js yang dioptimumkan, pertama kali mencuba menulisnya ke folder / tmp, kemudian memindahkannya ke folder tujuan, biasanya laman web / lalai / fail / css dan / js. Tetapi apache2 tidak menggunakan / tmp, jadi proses ini gagal, dan tidak ada fail css atau js. Menyahtandakan fail CSS agregat dan Javascript akan memotongnya, tetapi kemudian semua fail css dan js dimuat, jadi ini bukan penyelesaian.

Anda boleh mengesahkan masalah ini / tmp tidak dapat diakses dengan fail php sederhana berikut. Ini membuat tmpfile dan memaparkan nama fail.  Pada mulanya, nama fail akan kosong kerana panggilan ke tmpfile () mengembalikan NULL.  Saya menguji kod berikut.php dan memanggilnya dari laman web saya, localhost / mysite / test.php

gema "\ n ";
gema "\ n ";
gema "\ n ";
gema "\ n ";
gema "\ n ";
gema "

Sekiranya anda melihat sumber halaman \ r \ n anda akan menemui garis baru dalam rentetan ini.";
 
gema "

ujian

";
$ tmpDir = sys_get_temp_dir ();
gema "

Direktori TMP = '$ tmpDir'

";
$ fail = tmpfile ();
$ path = stream_get_meta_data ($ file) ['uri'];
gema "

Laluan fail tmp = '$ path'

";
 
gema "\ n ";
gema "\ n ";
?>
 
Ini menghasilkan "Path of tmp file ="

Saya menemui jalan keluarnya dalam komen soalan Stackoverflow oleh pengguna One In a Million Apps.  Penyelesaian ini mengubah konfigurasi apache2 dari PrivateTmp = true ke PrivateTmp = false. Perhatikan bahawa mengubah apache2 untuk menggunakan direktori tmp peribadi dilakukan atas alasan keselamatan, dan kebanyakan aplikasi dapat dikonfigurasi untuk menggunakan folder tmp yang lain.  Saya mencubanya dengan Drupal tetapi tidak berjaya. Ini adalah percubaan pertama saya menjalankan Drupal di Linux, dan saya mahukan perkara "hanya berfungsi" di komputer riba saya dengan sedikit perhatian terhadap keselamatan.

Pertama, cari fail yang mengandungi PrivateTmp menggunakan ini dari direktori / lib:

%> sudo cari / -mount -type f -exec grep -e "PrivateTmp" '' ';' -cetakan

Ini memberi saya senarai pertandingan yang panjang.  Cari yang mengandungi fail apache2.perkhidmatan.  Dalam kes saya, ia terdapat di / usr / lib / systemd / system / apache2.perkhidmatan.  salin fail ini ke / etc. direktori. Edit / etc / apache2.perkhidmatan dan menukar PrivateTmp = true ke PrivateTmp = false, simpan dan mulakan semula perkhidmatan apache2.

systemctl mulakan semula apache2

Jalankan semula ujian.halaman php sekali lagi, dan anda seharusnya memaparkan fail tmp yang dinamakan, mengesahkan akses ke folder / tmp.

Kosongkan semua cache Drupal dan muatkan semula halaman.  Mereka kini harus dipaparkan dengan betul. Saya tidak tahu mengapa, tetapi fungsi Drupal Clear Cache tidak selalu berfungsi untuk saya.  Menghapus semua fail secara manual di laman web / default / files / css js, kemudian menggunakan PhpMyAdmin untuk mengosongkan jadual cache sentiasa berfungsi.

Menyiapkan Penyahpepijatan VSCode

Konfigurasikan Xdebug

Pertama, pasang pakej Remote - WSL, dan PHP Debug by Felix Becker ke VSCode.

Saya kemudian memasang Xdebug

sudo apt-cepat php7.3-xdebug

Versi 3 yang dipasang ini.02 dari Xdebug.

Saya cuba mengkonfigurasinya dengan mengikuti banyak contoh di internet.  Tidak ada yang berjaya.  Ternyata kebanyakan contoh adalah untuk Xdebug 2.x, dan tetapan konfigurasi tersebut tidak lagi berfungsi dengan 3.x

Saya akhirnya berjaya dengan php berikut.tetapan ini.

Saya harus menambahkan perkara berikut ke kedua / etc / php / 7.3 / apache2 / php.ini dan / etc / php / 7.3 / cli / php.ini pada sistem saya.

Anda boleh mencari lokasi xdebug anda.jadi dengan berpindah ke fail direktori / lib kemudian jalankan

cari -nama xdebug.jadi [xdebug]
zend_extension = ./ lib / php / 20180731 / xdebug.begitu
xdebug.start_with_request = pencetus
xdebug.mod = debug
xdebug.Discover_client_host = 1
xdebug.log = / tmp / xdebug_remote.balak
xdebug.pelanggan_port = 9003

Konfigurasikan VSCode

Penyahpepijatan jauh di VSCode menggunakan pelancaran.fail json disimpan di root direktori projek anda di .vscode / pelancaran.json.

Anda boleh membuat pelancaran.fail json melalui UI VSCode, tetapi saya merasa lebih mudah untuk membuatnya secara manual.  Pindah ke akar laman web anda dan buat a .direktori vscode. Buat pelancaran.fail json dan muatkannya di VSCode.

$> mkdir .vskod
$> cd .vskod
pelancaran sentuhan $>.json
pelancaran kod $>.json

Masukkan json berikut ke dalam fail dan simpan.

// Gunakan IntelliSense untuk mengetahui tentang kemungkinan atribut.
// Arahkan kursor untuk melihat keterangan atribut yang ada.
// Untuk maklumat lebih lanjut, lawati: https: // go.microsoft.com / fwlink /?linkid = 830387
"versi": "0.2.0 ",
"konfigurasi": [

"name": "Dengarkan XDebug",
"type": "php",
"request": "pelancaran",
"pelabuhan": 9003,
"stopOnEntry": benar,
"log": benar,
"pathMappings":

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

,

"name": "Lancarkan skrip terbuka saat ini",
"type": "php",
"request": "pelancaran",
"program": "$ fail",
"cwd": "$ fileDirname",
"pelabuhan": 9003

]

Perhatikan di bawah pathMappings, di mana saya mempunyai "/ var / www / html", anda harus meletakkan jalan penuh ke akar laman web anda.

Tutup VSCode. Dalam arahan WSL Linux anda kembali ke akar laman web anda dan muatkan projek tersebut di VSCode.  Dengan andaian anda masih berada di .direktori vscode,

$> cd…
$> kod .

Ini akan memuatkan projek dalam VSCode, dan anda akan melihat pokok direktori penuh projek anda di sebelah kiri.  Buka halaman permulaan anda, seperti indeks.php, dan tambah titik putus.  Tekan F5 untuk memulakan penyahpepijatan.  Pergi ke penyemak imbas web dan muatkan laman web ini. Beralih kembali ke VSCode, dan anda akan melihatnya berhenti di titik putus anda.

Kod Tidak Berjalan Dengan Shell zsh

Secara lalai, WSL disiapkan untuk bekerja dengan shell Bash, dan ia melihat jalan ke VSCode yang dapat dilaksanakan di PATH.  Saya beralih ke zsh, dan VSCode tidak akan berjalan lagi.  Penyelesaiannya adalah memasukkan nama samaran .zshrc

$> cd ~
$> kod .zshrc

Tambahkan alias berikut, yang menunjukkan jalan penuh ke folder yang boleh dieksekusi kod, seperti yang dilihat oleh Ubuntu di WSL.  Ganti YourUserName dengan nama pengguna Windows sebenar anda.

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

Anda kini perlu memuatkan semula konfigurasi zsh dengan

sumber $> .zshrc

Kod kini harus dimuat dari shell zsh.

Itu sahaja!!  Langkah-langkah ini akhirnya membuat penyahpepijatan Drupal dan VSCode berfungsi dengan betul untuk saya.  Saya mengambil masa dua hari untuk mengetahui semua ini. Saya seorang noob! Mudah-mudahan, ini berfungsi untuk anda dan menjimatkan sedikit masa.

Sekadar peringatan persekitaran saya.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode dengan Remote - WSL dan PHP Debug oleh pakej Felix Becker.

Selamat Pengekodan!