WSL2で劇的に変わるあなたのWebアプリケーション開発環境【その3：実践編】

SHARE

こんにちは、サイオステクノロジー技術部 武井(Twitter:@noriyukitakei)です。今回はWindows Subsystem for Linuxを用いて、Webアプリケーション開発環境を劇的に改善してみたいと思います。3回シリーズでお届けする予定で、第3回目は実践編となります。

  1. その1：概要編
  2. その2：導入編
  3. 今回はこちら → その3：実践編

※ 本記事は技術評論社「Software Design」2019年11月号(詳細はこちら)に私が寄稿した「Microsoft Azureで最新Webアプリ開発」の記事をベースとしております(本ブログ掲載は技術評論社様ご了承済みです)。

※ WSLでなくDockerとVisual Studio Codeを合わせた事例もありますので、是非ご参考下さい！！

目次

WSLを使ったWebアプリケーション開発

Linuxで本番稼働するWebアプリケーションは、可能であれば、開発もLinuxで行うことが理想的です。Windowsではうまく動いたのに、Linuxでは動かない、、、なんてことは、よくあるあるです。しかし、以下の2点が障壁となり、Windowsオンリーな開発環境になってしまうことがあります。

デバッグ環境の構築の難しさ

ネットワーク上の別のコンピューターで動作しているプログラムをデバッグする機能をリモートデバッグといいます。このリモートデバッグを活用して、Linux上でアプリケーションを動作させ、そのデバッグをWindowsで行うことが可能であり、PHPではXdebugというモジュールを使うことでリモートデバッグを実現することができます。

しかし、このリモートデバッグ環境を構築するのは容易ではありません。一般的には下図のような構成になりますが、Virtual Boxなどの仮想化ソフトウェアの導入、LinuxなどのOSのインストール、ApacheなどのWebサーバー、PHPのインストール、リモートとローカルのソース同期などなど、やることがたくさんです。

Picture9

よって、例えば、PHPで手っ取り早くデバッグ環境を構築する場合、Apache・PHP・MySQLがオールインワンでパッケージ化されたXAMPPを使うことがよくあると思います。しかしながら、この環境はWindowsオンリーになってしまいますので、デバッグ済みのアプリケーションをLinuxで稼働させたら、その環境の差異により予期せぬトラブルが起こるかも、、、しれません。

エディタの問題

では、Linux上で直接開発すればいいのですが、これにも障壁があります。それは、「エディタ」です。Linuxで開発するには、viやemacsに代表されるテキストエディタを使うのが定石ですが、これらのエディタの特徴は、「生産効率は高いが、同時に学習コストが高い」ということです。

例えばviの場合、文字を挿入するときには、iを押して入力モードに移行して、ESCでコマンドモードに戻って、、、と言った独特の操作感があります。また、viやemacsは、全てキーボードだけの操作で完結するのでマウスが不要です。マウスとキーボードを行ったり来たりする手間が省ける分、膨大な量のコマンドを覚えなければならず、初学者にはハードルがとても高いのが現状です。

それに、最近の高度なWeb開発は、IDEの豊富で便利な機能無くしては、かなり厳しい現状もあります。

これらの問題を解決するのが、WSL2 + Docker Desktop for WSL2 + Visual Studio Code(Remote Development)の組み合わせです！！

以降は、これらの組み合わせによって、どのように問題が解決されるのかをご説明したいのですが、その前に、新たに登場した2つのプロダクト「Visual Studio Code」「Docker Desktop for WSL2」について、ご説明します。

Visual Studio Code

今、人気絶頂のソースコードエディタです。マイクロソフトによって開発され、Windows、Mac、Linuxなど様々な環境で動作します。また、動作も軽量で、プラグインが豊富であり、デフォルトの状態でも開発に必要なほとんどのものがビルトインされているので、カスタマイズなしで大抵の開発は出来てしまいます。筆者のお気に入りエディタです。

Visual Studio Codeには、Remote Development という拡張機能があり、これをインストールすると、リモートサーバー上のコードを直接編集が可能です。SSHで接続可能なリモートサーバーやコンテナ、WSL上にあるファイルをVisual Studio Codeから直接編集できるのです。つまり、ローカルマシンにソースコードを持つ必要がありません。リモートサーバー上のファイルを、あたかもローカルマシンにあるファイルのように扱うことができます。

また、Remote Developmentを使うと、Visual Studio Codeの拡張機能をリモートサーバーにインストールし、リモートサーバー上で動作させることができます。

例えば、Visual Studio CodeのPHPの拡張機能であるPHP IntelliSenseはPHP7以上が必要になります。この場合、従来の方法では、ローカルマシンにPHP7をインストールする必要がありました。しかし、せっかくソースコードは、リモートサーバーに隔離出来たのに、プラグインを動作させるために、ローカルマシンにPHPインストールするなんて、ちょっとナンセンスだと思いませんか？

そこで、Visual Studio CodeのRemote Developmentを使うと拡張機能をリモートサーバー上にインストールできます。つまり、先程のPHP IntelliSenseはリモートサーバー上で動作するので、リモートサーバー上にPHP7が動作していればよいのです。

このように、Remote Developmentを使うと、ソースコードや拡張機能の実行環境を完全にリモートサーバー側に分離が可能であり、ローカルマシン側にはVisual Studio Code以外、何もインストールする必要がありません。ローカルマシンの環境を一切汚さず、開発環境を構築できるのはVisual Studio Codeの強みです。

Docker Desktop for WSL2

Linuxフル互換のWSL2の登場により、今回、Docker DesktopはWSL2上でDockerを動作することができるよう進化しました。それが、Docker Desktop for WSL2です。ただ、WSL2上でDockerを動かす機能は、本記事執筆の2019年9月10日時点でテクニカルプレビュー版扱いとなっています。

本章では、「Visual Studio Code」「Docker Desktop for WSL2」を用いて、図1と同等の機能を持つPHPのリモートデバッグ環境を構築します。しかし、「WSL2」「Visual Studio Code」「Docker Desktop for WSL2」を用いた場合は、その構築や運用にかかる手間は、従来の方法に比べて遥かに少なくなります。

「WSL2」「Visual Studio Code」「Docker Desktop for WSL2」を用いたPHPのリモートデバッグ環境の構成は以下の通りになります。

Picture10

Docker Desktop for WSL2をインストールすることにより、WSL2上に簡単にDockerエンジンをインストールすることが可能です。その上で、PHPとApacheがインストールされたDockerイメージをPullすることにより、PHPやApacheのインストールが不要になり、これまた手順を大幅に簡略化出来ます。

そして、仮想化ソフトウェアを用いた方法では、ローカルとリモート間でソースコードの同期が必要でしたが、Visual Studio CodeのRemote Development機能を使うことにより、Ubuntuを経由して、コンテナ上のソースコードに直接アタッチします。これにより、ローカルとリモート間でソースコードの同期は不要になります。

つまり、下図にも示すように、WSLを使わない場合(仮想化ソフトウェアを使った場合)は、WSLを使う場合と比べて、初期構築の手間を劇的に省くことが可能であり、その後の運用も楽になることがわかります。

Picture11

では、以降は、WSLを使った場合のPHPリモートデバッグ環境の構築方法をご説明していきます。

開発環境の構築

Visual Studio Codeのインストール

まずVisual Studio Codeをインストールします。以下のURLから環境ごとのインストールファイルをダウンロードし、ウィザードに従うだけで簡単にインストール出来ます。

https://code.visualstudio.com

次にRemote Developmentを可能にする拡張機能もインストールします。左部メニュー最下部にあるアイコン(四角が4つ並んでいるもの)をクリックし、「remote development」と入力し、Remote Developmentの拡張機能をインストールします。

Picture12

 

また、Visual Studio Codeで、PHPのデバッグが可能になる拡張機能をインストールします。左下の緑のボタンをクリックして下さい。

Picture13

 

「Remote-WSL: New Window」を選択します。

Picture14

 

「Remote Development」の拡張機能をインストールしたときと同様の手順で、「php debug」と入力します。一覧の中から「PHP Debug」の最新版をクリックし、「Install on WSL: Ubuntu」をクリックしてインストールします。

Picture15

 

「Reload Required」をクリックして、Visual Studio Codeを再起動します。

Picture16

Docker Desktop for WSL2のインストール

Docker Desktop for WSL2は2019年9月10日現在、以下のURLの「Download」の項目からダウンロード出来ます。

https://docs.docker.com/docker-for-windows/wsl-tech-preview/

ウィザードに従うだけで簡単にインストール出来ます。インストールが完了したら、Docker Desktop for WSL2の機能を有効化します。Windows画面右下のDockerのアイコンを右クリックして、「WSL 2 Tech Preview」をクリックします。

Picture17

 

「Start」をクリックすると、WSL側でDockerデーモンが立ち上がります。

Picture18

Dockerの設定

WSL上に下記のディレクトリ構成で、必要なファイルを作成します。

.
├── Dockerfile
├── docker-compose.yml
├── html
│  └── index.php
└── xdebug

それぞれのファイルの内容は以下のとおりです。

■ Dockerfile

Dockerの設定ファイルです。Dockerのイメージをダウンロードし、Xdebugをインストール・有効化します。

FROM php:7.3.8-apache
RUN pecl install xdebug && docker-php-ext-enable xdebug

■ php

デバッグ対象の開発用のコードです。

<?php
$a = 1;
if ($a === 1) {
    echo “hoge”;
} else {
    echo “fuga”;
}
?>

■ xdebug.ini

Xdebugの設定ファイルです。xdebug.remote_hostは、Visual Studio Codeが動作しているローカルマシンのIPアドレスを指定する必要があります。WSL上でifconfigしたときに表示されるeth0インターフェースのIPアドレスを指定します。

xdebug.remote_autostart = 1
xdebug.remote_enable = 1
xdebug.remote_host = XXX.XXX.XXX.XXX(WSL側のeth0インターフェース)

■ docker-compose.yml

Dockerの設定ファイルです。ポイントは、WSL側のhtmlディレクトリをコンテナ側の/var/www/htmlにマウントしています。Visual Studio Code側からWSLにリモート接続して、WSL上のhtmlディレクトリ上のindex.phpを修正することで、その修正がコンテナ側にも反映されます。

version: '3'
services:
    php:
        build: .
        ports:
            - '80:80'
        volumes:
            - ./html:/var/www/html
            - ./xdebug/xdebug.ini:/usr/local/etc/php/conf.d/xdebug.ini

必要なファイルをWSL側に作成したら、以下のコマンドでコンテナを作成します。

$ docker-compose up -d

デバッグしてみる

これで開発環境は整いました。では、デバッグしてみましょう。

Visual Studio Codeを起動して、左下の緑のボタンをクリックして下さい。

Picture19

 

「Remote-WSL: New Window」を選択します。

Picture20

 

上部メニューの「File」→「Open Folder…」の順にクリックすると、WSL側のディレクトリを参照できるのがわかります。WSL上に作成したhtmlディレクトリを選択します。

Picture21

 

左部メニューの虫のマークをクリックして、「Add Configuration…」→「PHP」の順にクリックします。

Picture22

 

「configurations」のフィールドに、「serverSourceRoot」「localSourceRoot」を追加し、下記のように値を設定します。

"configurations": [
    {
        "name": "Listen for XDebug",
        "type": "php",
        "request": "launch",
        "port": 9000,
        "serverSourceRoot": "/var/www/html",
        "localSourceRoot": "${workspaceRoot}"
    },

「index.php」を開いて、DEBUGボタン(「DEBUG」の横にある再生マーク)をクリックするとデバッグが始まります。任意の場所にブレークポイントを打って、https://localhost/にアクセスすると、ブレークポイントのところで実行が止まることが確認出来ます。

Picture23

まとめ

いかがでしたでしょうか？WSL2 + Visual Studio Code(with Remote Development)、Docker Desktop for WSL2の組み合わせで、開発環境が劇的に改善したことがご理解頂けたかと思います。これらの機能を上手に生かして工数を削減して、素敵なワークライフバランスを実現できるといいですね！！

※ WSLでなくDockerとVisual Studio Codeを合わせた事例もありますので、是非ご参考下さい！！

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

6人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

WSL2で劇的に変わるあなたのWebアプリケーション開発環境【…

次の記事

MySQL 8.0.16 の CHECK 制約について検証して…