こんにちは、サイオステクノロジー武井です。今回は、マイクロソフトが実施した開発者向け大型テックカンファレンス「Build 2020」で発表されたVisual Studio Codespacesを使ってみました。

Visual Studio Codespacesってなに？

ざっくりいってしまうと、ブラウザで動くVisual Studio Codeです。旧名称は、Visual Studio Onlineです。これが、すごいんです。まんま、Visual Studio Codeです。ちなみにVisual Studio Codeについては、「 Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット」を参照頂けますと幸いです。

で、まんま、Visual Studio Codeなんです。GitHubとの連携もできますし、各種プラグインもインストールできますし、なんとdevcontainer(上記のリンクで紹介したRemote Development + Dockerで作る開発環境)もできるのです！！これはもうやるしかない(^o^)

いくらくらいかかるの？

Visual Studio Codespacesは動作している時間だけ課金される従量課金制です。Virtual Machineのようなイメージです。スペックに応じて、Basic、Standard、Premiumがあります。そして、アクティブとスタンバイという両方の状態があり、使っているときにはアクティブという状態になり課金の対象になります。使っていないときにはスタンバイという状態にしておけば、その間は課金はされません。ただし、ストレージについては、常時費用がかかり、2020年6月10日現在で¥0.9820/時間 かかります。

では、コストをシミュレーションしてみたいと思います。働き方改革にならい、1日7時間使った場合の一ヶ月分のコストを考えてみます。通常の利用では、よほどビルドにスペックが必要でない限り、Basic(2 コア、4 GB RAM、64 GB SSD)で十分かと思いますので、Basicを想定します。リージョンは米国西部とします(2020年6月10日現在で日本リージョンがない(ToT))。

うん、個人利用でもお小遣いの範囲内でなんとかなる金額かと思います。

料金についての詳細は以下のURLをごらんください。

https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-online/

セットアップ

ご利用にはAzureのサブスクリプションとアカウントが必要になりますので、事前にご用意下さい。

まず、以下のURLにアクセスして、「開始する」をクリックします。

https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/

「Sign in」をクリックします。マイクロソフトアカウントによるサインイン画面が出てきますので、サインインします。

「Create Codespace」をクリックします。

Azureサブスクリプションとリージョンを選択して「Create」をクリックします。2020年6月9日現在、日本リージョンはまだないようです。

Visual Studio Codespacesは「Codespace」という単位で管理します。Codespaceはちょうど、PC上で起動したVisual Studio Codeのアプリそのものに相当すると思って頂ければと思います。もちろん複数のCodespaceを作ることも可能です。

上図の入力項目の詳細になります。

先程の画面で「Auth & Create」をクリックすると、GitHubの認証画面が表示されます。UsernameやPasswordなど必要な認証情報を入力します。

しばらくすると、以下のような画面が表示されます。

どうですか？見た目、まんま、Visual Studio Codeですよね。見た目だけじゃないんです。中身もほぼVisual Studio Codeです。すごいヮ(ﾟдﾟ)ォ!

devcontainerでカスタマイズ

Visual Studio Codespacesは、Visual Studio Codeで利用していたdevcontainer(詳細は Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット参照)も使えます。というか、そもそもVisual Studio Codespacesの実行基盤はDockerコンテナが基本のようで、Gitリポジトリにdevcontainerの設定ファイルを置かなければ、デフォルトのコンテナが立ち上がるようです。

つまり、Visual Studio Codeが稼働しているホストOSの役割を、Visual Studio CodespacesではDockerコンテナが担っているというイメージです。

なので、この章のタイトルのように「カスタマイズ」という表現が適しているかと思います。

それでは、devcontainerの設定ファイルをいじって、Visual Studio Codespacesの環境をカスタマイズしてみましょう。

以下のような、PHPのデバッガであるXdebugでデバッグできるような環境を作ってみます。

devcontainerでカスタマイズするためには、事前にGitHubリポジトリに必要なファイルをPushした上で、Codespace作成時にそのリポジトリを指定して上げる必要があります。

ということで、GitHubリポジトリに作成が必要なファイルは以下のとおりです。その内容を説明してまいります。

リポジトリのTop
├── .devcontainer
│   ├── Dockerfile
│   ├── devcontainer.json
│   ├── docker-php.conf
│   └── xdebug.ini
├── .vscode
│   └── launch.json
└── src
    └── test.php

■ .devcontainer/xdebug.ini

PHPのデバッグするモジュールである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/docker-php.conf

PHPを動作させるためのApacheの設定ファイルです。もともとの設定ファイルにFollowSymLinks(シンボリックリンクを足せるような設定)が加わっています。

<FilesMatch \.php$>
        SetHandler application/x-httpsd-php
</FilesMatch>

DirectoryIndex disabled
DirectoryIndex index.php index.html

<Directory /var/www/>
        # ApacheのDocumentRoot(/var/www/html)のシンボリックリンク先に、
        # Gitリポジトリにあるソースを格納するディレクトリ(src)を設定します。
        # そのためシンボリックリンクを有効にしています。
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

■ .devcontainer/Dockerfile

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

# PHPの公式Dockerイメージを指定します。
FROM php:7.3.8-apache

# xdebugの設定をコンテナにコピーします。このディレクトリに
# コピーするとPHPの設定として有効になります。
ADD xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

# 先程記述したdocker-php.confをコンテナにコピーします。
ADD docker-php.conf /etc/apache2/conf-available/docker-php.conf

# xdebugのモジュールをインストールをします。
RUN pecl install xdebug && docker-php-ext-enable xdebug

■ .devcontainer/devcontainer.json

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

{
  // 任意の名前でOKです。
  "name": "Hello",
  
  // 先程作成したDockerfileのファイル名を指定します。
  "dockerFile": "Dockerfile",

  // コンテナへの転送ポートを指定します。
  "forwardPorts": [80],

  // コンテナが作成されたあとに実行されるコマンドです。
  // Gitリポジトリのsrcディレクトリにはソースが格納されるのですが、ソースを更新したら、すぐに
  // Apacheに反映されるよう、ApacheのDocumentRootのシンボリックリンク先をsrcディレクトリにしています。
  "postCreateCommand": "rm -r /var/www/html;ln -s $PWD/src /var/www/html;usermod -aG root www-data;chmod g+x /root",

  // コンテナが生成されたときに、コンテナ側にインストールする拡張機能です。
  // これを指定しないと、コンテナが再生成すると拡張機能が消えます。
  // 今回はXdebugをインストールします。
  "extensions": [
    "felixfbecker.php-debug"
  ]     
}

■ .vscode/launch.json

Visual Studio Codespacesでデバッグを行うときの設定ファイルです。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "pathMappings": {
                "/var/www/html": "${workspaceRoot}/src"
            },
            "port": 9000
        }
    ]
}

■ src/test.php

テスト用のPHPです。

<?php
echo "hoge";
echo "fuga";
?>

では、実際に起動してみましょう。「セットアップ」でご説明した手順に従って、Codespaceを作成します。もちろん、そのときのGitリポジトリの指定先は、上記のファイルを格納しているリポジトリです。

画面左上の波平のおでこみたいなのをクリックして、「Terminal」→「New Terminal」の順にクリックします。

ターミナルで以下のコマンドを実行して、Apacheを起動します。

root@vsonline_b1caf925-1600-4c16-9626-46e9765c4740:~/workspace/vscodespaces# /etc/init.d/apache2 start
[....] Starting Apache httpsd web server: apache2AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1. Set the 'ServerName' directive globally to suppress this message
. ok

ちなみに補足なのですが、PHPのDocker公式イメージをはデフォルトでApacheのプロセスが起動するようになっています。ただし、Visual Studio Codespaces(Visual Studio Codeもそうですが)、Dockerコンテナ起動時のコマンドを「while sleep 1; do :; done」で上書きして、Apacheが起動しません。これを防止するためには、devcontainer.jsonに「”overrideCommand”: false」とすればいいのですが、なぜかこれをやると上手く動作しなかったため、都度Apacheを起動しています。

画面左部の虫みたいなマークをクリックして、「Listen for XDebug」をクリックします。これでXDebugが起動します。

test.phpを開いてブレークポイントを付与します。

画面左部のパソコンみたいなマークをクリックします。すると下図のように、コンテナに転送しているポートの一覧が表示され、その中に「Port: 80」があります。それを右クリックして、「Copy Port URL」をクリックして下さい。これは、Visual Studio Codespacesが動作しているコンテナに接続するためのURLです。Visual Studio CodeをローカルPCで動作しているときのlocalhostに相当するものです。

別ブラウザを起動して、URLの入力欄に、「先程コピーしたURL/test.php」と入力して下さい。これで、デバッグ対象のtest.phpにアクセスできます。Visual Studio Codespacesの画面を見ると、ブレークポイントを付与したところで止まっているのがわかります。

できましたーヮ(ﾟдﾟ)ォ!

まとめ

すごいですよね、Visual Studio Codespaces！！今後は、ブラウザとインターネッツさえあれば、PCのスペックなんて関係なく、いつでもどこでも開発ができるようになるのかもしれません。未来を見た感じがします。とにかく再現度がすごい。この手のサービスありますが、Visual Studio Codespacesは、ローカルで動かしているVisual Studio Codeと遜色がないんですよね。これからもどんどん使っていきましょう。No Visual Codespaces, No Life!!