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

Microsoft akhirnya memberikan solusi fantastis untuk mengembangkan aplikasi Linux di Windows. Subsistem Windows untuk Linux, WSL2, relatif mudah dipasang dan diatur, terutama jika Anda sudah terbiasa dengan Linux. Bahkan jika tidak, ada banyak artikel bagus di luar sana tentang cara menginstal dan menjalankan dasar.

Mengembangkan aplikasi PHP Linux dengan VSCode di Windows 10 hampir stabil dan mulus. Namun, tidak ada artikel yang saya temukan tentang menyiapkan LAMP di Ubuntu dan WSL2 yang menjelaskan beberapa "dampak" yang saya temui.

Saya memiliki pengalaman terbatas dengan Linux dan sangat bergantung pada artikel yang ditulis oleh mereka yang datang sebelum saya. Sementara mereka mendapatkan saya sebagian besar perjalanan ke sana, saya mengalami beberapa masalah membuat Drupal 8 bekerja tanpa kesalahan dan debugging di VSCode. Solusinya ditemukan dalam komentar untuk pertanyaan yang diposting di Internet. Ini membutuhkan waktu berjam-jam untuk mencari dan saya berharap dapat menyelamatkan orang dengan menghadirkan solusi yang saya temukan dalam satu artikel 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 paket Remote – WSL dan PHP Debug Felix Becker. Saya menjalankan WSL dari Powershell di 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, bandwidth internetnya rendah dan lambat, dan apt-fast jauh lebih cepat daripada apt.

Anda dapat "mencadangkan dan memulihkan" distribusi Linux Anda dengan ekspor dan impor WSL. Seperti halnya sistem apa pun, disarankan untuk selalu membuat cadangan yang terbaru.

Mariadb menginstal dengan baik tetapi tidak dapat memulai ulang atau mendapatkan status

Instalasi Mariadb berjalan dengan baik. Tidak ada kesalahan atau peringatan. Saat saya mencoba memeriksa statusnya, saya mendapatkan kesalahan tentang sistem.

$>systemctl-status mysql

Sistem tidak di-boot dengan systemd seperti init-system (PID 1). mungkin tidak beroperasi.

Alasan kesalahan ini adalah bahwa Microsoft tidak mendukung systemd di WSL. Untungnya, Arkane Systems membuat paket bernama System Genius untuk mengaktifkan systemd. Saya sarankan membaca halaman web mereka secara menyeluruh sebelum mencoba instruksi di bawah ini, yang diambil dari halaman itu. Instruksi untuk distribusi non-Ubuntu sedikit berbeda.

Pertama, Anda perlu menginstal runtime .Net 5.0

$>sudo apt-quick update

$>sudo sudo apt-quick install -and apt-transport-https

$>sudo apt-quick update

$>sudo apt-quick install -dan dotnet-sdk-5.0

Selanjutnya kita perlu mengkonfigurasi repositori wsl-transdebian

$>sudo apt-quick Instal apt-transport-https

$>wget -Ö /etc/suitable/Trusted.gpg.d/wsl-transdebian.gpg https://arkane-systems.github.io/wsl-transdebian/suitable/wsl-transdebian.gpg

$>chmod a+r /etc/suitable/Trusted.gpg.d/wsl-transdebian.gpg

$>Kucing << EOF > /etc/suitable/Quellen.liste.d/wsl-transdebian.list

$>deb-https://arkane-systems.github.io/wsl-transdebian/suitable/ bullseye main

$>deb-src https://arkane-systems.github.io/wsl-transdebian/suitable/ bullseye main

$>pembaruan cepat-apt

Sekarang kita dapat menginstal paket System Genius.

sudo apt-quick install dan systemd-genius

Keluar dari shell Linux Anda, lalu matikan WSL menggunakan power shell

PS C:UsersUsername>wsl - matikan

Mulai ulang WSL menggunakan jin dari prompt powershell.

PS C:Nama pengguna>wsl-genie –p

Anda akan melihat "Menunggu systemd....!!!!!!!!!!!!!!!!". Dibutuhkan 180 detik untuk mengisi penuh. Tunggu saja sampai selesai. Setelah selesai, jendela shell baru Anda akan terlihat seperti ini:

Di tunggu sistemnya....!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Waktu habis bagi systemd untuk memasuki status berjalan.

Ini mungkin menunjukkan kesalahan konfigurasi systemd.

Coba lanjutkan.

Konfirmasi jin diinstal dan systemd berfungsi:

systemctl-status mariadb

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

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

Drupal terpasang tetapi tidak memuat CSS

Setelah instalasi dasar Drupal 8, halaman tidak memiliki format. Melihat sumber halaman menunjukkan bahwa tidak ada file CSS yang dimuat. Butuh dua hari bagi saya untuk mencari tahu, tetapi cerita pendeknya adalah Drupal mengasumsikan Apache2 menggunakan direktori /tmp, tetapi bukan itu masalahnya. Secara default, Apache2 dikonfigurasi untuk menggunakan direktori tmp pribadi. Anehnya, panggilan PHP ke sys_get_temp_dir() mengembalikan /tmp, tapi bukan itu yang digunakan Apache2. Ketika Drupal membuat file css dan js yang dioptimalkan, pertama-tama ia mencoba untuk menulisnya ke folder /tmp dan kemudian memindahkannya ke folder tujuan, biasanya sites/default/files/css dan /js. Tetapi Apache2 tidak menggunakan /tmp sehingga operasi ini gagal dan tidak ada file css atau js. Menonaktifkan file CSS dan Javascript Agregat akan mengatasi masalah ini, tetapi kemudian semua file CSS dan js individual akan dimuat, jadi ini bukan solusi.

Anda dapat mengkonfirmasi masalah ini dengan file PHP sederhana berikut yang /tmp tidak dapat diakses. Itu membuat tmpfile dan menampilkan nama file. Awalnya, nama file kosong karena memanggil tmpfile() mengembalikan NULL. Saya meletakkan kode berikut di test.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 Rn Anda akan menemukan baris baru dalam string ini.";

Gema “

Uji

“;

$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 pengguna Satu Dalam Sejuta Aplikasi Stackoverflow. Solusi ini mengubah konfigurasi Apache2 dari PrivateTmp=true menjadi PrivateTmp=false. Perhatikan bahwa perubahan Apache2 untuk menggunakan direktori tmp pribadi dibuat untuk alasan keamanan dan sebagian besar aplikasi dapat dikonfigurasi untuk menggunakan folder tmp yang berbeda. Saya mencoba ini dengan Drupal tetapi tidak berhasil. Ini adalah upaya pertama saya menjalankan Drupal di Linux, dan saya ingin semuanya "berfungsi" di laptop saya tanpa mengkhawatirkan keamanan.

Pertama, cari file yang berisi PrivateTmp di direktori /lib:

%>sudo find/mount -type F -exec grep -e “PrivateTmp” ‘{}’ ‘;’ -print

Ini memberi saya daftar panjang pertandingan. Temukan file yang berisi file apache2.service. Dalam kasus saya itu ditemukan di /usr/lib/systemd/system/Apache2.service. 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 halaman test.php lagi dan Anda akan melihat file tmp bernama konfirmasi akses ke folder /tmp.

Hapus semua cache Drupal dan muat ulang halaman. Mereka sekarang harus ditampilkan dengan benar. Saya tidak tahu mengapa, tetapi fitur Drupal Clear Cache tidak selalu berfungsi untuk saya. Menghapus semua file secara manual di sites/default/files/css js dan kemudian membersihkan tabel cache dengan PhpMyAdmin selalu berhasil.

Mengatur debugging VSCode

Konfigurasi Xdebug

Instal terlebih dahulu paket Remote – WSL dan PHP Debug oleh Felix Becker di VSCode.

Saya kemudian menginstal Xdebug

sudo apt-fast php7.3-xdebug

Ini menginstal versi 3.02 dari Xdebug.

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

Saya akhirnya berhasil dengan pengaturan php.ini berikut.

Saya perlu 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.so Anda dengan masuk ke file direktori /lib dan kemudian menjalankan

temukan -nama xdebug.so [xdebug]

zend_extension =./lib/php/20180731/xdebug.so

xdebug.start_with_request =Pemicu

xdebug.mode =debug

xdebug.discover_client_host =1

xdebug.log =/tmp/xdebug_remote.log

xdebug.client_port =9003

Konfigurasi VSCode

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

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

$>mkdir .vscode

$>CD .vscode

$>sentuh peluncuran.json

$>peluncuran kode.json

Rekatkan 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/?Links=830387

“Eksekusi”:“0.2.0”,

“Konfigurasi”:[

“name”:“Dengarkan XDebug”,

“ketik”:“php”,

“permintaan”:“luncurkan”,

“pelabuhan”:9003,

“stopOnEntry”:benar,

“log”:benar,

“pathMappings”:

“/var/www/html”:“${workspaceRoot}”

}

},

“name”:“Luncurkan skrip yang sedang dibuka”,

“ketik”:“php”,

“permintaan”:“luncurkan”,

“program”:“${file}“,

"cwd":"${fileDirname}",

“pelabuhan”:9003

}

]

}

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

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

$>CD ..

$>mengkodekan.

Ini akan memuat proyek ke dalam VSCode dan Anda akan melihat struktur direktori lengkap proyek Anda di sebelah kiri. Buka halaman awal Anda, mis. B. index.php dan tambahkan breakpoint. Tekan F5 untuk memulai debugging. Buka browser web dan muat situsnya. Beralih kembali ke VSCode dan Anda akan melihat bahwa itu berhenti di breakpoint Anda.

Kode tidak berfungsi dengan zsh shell

Secara default, WSL diatur untuk bekerja dengan bash shell dan melihat jalur ke VSCode yang dapat dieksekusi di PATH. Saya beralih ke zsh dan VSCode akan berhenti berjalan. Solusinya adalah meletakkan alias di .zshrc . ketik

$>CD

$>Kode .zshrc

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

alias Code="/mnt/c/Users/YourUserName/AppData/Local/Programs/MicrosoftVSCode/bin/code"

Anda sekarang perlu memuat ulang konfigurasi zsh dengan

$>sumber .zshrc

Kode sekarang harus dimuat dari shell zsh.

Itu dia!! Langkah-langkah ini akhirnya membuat Drupal dan VSCode debugging berfungsi dengan baik untuk saya. Butuh dua hari bagi saya untuk memikirkan semua ini. Saya seorang noob! Semoga ini berhasil untuk Anda dan menghemat waktu Anda.

Sekedar mengingatkan lingkungan sekitar. 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 – Paket Debug WSL dan PHP Felix Becker.

Selamat membuat kode!