更新

2021/12/22：最新の環境で試した内容は、Myブログの方に記載しましたので、よろしければご覧ください。

以降の記事は当時の内容です。

はじめに

みなさんプログラミングの際にVS Codeを使っていますでしょうか。
私はよく使っています

とても軽量ですし、必要最低限の機能はもちろん、ソースの管理や、デバッグ、強力な拡張機能など、非常に気に入っております。

まだ正式版の機能ではありませんが、VS Codeがリモート開発に対応したということで試してみました。
今回はサンプルということでDockerでPHPの環境を用意し開発してみます。

これができると、わざわざローカルに実行環境を用意しなくても、リモート先で直接開発ができるためとても便利ですね！

参考

環境

Windows10
Visual Studio Code Insiders(1.34.0-insider)
Docker
- PHP

VS Codeインストール

今のところ正式版ではないので、Insidersビルドをダウンロードします。

Download Visual Studio Code Insiders

私は「.zip」の64bit版をダウンロードしました。

起動と拡張機能のインストール

zipファイル解凍後、「Code - Insiders.exe」をダブルクリックし起動します。

以下の拡張機能をインストールします。

Remote Development

VS Code上から拡張機能を検索し、「Remote Development」をインストールします。

Dockerの用意

今回はWindowsを使用しており、WindowsにDockerをインストールしました。
インストール後、Dockerの共有フォルダの設定も行います。
Myブログで恐縮ですが、参考ください。

参考：WindowsにDockerをインストールしてPython環境を構築

PHPプロジェクトの用意

試しにサンプルプロジェクトをダウンロードしました。
任意の場所にGit Cloneします。
git clone https://github.com/Microsoft/vscode-remote-try-php

VS Codeの左下の緑のアイコンをクリックします。

Remote-Containers: Open Folder in Container...を選択します。

その後、Cloneしたフォルダを選択します。
プロジェクトにはDockerの設定も含まれているため、初回起動時にはコンテナが自動で作成されます。

PHPの実行

index.phpを開いてみましょう。
簡単な文字列のechoとphpinfoが記載されています。

index.php

<?php

/*----------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License. See LICENSE in the project root for license information.
 *---------------------------------------------------------------------------------------*/

function sayHello($name) {
    echo "Hello $name!";
}

?>

<html>
    <head>
        <title>Visual Studio Code Remote :: PHP</title>
    </head>
    <body>
        <?php 

        sayHello('remote world');

        phpinfo(); 

        ?>
    </body>
</html>

コンテナの中に入ってみましょう。
Ctrl+Shifr+@をクリックし、コンテナ内のbashを起動します。
Terminalウィンドウで操作ができます。

試しにunameと打ってみましょう。
Linuxと表示されました。コンテナ内であることが確認できました。

root@eebc4735adc2:/workspaces/vscode-remote-try-php# uname
Linux

ついでにPHPのバージョンも確認します。
PHP7.3.5でした。

root@eebc4735adc2:/workspaces/vscode-remote-try-php# php -v
PHP 7.3.5 (cli) (built: May  8 2019 02:35:42) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.5, Copyright (c) 1998-2018 Zend Technologies
    with Xdebug v2.7.2, Copyright (c) 2002-2019, by Derick Rethans

サーバーを起動します。
php -S localhost:8000

root@eebc4735adc2:/workspaces/vscode-remote-try-php# php -S localhost:8000
PHP 7.3.5 Development Server started at Mon May  6 20:37:30 2019
Listening on http://localhost:8000
Document root is /workspaces/vscode-remote-try-php
Press Ctrl-C to quit.

F1キーを押し、Remote-Containers: Forward Port from Container...を選択します。

ポート転送をしますので、Forward 8000を選択します。

Open Browserをクリックします。

ブラウザでhttp://localhost:8000/にアクセスされ、index.phpが表示されました。

Terminalにもアクセスログが残ります。

[Mon May  6 20:40:40 2019] 127.0.0.1:44454 [200]: /
[Mon May  6 20:40:40 2019] 127.0.0.1:44458 [404]: /favicon.ico - No such file or directory

PHPのデバッグ

適当なところにブレークポイントを設定します。

F5キーを押し、デバッグできることを確認します。

コンテナとのフォルダ共有

Windows上にCloneしたフォルダと、コンテナ内の以下のフォルダが共有されている状態です。
/workspaces/vscode-remote-try-php

root@eebc4735adc2:/workspaces/vscode-remote-try-php# ls -al
total 26
drwxrwxrwx 2 root root 4096 May  8  2019 .
drwxr-xr-x 3 root root 4096 May  6 19:22 ..
drwxrwxrwx 2 root root    0 May  8  2019 .devcontainer
drwxrwxrwx 2 root root    0 May  8  2019 .git
-rwxr-xr-x 1 root root   89 May  8  2019 .gitattributes
-rwxr-xr-x 1 root root 5582 May  8  2019 .gitignore
drwxrwxrwx 2 root root    0 May  8  2019 .vscode
-rwxr-xr-x 1 root root 1183 May  8  2019 LICENSE
-rwxr-xr-x 1 root root 3104 May  8  2019 README.md
-rwxr-xr-x 1 root root  565 May  8  2019 index.php

devcontainer.jsonについて

devcontainer.jsonにはコンテナの設定が記述されていました。
Dockerfileで作成、拡張機能のインストールが記載されていました。

devcontainer.json

{
    "name": "PHP",
    "dockerFile": "Dockerfile",
    "extensions": [
        "felixfbecker.php-debug",
        "felixfbecker.php-intellisense"
    ]
}

DockerfileはPHPとデバッグ環境の構築が記載されていました。

Dockerfile

FROM php:7-cli

# Install xdebug
RUN yes | pecl install xdebug \
    && echo "zend_extension=$(find /usr/local/lib/php/extensions/ -name xdebug.so)" > /usr/local/etc/php/conf.d/xdebug.ini \
    && echo "xdebug.remote_enable=on" >> /usr/local/etc/php/conf.d/xdebug.ini \
    && echo "xdebug.remote_autostart=on" >> /usr/local/etc/php/conf.d/xdebug.ini

# Install git, process tools
RUN apt-get update && apt-get -y install git procps

# Clean up
RUN apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

もちろんコンテナイメージを使用することも可能です。

devcontainer.json例

{
    "name": "My Project",
    "image": "microsoft/dotnet:sdk",
    "appPort": 8090,
    "extensions": [
        "ms-vscode.csharp"
    ]
}

最後に

リモート開発は素晴らしいですね！

余談ですが、ラズパイなどのIoTの開発でも非常に強力だと思います。
なぜなら、センサーの制御など、その環境でしか実行できないケースがあり、なかなか開発（デバッグなど）を行うのが効率がよくありませんでした。

試したところ、まだ32bitには対応していないようですが、今後期待ですね！
対応したらまた記事をまとめたいと思います

Can't connect to raspi-zero: unreachable or not Linux x86_64 (Linux armv6l)

VS CodeでDockerのPHP環境でリモート開発

更新