Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット

こんにちは、サイオステクノロジー技術部 武井です。今回はVisual Studio CodeのRemote DevelopmentでDockerコンテナに接続して、快適な開発環境をゲットしようというお話です。ちなみに本ブログは、2019年中に私が書いた中で100本目のブログになります(´▽`

ちなみに本ブログは2019年12月18日に開催された第1回目のVS Code MeetupでLTした内容をまとめたものになります。

EMEQ2l3U4AAs1Aq

 

LTした人にだけ以下のノベルティが配られました。Visual Studio Codeのピンバッジです。らっきー(*´▽`*)

IMG_2601.HEIC copy

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と使わない構成を考えてみます。

Screen Shot 2019-12-19 at 22.47.41

まずひとつ目は、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を使う場合です。

Screen Shot 2019-12-19 at 23.03.44

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の拡張機能をインストールします。

Picture12

 

次に必要なファイルを作成しましょう。ファイルとディレクトリ構成は以下のとおりです。

上記で紹介したファイルの説明を致します。

■ Dockerfile

Dockerコンテナを作成するためのDockerfileです。

 

■ docker-compose.yml

特に説明不要な、なんの変哲もないdocker-composeの定義です

 

■ html/index.php

デバッグ用のPHPファイルです。

 

■ xdebug.ini

xdebug用の設定ファイルです。

 

■ .devcontainer/devcontainer.json

Visual Studio CodeがDockerコンテナに接続するための設定ファイルです。

 

では起動してみましょう。

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

Picture13

 

「Remote-Containers: Open Folder in Container…」をクリックします。

Screen Shot 2019-12-19 at 23.58.30

 

先程のファイルを作成したディレクトリを選択します。

Screen Shot 2019-12-20 at 0.03.43

 

Visual Studio Code画面右下にコンテナが起動中である旨を表すメッセージが現れます。

Screen Shot 2019-12-20 at 0.03.55

 

Dockerコンテナが立ち上がっているのがわかります。

 

PHPも正常に動いています。

 

デバッグが正常に機能しているかどうかも試してみます。下図の再生ボタンを押して、ブレークポイントも付与して、先程のPHPを叩いてみます。するときちんとブレークポイント打ったところで止まります(^o^)

Screen Shot 2019-12-20 at 0.12.40

 

PHP IntelliSenseも正常に動いているのがわかります。ちなみにこの環境はDockerホスト上にはPHPもPHP IntelliSenseも入っていません。なのに正常にPHP IntelliSenseが動くということは、Remote DevelopmentによりDockerコンテナ上にインストールされた拡張機能が正常に動作しているということがわかります。

Screen Shot 2019-12-20 at 0.13.41

 

まとめ

いかがでしょうか?すごいですね、Remote Development。もうあなたなしでは生きてゆけない、No Remote Development、No Life!!

>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

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

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

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

コメント投稿

メールアドレスは表示されません。


*