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

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

こんにちは、サイオステクノロジー技術部 武井です。今回は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-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の左下の緑のボタンをクリックして下さい。

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コンテナが立ち上がっているのがわかります。

$ 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^)

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!!

アバター画像
About 武井 宜行 267 Articles
Microsoft MVP for Azure🌟「最新の技術を楽しくわかりやすく」をモットーにブログtech-lab.sios.jp)で情報を発信🎤得意分野はAzureによるクラウドネイティブな開発(Javaなど)💻「世界一わかりみの深いクラウドネイティブ on Azure」の動画を配信中📹 https://t.co/OMaJYb3pRN
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



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

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる