こんにちは、サイオステクノロジー技術部 武井です。今回はVisual Studio CodeのRemote DevelopmentでDockerコンテナに接続して、快適な開発環境をゲットしようというお話です。ちなみに本ブログは、2019年中に私が書いた中で100本目のブログになります（´▽｀）
ちなみに本ブログは2019年12月18日に開催された第1回目のVS Code MeetupでLTした内容をまとめたものになります。
LTした人にだけ以下のノベルティが配られました。Visual Studio Codeのピンバッジです。らっきー（*´▽｀*）
Visual Studio Codeとは？
ご存じの方も多いかと思いますが、今、人気絶頂のソースコードエディタです。マイクロソフトによって開発され、Windows、Mac、Linuxなど様々な環境で動作します。また、動作も軽量で、プラグインが豊富であり、デフォルトの状態でも開発に必要なほとんどのものがビルトインされているので、カスタマイズなしで大抵の開発は出来てしまいます。私のお気に入りエディタです。
Remote Developmentとは？
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コンテナに接続してみる
先程もご説明したように、Remote DevelopmentはDockerコンテナに接続することも可能です。これで劇的に開発環境が改善んされます。
Remote Developmentを使わない場合
では、まずDockerを使ったPHPとXDebugを使ったデバッグ可能なWeb開発で、Remote Developmentと使わない構成を考えてみます。
まずひとつ目は、Dockerコンテナ上で稼働するソースコードとローカルで動作するソースコードの同期を取らなければいけません。これはXdebugがDockerホストで稼働しているからです。自動化するならrsyncとかでもいいですし、手動でもいいかもしれません。でもこれはかなり面倒です。万が一同期に失敗したり、同期し忘れていたりすると、デバッグがうまくいかなくなります。
そして、PHPはDockerコンテナ上、XdebugはDockerホスト上とそれぞれが別の場所で稼働しているところも話をややこしくしています。まぁ、Dockerコンテナ上からhost.docker.internalと指定すれば、DockerホストからDockerコンテナへ通信では着るのですが、、、たまたま、Dockerはこういう通信に対応していますが、他のコンテナエンジンではだめかもしれませんし、構成はシンプルであることに越したことはありません。
また、この環境では、Visual Studio Codeの拡張機能は、Visual Studio Codeが動作するDockerホスト上で動作します。例えば、PHP IntelliSenseの拡張機能が動作するためには、PHPが必要になりますので、DockerホストとDockerコンテナの両方にPHPをインストールする必要があり、ちょっとイケてないです。
Remote Developmentを使う場合
次にRemote Developmentを使う場合です。
Remote Developmentを使うと、Dockerコンテナ上のファイルを直接編集が可能です。しかも拡張機能もDockerコンテナ側で動作することが可能になるのです。
ということは、Remote Developmentを使わないときみたいに、DockerホストとDockerコンテナの間でソースコードを同期する必要がなくなります。
PHPからXdebugへの接続もlocalhostでラクチンです。
やってみよう！！
では、先程ご紹介したDockerコンテナを使ったPHPのデバッグ環境を作ってVisual Studio Codeでデバッグしてみましょう。
まずはRemote Developmenをインストールします。Remote Development自体もVisual Studio Codeの拡張機能です。
左部メニュー最下部にあるアイコン(四角が4つ並んでいるもの)をクリックし、「remote development」と入力し、Remote Developmentの拡張機能をインストールします。
次に必要なファイルを作成しましょう。ファイルとディレクトリ構成は以下のとおりです。
├── Dockerfile
├── docker-compose.yml
├── html
│ └── index.php
└── xdebug
└── xdebug.ini
上記で紹介したファイルの説明を致します。
■ Dockerfile
Dockerコンテナを作成するためのDockerfileです。
# Apache上でPHPが動くDockerイメージを取得します。 FROM php:7.3.8-apache # xdebugの設定をコンテナにコピーします。このディレクトリに # コピーするとPHPの設定として有効になります。xdebug.iniについては後述します。 ADD xdebug/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini # デバッグ対象のPHPをコンテナにコピーします。 ADD html/index.php /var/www/html # xdebugのインストールをします。 RUN pecl install xdebug && docker-php-ext-enable xdebug
■ docker-compose.yml
特に説明不要な、なんの変哲もないdocker-composeの定義です
version: '3' services: php: build: . ports: - '8080:80’
■ html/index.php
デバッグ用のPHPファイルです。
<?php
$a = 1;
if ($a === 1) {
echo "hoge";
} else {
echo "fuga";
}
?>
■ xdebug.ini
xdebug用の設定ファイルです。
# リモートデバッグ接続先です。今回はサーバー側にXdebugが動くので、 # 127.0.0.1を指定します。 xdebug.remote_host = 127.0.0.1 # リモートデバッグを自動で開始します。 xdebug.remote_autostart = 1 # リモートデバッグを有効にします。 xdebug.remote_enable = 1 # リモートデバッグの接続ポートです。 xdebug.remote_port = 9000
■ .devcontainer/devcontainer.json
Visual Studio CodeがDockerコンテナに接続するための設定ファイルです。
{
# 任意の名前でOKです。
"name": "Existing Docker Compose (Extend)",
# Remoteでログインしたいコンテナを作成するためのdocker-composeファイルを指定してください。
"dockerComposeFile": [
"../docker-compose.yml",
],
# 先程指定したdocker-composeファイル内に定義しているサービスで
# 起動したいものを指定してください。
"service": "php",
# コンテナに入ったときに最初にここで指定したものがカレントディレクトリになります。。
"workspaceFolder": "/var/www/html",
# コンテナが生成されたときに、コンテナ側にインストールする拡張機能です。
# これを指定しないと、コンテナが再生成すると拡張機能が消えます。
# 今回はXdebugとPHP IntelliSenseをインストールします。
"extensions": [
"felixfbecker.php-debug",
"felixfbecker.php-intellisense"
]
}
では起動してみましょう。
Visual Studio Codeの左下の緑のボタンをクリックして下さい。
「Remote-Containers: Open Folder in Container…」をクリックします。
先程のファイルを作成したディレクトリを選択します。
Visual Studio Code画面右下にコンテナが起動中である旨を表すメッセージが現れます。
Dockerコンテナが立ち上がっているのがわかります。
$ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 02288c1cd457 vscode_php "docker-php-entrypoi…" 24 seconds ago Up 22 seconds 0.0.0.0:8080->80/tcp vscode_php_1
PHPも正常に動いています。
$ curl https://localhost:8080/ hoge
デバッグが正常に機能しているかどうかも試してみます。下図の再生ボタンを押して、ブレークポイントも付与して、先程のPHPを叩いてみます。するときちんとブレークポイント打ったところで止まります(^o^)
PHP IntelliSenseも正常に動いているのがわかります。ちなみにこの環境はDockerホスト上にはPHPもPHP IntelliSenseも入っていません。なのに正常にPHP IntelliSenseが動くということは、Remote DevelopmentによりDockerコンテナ上にインストールされた拡張機能が正常に動作しているということがわかります。
まとめ
いかがでしょうか？すごいですね、Remote Development。もうあなたなしでは生きてゆけない、No Remote Development、No Life！！
