武井(Twitter:@noriyukitakei)です。Linuxを用いて、Webアプリケーション開発環境を劇的に改善してみたいと思います。3回シリーズでお届けする予定で、第3回目は実践編となります。Azureで最新Webアプリ開発」の記事をベースとしております(本ブログ掲載は技術評論社様ご了承済みです)。まとめWSLを使ったWebアプリケーション開発Linuxで本番稼働するWebアプリケーションは、可能であれば、開発もLinuxで行うことが理想的です。Windowsではうまく動いたのに、Linuxでは動かない、、、なんてことは、よくあるあるです。以下の2点が障壁となり、Windowsオンリーな開発環境になってしまうことがあります。デバッグ環境の構築の難しさネットワーク上の別のコンピューターで動作しているプログラムをデバッグする機能をリモートデバッグといいます。このリモートデバッグを活用して、Linux上でアプリケーションを動作させ、そのデバッグをWindowsで行うことが可能であり、PHPではXdebugというモジュールを使うことでリモートデバッグを実現することができます。このリモートデバッグ環境を構築するのは容易ではありません。Boxなどの仮想化ソフトウェアの導入、LinuxなどのOSのインストール、ApacheなどのWebサーバー、PHPのインストール、リモートとローカルのソース同期などなど、やることがたくさんです。よって、例えば、PHPで手っ取り早くデバッグ環境を構築する場合、Apache・PHP・MySQLがオールインワンでパッケージ化されたXAMPPを使うことがよくあると思います。この環境はWindowsオンリーになってしまいますので、デバッグ済みのアプリケーションをLinuxで稼働させたら、その環境の差異により予期せぬトラブルが起こるかも、、、しれません。エディタの問題では、Linux上で直接開発すればいいのですが、これにも障壁があります。それは、「エディタ」です。Linuxで開発するには、viやemacsに代表されるテキストエディタを使うのが定石ですが、これらのエディタの特徴は、「生産効率は高いが、同時に学習コストが高い」ということです。viの場合、文字を挿入するときには、iを押して入力モードに移行して、ESCでコマンドモードに戻って、、、と言った独特の操作感があります。viやemacsは、全てキーボードだけの操作で完結するのでマウスが不要です。マウスとキーボードを行ったり来たりする手間が省ける分、膨大な量のコマンドを覚えなければならず、初学者にはハードルがとても高いのが現状です。それに、最近の高度なWeb開発は、IDEの豊富で便利な機能無くしては、かなり厳しい現状もあります。WSL2」について、ご説明します。Code今、人気絶頂のソースコードエディタです。マイクロソフトによって開発され、Windows、Mac、Linuxなど様々な環境で動作します。動作も軽量で、プラグインが豊富であり、デフォルトの状態でも開発に必要なほとんどのものがビルトインされているので、カスタマイズなしで大抵の開発は出来てしまいます。筆者のお気に入りエディタです。いう拡張機能があり、これをインストールすると、リモートサーバー上のコードを直接編集が可能です。Codeから直接編集できるのです。ローカルマシンにソースコードを持つ必要がありません。リモートサーバー上のファイルを、あたかもローカルマシンにあるファイルのように扱うことができます。Codeの拡張機能をリモートサーバーにインストールし、リモートサーバー上で動作させることができます。IntelliSenseはPHP7以上が必要になります。この場合、従来の方法では、ローカルマシンにPHP7をインストールする必要がありました。Developmentを使うと拡張機能をリモートサーバー上にインストールできます。IntelliSenseはリモートサーバー上で動作するので、リモートサーバー上にPHP7が動作していればよいのです。Code以外、何もインストールする必要がありません。DesktopはWSL2上でDockerを動作することができるよう進化しました。WSL2上でDockerを動かす機能は、本記事執筆の2019年9月10日時点でテクニカルプレビュー版扱いとなっています。WSL2」を用いて、図1と同等の機能を持つPHPのリモートデバッグ環境を構築します。WSL2」を用いた場合は、その構築や運用にかかる手間は、従来の方法に比べて遥かに少なくなります。WSL2」を用いたPHPのリモートデバッグ環境の構成は以下の通りになります。WSL2をインストールすることにより、WSL2上に簡単にDockerエンジンをインストールすることが可能です。その上で、PHPとApacheがインストールされたDockerイメージをPullすることにより、PHPやApacheのインストールが不要になり、これまた手順を大幅に簡略化出来ます。Development機能を使うことにより、Ubuntuを経由して、コンテナ上のソースコードに直接アタッチします。これにより、ローカルとリモート間でソースコードの同期は不要になります。下図にも示すように、WSLを使わない場合(仮想化ソフトウェアを使った場合)は、WSLを使う場合と比べて、初期構築の手間を劇的に省くことが可能であり、その後の運用も楽になることがわかります。以降は、WSLを使った場合のPHPリモートデバッグ環境の構築方法をご説明していきます。Codeをインストールします。以下のURLから環境ごとのインストールファイルをダウンロードし、ウィザードに従うだけで簡単にインストール出来ます。Developmentを可能にする拡張機能もインストールします。Developmentの拡張機能をインストールします。Codeで、PHPのデバッグが可能になる拡張機能をインストールします。左下の緑のボタンをクリックして下さい。Window」を選択します。debug」と入力します。Ubuntu」をクリックしてインストールします。Codeを再起動します。WSL2は2019年9月10日現在、以下のURLの「Download」の項目からダウンロード出来ます。https://docs.docker.com/docker-for-windows/wsl-tech-preview/ウィザードに従うだけで簡単にインストール出来ます。WSL2の機能を有効化します。Preview」をクリックします。「Start」をクリックすると、WSL側でDockerデーモンが立ち上がります。Dockerの設定WSL上に下記のディレクトリ構成で、必要なファイルを作成します。xdebugそれぞれのファイルの内容は以下のとおりです。DockerfileDockerの設定ファイルです。Dockerのイメージをダウンロードし、Xdebugをインストール・有効化します。phpデバッグ対象の開発用のコードです。xdebug.iniXdebugの設定ファイルです。Codeが動作しているローカルマシンのIPアドレスを指定する必要があります。WSL上でifconfigしたときに表示されるeth0インターフェースのIPアドレスを指定します。docker-compose.ymlDockerの設定ファイルです。ポイントは、WSL側のhtmlディレクトリをコンテナ側の/var/www/htmlにマウントしています。Code側からWSLにリモート接続して、WSL上のhtmlディレクトリ上のindex.phpを修正することで、その修正がコンテナ側にも反映されます。./xdebug/xdebug.ini:/usr/local/etc/php/conf.d/xdebug.ini必要なファイルをWSL側に作成したら、以下のコマンドでコンテナを作成します。-dデバッグしてみるこれで開発環境は整いました。デバッグしてみましょう。Codeを起動して、左下の緑のボタンをクリックして下さい。Window」を選択します。Folder...」の順にクリックすると、WSL側のディレクトリを参照できるのがわかります。WSL上に作成したhtmlディレクトリを選択します。Configuration...」→「PHP」の順にクリックします。「configurations」のフィールドに、「serverSourceRoot」「localSourceRoot」を追加し、下記のように値を設定します。"${workspaceRoot}"},「index.php」を開いて、DEBUGボタン(「DEBUG」の横にある再生マーク)をクリックするとデバッグが始まります。任意の場所にブレークポイントを打って、http://localhost/にアクセスすると、ブレークポイントのところで実行が止まることが確認出来ます。WSL2の組み合わせで、開発環境が劇的に改善したことがご理解頂けたかと思います。雑誌等の執筆依頼を受付しております。役に立たなかった2人がこの投稿は役に立ったと言っています。コメントをキャンセルメールアドレスは表示されません。Reserved.本サイトに掲載されている社名、製品名、サービス名等は各社の商標または登録商標です。プライバシーポリシーお問い合わせ。