Docker で動作している php7.1 を PhpStorm からステップ実行する

開発環境をDockerで構築することが多くなってきたと思いますが、それをデバックする事例で新し目のやつが見当たらなかったので共有です。

Ubuntu17.04で確認していますが、Mac + Docker for Mac でもWindows + Docker for Windows でも動作するはず。。です。
もし動かなかったらコメントください！

**その他、主だったツールのバージョン**

```sh
Docker version 17.09.0-ce
PHP 7.1.10
PhpStorm 2017.2.4
```


## Dockerでphp7.1を動かす

深く考えず公式イメージのapache-7.1タグのを使用します。
xdebugがインストールされていないのでそれだけ追加します。


```sh:Dockerfile
FROM  php:7.1-apache
RUN pecl install xdebug
```

php.iniにxdebugを使うための最低限の設定を書きます。


```php.ini
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20160303/xdebug.so
xdebug.idekey = "PHPSTORM"
xdebug.remote_autostart= 1
xdebug.remote_connect_back = 1
xdebug.remote_enable = 1

```
php:7.1-apacheってphp.ini入ってないんですね。。
いやびっくり。
本当に最低限の設定だけしています。実際はたくさん設定を書く必要があるでしょう。。

あとステップ実行の動作を確認するための ``index.php``
ステップ実行してることを確認したいので簡単に変数やループを使ってみます。

```index.php
<?php

$str = "";

for ($i = 0; $i < 10; $i++) {
    $str .= "+";
    echo $str . "<br/>";
}

phpinfo();
```

最低限の設定をしたdocker-compose.yml

```docker-compose.yml
version: "3"
services:
  apache-php71:
    build: .
    ports:
      - "80:80"
    volumes:
      - "./:/var/www/html"
```

カレントディレクトリをDocumentRootにします。

いままで生成したファイルはカレントディレクトリに全部置きます。
``php.ini``がDocumentRoot配下にあるとか恐ろしい構成ですが、これでapacheが読んでくれるので。とりあえずテストのためです。繰り返しますが実際の環境では(ry


フラットなディレクトリ構成

```sh
--+- カレントディレクトリ
  + docker-compose.yml
  + Dockerfile
  + index.php
  + php.ini
```


用意ができたらおもむろに起動

```sh
docker-compose up
```

起動したら``http://localhost``にアクセスしてphpinfoが表示されれば成功です。

![localhost1.png](https://qiita-image-store.s3.amazonaws.com/0/74328/d7f9e749-ea8d-1956-3645-7a1c4bdf7991.png)



xdebugが有効になっていることも確認

![xdebug.png](https://qiita-image-store.s3.amazonaws.com/0/74328/ef2d6e53-24bf-b8c3-eb1f-86f5a3c24730.png)




## PhpStormから接続する

- PhpStormでindex.phpが存在するディレクトリを開く
- File > Setting でSettingダイアログを開く
- Settingダイアログで Languages & Frameworks > PHPを選択
- Debug > DBGp Proxyに値を設定


![xdebug.png](https://qiita-image-store.s3.amazonaws.com/0/74328/02d0fe44-797a-ce7e-74a5-0d97bc89027b.png)


```sh
IDE key:PHPSTORM
Host:localhost
Post:9000
```

- Serversに値を設定 


![setting_servers.png](https://qiita-image-store.s3.amazonaws.com/0/74328/3ebbb577-5ec5-aea7-2bee-fe9b16b57e74.png)

```sh
Name:なんでも
Host:localhost
Post:80
Debuggger:Xdebug
Use path mappings にチェック
カレントディレクトリを /var/www/htmlにマッピング
```

今回はPHPが1ファイルしかないのでマッピングはひとつだけですが、実プロジェクトではディレクトリ毎にマッピングが必要になることでしょう。

以上で準備完了。



## ステップ実行する

- PhpStormのメニュー > Run > Start Listening for PHP Debug Connections を選択

![debug_run.png](https://qiita-image-store.s3.amazonaws.com/0/74328/4713cfe4-2224-a4d4-578e-a5d17e28fa9f.png)




- index.phpにブレークポイントを設定。

![step_exe.png](https://qiita-image-store.s3.amazonaws.com/0/74328/26c8d87f-fc4f-3cbc-2585-55a82f3aa341.png)



- ブラウザで``http://localhost``をリロード
- ブレークポイントの場所で止まった！

![step_exe2.png](https://qiita-image-store.s3.amazonaws.com/0/74328/7a70d98c-21ba-9b09-f6ba-45e60d437a3f.png)



変数の中身が丸見えです。いいですね。
F8でステップアウト、F7でステップイン、F9でレジュームです。


ネットではホストOS側のIPアドレスの扱いが難しい的な例がたくさんあったのですが、特に問題ありませんでした。
PhpStormが頑張っているのかな？
いずれにせよ思ったより簡単に用意できました。


ちなみにこのテストコードは以下に置いています。cloneすればそのまま動作するはず。
https://github.com/furu8ma/docker_php71_xdebug_test

**では良いデバックライフを！**