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

Microsoft akhirnya memberikan solusi fantastis untuk mengembangkan aplikasi Linux di Windows.  Subsistem Windows untuk Linux, WSL2, cukup mudah untuk diinstal dan dijalankan, terutama jika Anda sudah terbiasa dengan Linux.  Bahkan jika tidak, ada banyak artikel yang sangat bagus tentang mendapatkan dan menjalankan instalasi dasar.

Mengembangkan aplikasi Linux PHP menggunakan VSCode di Windows 10 sama stabil dan mulusnya dengan pengalaman yang bisa didapatkan. Namun, beberapa "gotcha" yang saya temui tidak dijelaskan di salah satu artikel yang saya temukan tentang pengaturan LAMP di Ubuntu dan WSL2.

Saya memiliki pengalaman terbatas dengan Linux dan sangat bergantung pada artikel yang ditulis oleh mereka yang datang sebelum saya.  Sementara mereka membuat saya hampir sepanjang jalan, saya mengalami beberapa masalah menjalankan Drupal 8 tanpa kesalahan dan debugging bekerja di VSCode.  Solusinya ditemukan di bagian komentar dari pertanyaan yang diposting di internet. Ini membutuhkan waktu berjam-jam untuk mencari, dan saya berharap dapat menyelamatkan orang dengan menghadirkan solusi yang saya temukan di artikel yang satu ini.

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

Sebelum kita mulai, berikut adalah beberapa rekomendasi yang dapat menghemat waktu Anda.

Memasang dan menggunakan apt-fast alih-alih apt benar-benar dapat mempercepat pemasangan dan pembaruan.  Di tempat saya tinggal, internet dengan bandwidth rendah dan lambat, dan apt-fast jauh lebih cepat daripada apt.

Anda dapat "mencadangkan dan memulihkan" distribusi Linux Anda menggunakan Ekspor dan Impor WSL. Seperti halnya sistem apa pun, disarankan untuk selalu mempertahankan cadangan saat ini.

Mariadb Menginstal Baik, tetapi Tidak Dapat Memulai Ulang atau Mendapatkan Status

Instalasi Mariadb berjalan dengan baik.  Tidak ada kesalahan atau peringatan.  Ketika saya mencoba memeriksa statusnya, saya mendapat kesalahan mengenai sistem.

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

Alasan kesalahan ini adalah bahwa Microsoft tidak mendukung systemd di WSL.  Untungnya, Arkane Systems membuat paket system-genie untuk mengaktifkan systemd .  Saya sarankan membaca halaman web mereka secara menyeluruh sebelum mencoba instruksi berikut, yang diambil dari halaman itu. Ada instruksi yang sedikit berbeda untuk distribusi selain Ubuntu.

Pertama, Anda perlu Menginstal .Bersih 5.0 waktu berjalan

$>sudo pembaruan apt-fast
$>sudo sudo apt-fast install -y apt-transport-https
$>sudo pembaruan apt-fast
$>sudo apt-fast install -y dotnet-sdk-5.0

Selanjutnya kita perlu Mengkonfigurasi Repositori wsl-transdebian

$>sudo apt-fast install apt-transport-https
$>wget -O /etc/apt/trusted.gpg.d/wsl-transdebian.gpg https://arkane-systems.github.io/wsl-transdebian/apt/wsl-transdebian.gpg
$>chmod a+r /etc/apt/trusted.gpg.d/wsl-transdebian.gpg
$>kucing << EOF > /etc/apt/sources.daftar.d/wsl-transdebian.daftar
$>deb https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$>deb-src https://arkane-systems.github.io/wsl-transdebian/apt/ bullseye main
$>pembaruan cepat-apt

Sekarang kita dapat menginstal paket system-genie.

sudo apt-fast install -y systemd-genie

Keluar dari shell Linux Anda lalu matikan WSL dari Power shell

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

Mulai ulang WSL dengan jin dari prompt Powershell.

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

Anda akan melihat “Menunggu systemd… .!!!!!!!!!!!!!!!”.  Dibutuhkan 180 detik untuk memuat sepenuhnya.  Tunggu saja sampai selesai.  Setelah selesai, jendela shell baru Anda akan terlihat seperti ini:

Menunggu sistem… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Waktu habis menunggu systemd memasuki status berjalan.
Ini mungkin menunjukkan kesalahan konfigurasi systemd.
Mencoba untuk melanjutkan.

Konfirmasikan jin diinstal dan systemd berfungsi:

systemctl status mariadb

Anda harus mendapatkan output status untuk mariadb.  Perhatikan bahwa systemctl status mysql juga berfungsi.

Arkane Systems merekomendasikan untuk mematikan sesi jin WSL Anda dengan wsl -shutdown.  Ini akan membebaskan semua memori yang digunakan oleh WSL di Windows.

Instalasi Drupal Tetapi Tidak Ada CSS yang Dimuat

Setelah menjalankan instalasi dasar untuk Drupal 8, halaman tidak memiliki pemformatan.  Melihat Sumber Halaman menunjukkan bahwa tidak ada file CSS yang dimuat. Butuh dua hari bagi saya untuk mencari tahu yang ini, tetapi cerita pendeknya adalah Drupal mengasumsikan Apache2 menggunakan direktori/tmp, tetapi tidak.  Secara default, Apache2 dikonfigurasi untuk menggunakan direktori tmp pribadi.  Anehnya menelepon, sys_get_temp_dir() dari php kembali /tmp, namun bukan itu yang digunakan Apache2.  Ketika Drupal membuat file css dan js yang dioptimalkan, pertama-tama ia mencoba menulisnya ke folder /tmp, lalu memindahkannya ke folder tujuan, biasanya sites/default/files/css dan /js. Tapi apache2 tidak menggunakan /tmp, jadi proses ini gagal, dan tidak ada file css atau js. Menghapus centang Agregat file CSS dan Javascript akan melewati ini, tetapi kemudian semua file css dan js individu dimuat, jadi ini bukan solusi.

Anda dapat mengonfirmasi masalah ini /tmp tidak dapat diakses dengan file php sederhana berikut. Itu membuat tmpfile dan menampilkan nama file.  Awalnya, nama file akan kosong karena panggilan ke tmpfile() mengembalikan NULL.  Saya menempatkan kode berikut dalam pengujian.php dan memanggilnya dari situs saya, localhost/mysite/test.php

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

Jika Anda melihat sumber halaman \r\n Anda akan menemukan baris baru dalam string ini.";
 
gema "

pengujian

" ;
$tmpDir = sys_get_temp_dir();
gema "

Direktori TMP = '$tmpDir'

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

Jalur file tmp = '$path'

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

Saya menemukan solusi untuk ini di komentar pertanyaan Stackoverflow oleh pengguna One In a Million Apps.  Solusi ini mengubah konfigurasi Apache2 dari PrivateTmp=true menjadi PrivateTmp=false. Perhatikan bahwa mengubah Apache2 untuk menggunakan direktori tmp pribadi dilakukan untuk alasan keamanan, dan sebagian besar aplikasi dapat dikonfigurasi untuk menggunakan folder tmp yang berbeda.  Saya mencobanya dengan Drupal tetapi tidak berhasil. Ini adalah upaya pertama saya menjalankan Drupal di Linux, dan saya ingin semuanya "berfungsi" di laptop saya dengan sedikit perhatian pada keamanan.

Pertama, cari file yang berisi PrivateTmp menggunakan ini dari direktori /lib:

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

Ini memberi saya daftar panjang pertandingan.  Cari yang berisi file apache2.layanan.  Dalam kasus saya itu ditemukan di /usr/lib/systemd/system/Apache2.layanan.  salin file ini ke /etc. direktori. Edit /etc/apache2.services dan ubah PrivateTmp=true menjadi PrivateTmp=false, simpan dan mulai ulang layanan Apache2.

systemctl restart Apache2

Jalankan kembali tes.php lagi, dan Anda akan menampilkan file tmp bernama, mengonfirmasi akses ke folder /tmp.

Hapus semua cache Drupal dan muat ulang halaman.  Mereka sekarang harus ditampilkan dengan benar. Saya tidak tahu mengapa, tetapi fungsi Drupal Clear Cache tidak selalu berfungsi untuk saya.  Menghapus semua file secara manual di situs/default/file/css js, lalu menggunakan PhpMyAdmin untuk mengosongkan tabel cache selalu berfungsi.

Menyiapkan Debugging VSCode

Konfigurasi Xdebug

Pertama, instal paket Remote - WSL, dan PHP Debug oleh Felix Becker ke VSCode.

Saya kemudian menginstal Xdebug

sudo apt-fast php7.3-xdebug

Versi yang diinstal ini 3.02 dari Xdebug.

Saya mencoba mengonfigurasinya dengan mengikuti banyak contoh di internet.  Tidak ada yang berhasil.  Ternyata sebagian besar contohnya adalah untuk Xdebug 2.x, dan pengaturan konfigurasi tersebut tidak lagi berfungsi dengan 3.x

Saya akhirnya berhasil dengan php berikut.pengaturan ini.

Saya harus menambahkan yang berikut ini ke /etc/php/7.3/apache2/php.ini dan /etc/php/7.3/cli/php.ini di sistem saya.

Anda dapat menemukan lokasi xdebug Anda.jadi dengan pindah ke file direktori /lib lalu jalankan

temukan -nama xdebug.jadi [xdebug]
zend_extension = ./lib/php/20180731/xdebug.begitu
xdebug.start_with_request = pemicu
xdebug.mode = debug
xdebug.temukan_klien_host = 1
xdebug.log = /tmp/xdebug_remote.catatan
xdebug.klien_port = 9003

Konfigurasikan VSCode

Debug jarak jauh di VSCode menggunakan peluncuran.file json disimpan di root direktori proyek Anda di .vscode/peluncuran.json.

Anda dapat membuat peluncuran.json melalui UI VSCode, tetapi saya merasa lebih mudah untuk membuatnya secara manual.  Pindah ke root situs web Anda dan buat .direktori vscode. Buat peluncuran.json file dan muat di VSCode.

$>mkdir .vscode
$>cd .vscode
$>peluncuran sentuh.json
$>peluncuran kode.json

Masukkan json berikut ke dalam file dan simpan.

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

"name": "Dengarkan XDebug",
"ketik": "php",
"permintaan": "luncurkan",
"pelabuhan": 9003,
"stopOnEntry": benar,
"log": benar,
"pathMapping":

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

,

"name": "Luncurkan skrip yang sedang dibuka",
"ketik": "php",
"permintaan": "luncurkan",
"program": "$file",
"cwd": "$fileDirname",
"pelabuhan": 9003

]

Catatan di bawah pathMappings, di mana saya memiliki "/ var/www/html", Anda harus meletakkan path lengkap ke root situs web Anda.

Tutup VSCode. Di prompt WSL Linux Anda kembali ke root situs web Anda dan muat proyek di VSCode.  Dengan asumsi Anda masih dalam .direktori vscode,

$>cd…
$>kode .

Ini akan memuat proyek di VSCode, dan Anda akan melihat pohon direktori lengkap proyek Anda di sebelah kiri.  Buka halaman awal Anda, seperti indeks.php, dan tambahkan breakpoint.  Tekan F5 untuk memulai debugging.  Buka browser web dan muat situsnya. Beralih kembali ke VSCode, dan Anda akan melihatnya berhenti di breakpoint Anda.

Kode Tidak Berjalan Dengan zsh Shell

Secara default, WSL diatur untuk bekerja dengan shell Bash, dan ia melihat jalur ke VSCode yang dapat dieksekusi di PATH.  Saya beralih ke zsh, dan VSCode tidak lagi berjalan.  Cara mengatasinya adalah dengan memasukkan alias .zsrc

$>cd ~
$>kode .zsrc

Tambahkan alias berikut, yang menunjuk ke path lengkap ke folder yang dapat dieksekusi kode, seperti yang terlihat oleh Ubuntu di WSL.  Ganti YourUserName dengan nama pengguna Windows Anda yang sebenarnya.

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

Anda sekarang perlu memuat ulang konfigurasi zsh dengan

$>sumber .zsrc

Kode sekarang harus dimuat dari zsh Shell.

Itu dia!!  Langkah-langkah ini akhirnya membuat debugging Drupal dan VSCode berfungsi dengan benar untuk saya.  Butuh dua hari bagiku untuk memikirkan ini semua. saya nubie! Semoga ini berhasil untuk Anda dan menghemat waktu Anda.

Sekedar mengingatkan lingkunganku.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Terminal Windows, VSCode dengan Remote - WSL dan PHP Debug oleh paket Felix Becker.

Selamat Coding!