Docker + WordPressの開発環境でデバッガーを使おう

# WordPressのテーマをデバッグする時、どうしてますか？
WordPressのテーマ開発をしているときに、ちょっとここの変数の中が見たいなんてときにどうしてますか？`echo $hoge`とか`var_dump($hoge)`なんてしちゃいませんか？
私はしちゃってました。。。:sweat:

変数の中を見るだけだったら`echo $hoge`でよかったんですが、WordPress本体のソースをおいかけようとした時に、これはデバッガーがないと無理だと挫折し、真面目にデバッガーが使えるように設定してみました。

# 開発環境について
記事にした時点の開発環境です。

- Mac OS 10.13.6
- Visual Studio Code 1.32.1
  - 拡張機能：PHP Debug 1.13.0
- Docker Desktop Version 2.0.0.2
- WordPress 5.0.3
    - Docker Image: wordpress:5.0.3-php7.3 + mysql:5.7.25
      - latest は使わずにバージョンを固定しています。

Windows環境では動作確認していません。
# 環境を構築する
## docker-compose.yml ファイル
docker-compose.ymlを用意します。
WordPressのコンテナ起動は、docker-compose.ymlから行ったほうが楽です。既にDocker環境で開発している場合は、MySQLの設定はよしなに変更してください。

``` docker-compose.yml
version: '3.1'

services:
  db:
    image: mysql:5.7.25
    command: "--explicit_defaults_for_timestamp --innodb-use-native-aio=0"
    volumes:
      - ./mysql:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: HogeFuga_2019
      MYSQL_DATABASE: wordpress
      MYSQL_USER: systemuser
      MYSQL_PASSWORD: wordpass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
  wordpress:
    #image: wordpress:5.0.3-php7.3
    build: 
      context: .
      dockerfile: Dockerfile
    volumes: 
      - ./html:/var/www/html
    depends_on:
      - db
    ports:
      - 80:80
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: systemuser
      WORDPRESS_DB_PASSWORD: wordpass
```

- wordpressのimageを指定しないで、`dockerfile: Dockerfile`として、Dockerファイルを使えるように指定します。
- `/var/www/html/`配下をvolumeでマウントしています。gitで管理する時に`.gitignore`がちょっと面倒なりますが、一度書いてしまえばいいだけなので、こうしてます。

### Dockerfile
``` Dockerfile
FROM wordpress:5.0.3-php7.3

RUN \
	if [ ! -f /usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so ]; then \
		pecl install xdebug; \
	fi; \
	{ \
		echo 'zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so'; \
		echo '[xdebug]'; \
		echo 'xdebug.remote_enable=1'; \
		echo 'xdebug.remote_autostart=1'; \
		echo 'xdebug.remote_host=host.docker.internal'; \
		echo 'xdebug.remote_port=9000'; \
	} > /usr/local/etc/php/conf.d/php-xdebug.ini ;
```

- Dockerコンテナから見たホストの指定は、`xdebug.remote_host=host.docker.internal`としています。これは、[公式ドキュメント](https://docs.docker.com/docker-for-mac/networking/)に記載がありました。
- echoした結果を、`php-xdebug.ini`としていますが、php/conf.d/配下にあれば良いと思うので、好みで変更してください。

ここまで来たら、docker-compose.ymlから起動しましょう。あ、Docker Desktopが既にインストール、起動されていることにしてます。

```
docker-compose -f "docker-compose.yml" up -d --build
```
起動したと思ったら、`docker ps`で確認して、STATUSがUPになっていれば成功です。

```
docker ps
CONTAINER ID        IMAGE                COMMAND                  CREATED             STATUS              PORTS                 NAMES
71ed3c76996c        wp-debug_wordpress   "docker-entrypoint.s…"   29 seconds ago      Up 27 seconds       0.0.0.0:80->80/tcp    wp-debug_wordpress_1
696e11badd0c        mysql:5.7.25         "docker-entrypoint.s…"   30 seconds ago      Up 28 seconds       3306/tcp, 33060/tcp   wp-debug_db_1
```
この時点でこのようなファイル構成になっているはずです。

```
% tree -L 1
.
├── Dockerfile
├── docker-compose.yml
├── html
└── mysql
```
### PHP Debug
インストールされてない場合はインストールしましょう。これです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/77333/833b0413-0a5c-ce37-f073-6618bf39e768.png)
インストールしたなら、アクティビバーのデバッグ（虫みたいなやつ）をクリックし、次に歯車をクリックします。
![スクリーンショット 2019-03-14 19.52.41.png](https://qiita-image-store.s3.amazonaws.com/0/77333/2382daff-52c2-8f0b-4d24-9a237bf09334.png)
環境の選択が表示されるのでPHPを選択します。
![スクリーンショット 2019-03-14 19.54.52.png](https://qiita-image-store.s3.amazonaws.com/0/77333/77bb4b24-01a9-07a1-4b21-34780d5dc622.png)
`launch.json`が表示されるので、`pathMappings`を追加します。それ以外はデフォルト設定です。`ローカルPC上のパス`は各自の環境に応じて変更してください。

```launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html":"${workspaceFolder}/html"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}
```
これで設定完了です！
2018/3/18 修正： *${workspaceFolder}*が使えるとのことなので、*フルパス*から*${workspaceFolder}*に修正しました。

# デバッグしてみる
では動作確認のために、デバッグしてみましょう。歯車マークの横の選択が、`Listen for XDebug`になっていることを確認し、デバッグメニューの`デバッグの開始`を選択します。
<img width="483" alt="スクリーンショット 2019-03-15 12.41.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/77333/19869ae5-55ec-2126-02c4-da8381664fc3.png">

無事に開始されると、VSCodeのウィンドウ下部の色が変わります。
次に、使っているテーマディレクトリの`function.php`を開いて、適当な場所にブレークポイントを設定します。ブレークさせたいコードのライン数の左をクリックしてください。
<img width="382" alt="スクリーンショット 2019-03-15 12.47.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/77333/a96028b5-a66c-5efb-1870-8f6bed3b9820.png">
次にブラウザでWordPressのサイトを表示させましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/77333/fe00ebc6-09da-69e0-ebd5-4c217fc93a66.png)
ブレークポイントの位置で実行が停止し、変数やコールスタックが表示されていると思います。
はい、これで動作確認も完了です。:grin:
もう、`echo $hoge`や`var_dump($hoge)`は必要ありません:wave:

デバッガーの使い方がわからない人はググってください。。。:bow_tone1:

# 最後に
WordPressのテーマ開発は比較的カンタンにできると思います。ただ、そんな時でもツールをきちんと使えるように開発環境は整備しましょうね。

## 参考にさせていただいたページ
- [Dockerで構築したPHP環境をxdebugでデバッグ（vscode）](https://qiita.com/gigosa/items/90431be7a6a79db78480)
- [[PHP] Xdebug のリモートデバッグ、理解していますか？](https://qiita.com/castaneai/items/d5fdf577a348012ed8af)
- [Debugging](https://code.visualstudio.com/docs/editor/debugging)