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


# 更新

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

https://chigusa-web.com/blog/vs-code-php-remote/

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


# はじめに

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

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

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

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

# 参考

- [Remote Development with VS Code](https://code.visualstudio.com/blogs/2019/05/02/remote-development)
- [Developing inside a Container](https://code.visualstudio.com/docs/remote/containers)

# 環境

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

# VS Codeインストール

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

[Download Visual Studio Code Insiders](https://code.visualstudio.com/insiders/)

私は「.zip」の64bit版をダウンロードしました。
![2019-05-06_19h27_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/ffc83613-5add-0d61-e8f8-d2187064d09b.png)

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

zipファイル解凍後、**「Code - Insiders.exe」**をダブルクリックし起動します。
![2019-05-06_19h31_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/d77355b1-79c8-5ce7-c76f-20e1225ae7d7.png)

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

[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)

VS Code上から拡張機能を検索し、**「Remote Development」**をインストールします。
![2019-05-06_19h34_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/ab139312-26eb-ad93-cd3d-88c63735eeb5.png)

# Dockerの用意

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

参考：[WindowsにDockerをインストールしてPython環境を構築](https://chigusa-web.com/blog/windows%E3%81%ABdocker%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6python%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89/)

# PHPプロジェクトの用意

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

VS Codeの左下の緑のアイコンをクリックします。
![2019-05-08_21h59_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/8e62b0b0-99e8-5659-33fc-4efa05f2f61a.png)

`Remote-Containers: Open Folder in Container...`を選択します。
![2019-05-08_22h03_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/da2c9227-7d3d-8d5c-f546-f6bedbf0e858.png)

その後、Cloneしたフォルダを選択します。
プロジェクトにはDockerの設定も含まれているため、初回起動時にはコンテナが自動で作成されます。
![2019-05-08_22h05_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/2060fca0-c2c5-7257-8bf1-10165d0c47d6.png)

# PHPの実行

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

```php: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ウィンドウで操作ができます。
![2019-05-08_22h12_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/e8215176-7051-d6b5-097b-3e9f0a2decaf.png)

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

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

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

```shell
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`

```shell
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...`を選択します。
![2019-05-08_22h17_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/77c49812-86f8-b559-4115-a80a8e76c072.png)

ポート転送をしますので、`Forward 8000`を選択します。
![2019-05-08_22h18_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/ee49f0e1-6918-444b-ed24-9727ac89dc9f.png)

`Open Browser`をクリックします。
![2019-05-08_22h19_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/1e0b6b03-11fd-dcd8-b595-dbd5d2b5fcb2.png)

ブラウザで`http://localhost:8000/`にアクセスされ、**index.php**が表示されました。
![2019-05-08_22h21_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/5ce7773d-aee5-cf44-2649-e7e96fd1bd91.png)

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のデバッグ

適当なところにブレークポイントを設定します。
![2019-05-08_22h33_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/d834b1fe-f3ad-5dc9-19c3-b190519ba5e2.png)

`F5`キーを押し、デバッグできることを確認します。
![2019-05-08_22h34_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/a17729b3-37d8-b9c1-32ac-0dce8d40a0ce.png)

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

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で作成、拡張機能のインストールが記載されていました。

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

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

```dockerfile: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/*
```

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

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

# 最後に

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

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

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

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

![2019-05-06_20h48_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408237/1e41312c-fb39-2a5f-accb-692d7aba75b4.png)