Docker for WindowsでPHP5.3のステップ実行環境を用意する

PHP 5.3をステップ実行できる開発環境をDockerで構築したので、その手順を紹介する

## 環境

- OS：Windows 10
- 導入しているセキュリティソフト：ESET Internet Security

## 事前準備

### VSCode導入

[公式ページ](https://code.visualstudio.com/download)からVSCodeをインストールする

### Docker導入

[公式ページ](https://docs.docker.com/docker-for-windows/install/)からDockerをインストールする

### Dockerの共有ドライブ設定

コンテナからホストPCのファイルを参照するために、共有ドライブ設定を行う

Dockerが起動した状態で、タスクトレイ中のDockerアイコンを右クリックして[Settings]を選択
表示される画面の[Shared Drives]を選択し、共有したいホストPCのストレージにチェックを入れ、[Apply]ボタンをクリックする
![shared_drives_settings.png](https://qiita-image-store.s3.amazonaws.com/0/125334/711fd49e-a5e8-b1b2-a0f5-85bf5e8cab72.png)

以下のエラーが出た場合は、次の手順のファイアウォールの解除を行う必要がある
![docker_vs_firewall.png](https://qiita-image-store.s3.amazonaws.com/0/125334/57d816ef-2e53-a03d-ad58-70b585919841.png)

### ファイアウォールの解除

ESET Internet Securityを利用しているので、その手順について記す

コントロールパネルを開き、「設定」から「ネットワーク保護」を開く
![eset_network_01.png](https://qiita-image-store.s3.amazonaws.com/0/125334/cf339d8a-acc3-1c6f-d5f3-8a6a809d1f63.png)

「接続されたネットワーク」を開く
![eset_network_02.png](https://qiita-image-store.s3.amazonaws.com/0/125334/f04d4fcd-f1c7-daf8-7e7c-e304882bb0f3.png)

この画面からDockerが生成したネットワークアダプタの設定を変更する
まず、Dockerが生成したネットワークアダプタを特定するため、右下の「ネットワークアダプタ」を選択する
![eset_network_03.png](https://qiita-image-store.s3.amazonaws.com/0/125334/c037dc7a-405b-fcfb-6c6d-24381dffeceb.png)

開いた画面の中で「DockerNAT」と表示されているものが、Dockerが生成したネットワークアダプタである
特定したら画面を閉じる
![eset_network_04.png](https://qiita-image-store.s3.amazonaws.com/0/125334/70146e9c-a411-eab2-0beb-19fbfb24fea0.png)

特定したネットワークアダプタの設定を開き、保護タイプを「自宅または職場ネットワーク」に変更する
これにより、対象のネットワークアダプタが信頼され、コンテナからホストPCへの接続が許可される
![eset_network_05.png](https://qiita-image-store.s3.amazonaws.com/0/125334/1b853b5c-e076-d363-1c5e-16ee5f7431a7.png)

その後、共有ドライブ設定に戻り、再度設定を行う

## ステップ実行環境構築

CentOS 6.6にPHP 5.3が導入されているので、そのイメージを元にApache、PHP、XDebugの環境を追加することで構築する

### 必要ファイルの作成

```
.
├── Dockerfile
├── .env
├── php
│   └── xdebug.ini
├── html
│   └── index.php
└── .vscode
    └── launch.json
```

各ファイルの中身は以下の通り

`Dockerfile`
CentOSにApache、PHP、XDebugを順にインストールしてイメージを作成する

```dockerfile:Dockerfile
FROM centos:6.10

RUN yum update -y && \
    rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm

RUN yum install -y \
    httpd

RUN yum install -y \
    php \
    php-mysql \
    php-devel \
    php-pecl-memcache \
    php-xml \
    gcc && \
    pecl install xdebug-2.2.7

COPY ./php/xdebug.ini /etc/php.d/

EXPOSE 80

ENTRYPOINT ["httpd", "-D", "FOREGROUND"]
```

`.env`
XDebugが接続する先をホストPCに指定する

```shell:.env
XDEBUG_CONFIG=remote_host=host.docker.internal
```

`xdebug.ini`
PHPのプロセスが起動した際、自動でXDebugがホストPCのVSCodeへ接続してステップ実行が開始されるよう、設定を記述する

```ini:xdebug.ini
zend_extension=/usr/lib64/php/modules/xdebug.so
xdebug.remote_enable=on
xdebug.remote_connect_back=off
```

`index.php`
簡単なサンプルページ

```php5:index.php
<?php
phpinfo();
```

### コンテナの起動

まずイメージを作成するために、PowerShellで`Dockerfile`があるディレクトリに移動し、以下コマンドを実行する

```powershell
docker build . -t php-xdebug-test
```

以下コマンドでコンテナを起動する

```powershell
$PROJECT_HOME_DIR=(Convert-Path .)
docker run --rm -it `
    --volume="$PROJECT_HOME_DIR/html:/var/www/html" `
    --env-file="$PROJECT_HOME_DIR/.env" `
    -p 80:80 `
    php-xdebug-test
```

ブラウザで`http://localhost`にアクセスすると、PHP Infoが表示されていることを確認しておく

### ステップ実行

`Dockerfile`があるディレクトリをVSCodeで開く

VSCodeのデバッグボタン、デバッグ構成ボタン、PHPを順にクリックしていく
![vscode_debug.png](https://qiita-image-store.s3.amazonaws.com/0/125334/61980f69-a59a-d620-6891-9dff5ef93346.png)

`launch.json`ファイルが自動で作成されるので、「Listen for XDebug」を以下のように書き換える
`pathMappings`により、コンテナ内のディレクトリとホストPCのディレクトリを対応させている

```json:launch.json
{
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 9000,
    "pathMappings": {
        "/var/www/html": "${workspaceRoot}/html"
    }
}
```

`index.php`ファイルにブレークポイントを貼る
![vscode_make_breakpoint.png](https://qiita-image-store.s3.amazonaws.com/0/125334/8a456873-ae89-67b7-3b0d-727cd1a2c4d1.png)

F5キーを押し接続待機状態にしたうえで、ブラウザから`http://localhost`にアクセスする
そうするとブレークポイントで処理が一時停止し、変数やコールスタックなどの各種情報が見れる
![vscode_breakpoint.png](https://qiita-image-store.s3.amazonaws.com/0/125334/755fddda-5955-b155-dbbd-fd5f679d85f7.png)

## 参考

- Macでの環境構築：https://qiita.com/gcoka/items/c2801a20496851e3ace6
- 共有ドライブ設定：https://qiita.com/chimatter/items/5e2768baeb8983525602
- ファイアウォールの設定：https://qiita.com/spiderx_jp/items/fa8d5ffe298759df9e06
- コンテナからホストへアクセス：http://nobutaka-saito.hatenadiary.jp/entry/2018/04/18/080050