Ubuntu 20.04、WSL2、VSCode、および Drupal 8 - 「落とし穴」の修正

Microsoft はついに、Windows 上で Linux アプリケーションを開発するための素晴らしいソリューションを提供しました。 Linux 用の Windows サブシステムである WSL2 は、特に Linux に慣れている場合は、インストールとセットアップが比較的簡単です。そうでない場合でも、基本的なインストールを開始して実行する方法に関する非常に優れた記事がたくさんあります。

Windows 10 で VSCode を使用して Linux PHP アプリケーションを開発することは、可能な限り安定しており、シームレスです。それでも、Ubuntu と WSL2 で LAMP をセットアップすることについて私が見つけた記事のどれも、私が遭遇したいくつかの「影響」を説明していません.

私は Linux の経験が限られており、私の前の人が書いた記事に大きく依存していました。彼らは私をそこに連れて行ってくれましたが、Drupal 8 をエラーなしで動作させ、VSCode でデバッグする際にいくつかの問題に遭遇しました。解決策は、インターネットに投稿された質問へのコメントで見つかりました。これには何時間もの検索が必要でしたが、この 1 つの記事で見つけた解決策を提示することで人々を救いたいと思っています.

私の環境は、Windows 10 20H2、Ubuntu 20.04、PHP 7.3、MariaDB 10.4.17、Drupal 8.9.13、Xdebug 3.02、Windows ターミナル、VSCode with Remote – WSL および PHP Debug Felix Becker パッケージです。 Windows ターミナルの Powershell から WSL を実行しています。

始める前に、時間を節約できるいくつかの推奨事項を次に示します。

apt の代わりに apt-fast をインストールして使用すると、インストールと更新が大幅に高速化されます。私が住んでいる場所では、インターネットは低帯域幅で低速ですが、apt-fast は apt よりもはるかに高速です。

WSL のエクスポートとインポートを使用して、Linux ディストリビューションを "バックアップおよび復元" できます。他のシステムと同様に、常に最新のバックアップを保持することをお勧めします。

Mariadb は正常にインストールされますが、再起動またはステータスを取得できません

Mariadb のインストールはうまくいきました。エラーや警告はありません。ステータスを確認しようとすると、システムに関するエラーが表示されました。

$>systemctl-status mysql

システムは、init-system (PID 1) のような systemd で起動されませんでした。動作しない場合があります。

このエラーの理由は、Microsoft が WSL で systemd をサポートしていないためです。幸いなことに、Arkane Systems は systemd を有効にする System Genius というパッケージを作成しました。そのページから抜粋した以下の手順を試す前に、彼らのウェブページをよく読むことをお勧めします. Ubuntu 以外のディストリビューションの手順は少し異なります。

まず、.Net 5.0 ランタイムをインストールする必要があります

$>sudo apt-quick update

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

$>sudo apt-quick update

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

次に、wsl-transdebian リポジトリを構成する必要があります

$>sudo apt-quick インストール 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

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

$>deb-https://arkane-systems.github.io/wsl-transdebian/suitable/ブルズアイ メイン

$>deb-src https://arkane-systems.github.io/wsl-transdebian/suitable/ブルズアイ メイン

$>適切な迅速な更新

これで、System Genius パッケージをインストールできます。

sudo apt-quick install と systemd-genius

Linux シェルを終了し、パワー シェルを使用して WSL をシャットダウンします

PS C:UsersUsername>wsl - オフにする

PowerShell プロンプトからジニーを使用して WSL を再起動します。

PS C:Usersusername>wsl-genie –p

「systemd を待っています....!!!!!!!!!!!!!!!!」と表示されます。フル充電には180秒かかります。完了するのを待ちます。完了すると、新しいシェル ウィンドウは次のようになります。

systemd を待っています....!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

systemd が実行状態に入るのにタイムアウトしました。

これは、systemd 構成エラーを示している可能性があります。

続行してみてください。

genie がインストールされ、systemd が動作していることを確認します:

systemctl-status mariadb

mariadb のステータス出力を取得する必要があります。 systemctl status mysql も機能することに注意してください。

Arkane Systems では、WSL Genie セッションを wsl --shutdown で終了することをお勧めしています。これにより、Windows で WSL が使用するすべてのメモリが解放されます。

Drupal はインストールされていますが、CSS がロードされていません

Drupal 8 の基本的なインストール後、ページには書式がありませんでした。ページのソースを表示すると、CSS ファイルが読み込まれていないことがわかりました。これを理解するのに 2 日かかりましたが、簡単に言うと、Drupal は Apache2 が /tmp ディレクトリを使用していると想定していますが、そうではありません。デフォルトでは、Apache2 はプライベート tmp ディレクトリを使用するように構成されています。奇妙なことに、sys_get_temp_dir( ) への PHP の呼び出しは /tmp を返しますが、これは Apache2 が使用しているものではありません。 Drupal が最適化された css および js ファイルを作成するとき、最初にそれらを /tmp フォルダーに書き込もうとし、次にそれらを宛先フォルダー (通常は sites/default/files/css および /js) に移動します。しかし、apache2 は /tmp を使用しないため、この操作は失敗し、css または js ファイルはありません。 CSS および Javascript ファイルの集約を無効にすると、これを回避できますが、個々の CSS および js ファイルがすべて読み込まれるため、これは解決策ではありません。

この問題は、/tmp にアクセスできない次の単純な PHP ファイルで確認できます。 tmpfile を作成し、ファイル名を表示します。最初は、tmpfile() を呼び出すと NULL が返されるため、ファイル名は空です。次のコードを test.php に入れ、自分のサイト localhost/mysite/test.php から呼び出しました

エコー "n";

エコー "n";

Echo 「 n";

エコー "n";

エコー "n";

エコー "

ページ ソース Rn を表示すると、この文字列に改行が含まれています。";

エコー "

テスト

「;

$tmpDir =sys_get_temp_dir( );

エコー "

TMP ディレクトリ ='$tmpDir'

「;

$file =tmpfile();

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

エコー "

tmp ファイルのパス =”$path”

「;

エコー "n";

エコー "n";

?>

これにより、「tmpファイルのパス=」になりました

ユーザー One In a Million Apps の Stackoverflow の質問のコメントで、これに対する解決策を見つけました。このソリューションは、Apache2 構成を PrivateTmp=true から PrivateTmp=false に変更します。プライベート tmp ディレクトリを使用するように Apache2 が変更されたのは、セキュリティ上の理由からであり、ほとんどのアプリは別の tmp フォルダーを使用するように構成できることに注意してください。 Drupal でこれを試しましたが、動作しませんでした。 Linux で Drupal を実行するのはこれが初めての試みであり、セキュリティを気にせずにラップトップで「そのまま動作」することを望んでいました.

まず、/lib ディレクトリで PrivateTmp を含むファイルを探します。

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

これにより、一致の長いリストが得られました。 apache2.service ファイルを含むファイルを見つけます。私の場合、/usr/lib/systemd/system/apache2.service で見つかりました。このファイルを /etc にコピーします。ディレクトリ。 /etc/apache2.services を編集して PrivateTmp=true を PrivateTmp=false に変更し、Apache2 サービスを保存して再起動します。

systemctl 再起動 apache2

test.php ページを再度実行すると、/tmp フォルダーへのアクセスを確認するという名前の tmp ファイルが表示されます。

すべての Drupal キャッシュをクリアし、ページをリロードします。正しく表示されるはずです。理由はわかりませんが、Drupal Clear Cache 機能が常に機能するとは限りません。 sites/default/files/css js 内のすべてのファイルを手動で削除してから、PhpMyAdmin でキャッシュ テーブルをクリアすると、常に機能します。

VSCode のデバッグをセットアップする

Xdebug を構成する

まず、Felix Becker によるパッケージ Remote – WSL および PHP Debug を VSCode にインストールします。

次に、Xdebug をインストールしました

sudo apt-fast php7.3-xdebug

これにより、Xdebug のバージョン 3.02 がインストールされました。

ウェブ上の多くの例に従って、構成を試みました。何も機能しませんでした。ほとんどの例は Xdebug 2.x 用であり、これらの構成設定は 3.x では機能しないことが判明しました

最終的に、次の php.ini 設定で動作するようになりました。

システムの /etc/php/7.3/apache2/php.ini と /etc/php/7.3/cli/php.ini の両方に以下を追加する必要がありました

/lib ディレクトリ ファイルに移動して実行すると、xdebug.so の場所を見つけることができます

find -name xdebug.so [xdebug]

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

xdebug.start_with_request =トリガー

xdebug.mode =デバッグ

xdebug.discover_client_host =1

xdebug.log =/tmp/xdebug_remote.log

xdebug.client_port =9003

VSCode を構成する

VSCode でのリモート デバッグでは、.vscode/launch.json のプロジェクト ディレクトリのルートに保存されている launch.json ファイルを使用します。

VSCode UI を使用して launch.json ファイルを作成できますが、手動で作成する方が簡単だと思います。 Web サイトのルートに移動し、.vscode ディレクトリを作成します。 launch.json ファイルを作成し、VSCode に読み込みます。

$>mkdir .vscode

$>CD .vscode

$>launch.json をタッチ

$>コードlaunch.json

次の json をファイルに貼り付けて保存します。

{

// IntelliSense を使用して可能な属性について学習します。

// カーソルを合わせると、既存の属性の説明が表示されます。

// 詳細については、https://go.microsoft.com/fwlink/?Links=830387 をご覧ください。

「実行」：「0.2.0」、

「構成」:[

{

「名前」:「XDebug をリッスン」、

「タイプ」：「php」、

「リクエスト」：「起動」、

「ポート」:9003、

「stopOnEntry」:true,

「ログ」:true,

「パスマッピング」:

{

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

}

}、

{

「名前」：「現在開いているスクリプトを起動」、

「タイプ」：「php」、

「リクエスト」：「起動」、

「プログラム」：「${file}」、

"cwd":"${fileDirname}",

「ポート」:9003

}

]

}

「/var/www/html」がある pathMappings の下に、Web サイトのルートへのフル パスを入力する必要があることに注意してください。

VSCode を閉じます。 WSL Linux コマンド プロンプトで、Web サイトのルートに戻り、プロジェクトを VSCode に読み込みます。まだ .vscode ディレクトリにいると仮定すると、

$>CD ..

$>エンコードします。

これにより、プロジェクトが VSCode に読み込まれ、プロジェクトの完全なディレクトリ構造が左側に表示されます。スタートページを開きます。 B. index.php にブレークポイントを追加します。 F5 キーを押してデバッグを開始します。 Web ブラウザーに移動して、サイトを読み込みます。 VSCode に戻ると、ブレークポイントで停止したことがわかります。

zsh シェルでコードが機能しない

デフォルトでは、WSL は bash シェルで動作するように設定されており、PATH で VSCode 実行可能ファイルへのパスを認識します。 zsh に切り替えたところ、VSCode の実行が停止しました。解決策は、エイリアスを .zshrc に入れることでした。タイプ

$>CD ~

$>コード .zshrc

WSL の Ubuntu から見た実行可能コード フォルダーへのフル パスを指す次のエイリアスを追加します。 YourUserName を実際の Windows ユーザー名に置き換えます。

エイリアス コード="/mnt/c/Users/YourUserName/AppData/Local/Programs/MicrosoftVSCode/bin/code"

で zsh 設定をリロードする必要があります。 $>ソース .zshrc

コードは zsh シェルから読み込まれます。

それでおしまい！！これらの手順により、最終的に Drupal と VSCode のデバッグが適切に機能するようになりました。これをすべて理解するのに2日かかりました。私は初心者です！これがうまくいき、時間を節約できることを願っています。

自分の周りを思い出すだけです。 Windows 10 20H2、Ubuntu 20.04、PHP 7.3、MariaDB 10.4.17、Drupal 8.9.13、Xdebug 3.02、Windows ターミナル、リモート付き VSCode – WSL および PHP デバッグ Felix Becker パッケージ。

コーディングをお楽しみください!