【WordPress】VSCodeでデバッグできる環境をDockerで構築する

## はじめに
タイトルのとおりです。
WordPressのプラグイン作成なんかを作りたい時に、Dockerさえインストールされていればサクッと環境構築できるようになります。

Dockerでメールを確認できる環境を作る記事も書いてますので、こちらも参考にしてください。
- [【WordPress】Dockerでメールを確認できる環境を構築する - Qiita](https://qiita.com/tegnike/items/44e9f328f082bb0952ad)

実はこんな方法があるのに、こいつ遠回りしてんな、、と気づかれた方はそっとコメントしていただけますと幸いです。

## 各ファイルの準備
下記のディレクトリ構成でファイルを用意してください。

### ディレクトリ

```
public_html（<- プロジェクトのフォルダ名です。なんでも良いです。）
├── docker
│   ├── Dockerfile
│   ├── docker-entrypoint.sh
│   └── php.ini
├── docker-compose.yml
└── （WordPressプロジェクトはこの階層に入ります。）
```
すでにWordPressを開設していて、自身のファイルを利用したいという方は、`public_html`の配下に`wp-admin`や`wp-content`が来るように配置していただければ大丈夫です。
後ほど紹介する`docker-compose.yml`で、ホストのファイルをコンテナ側にマウントするように設定しているからです。


### Dockerfile

```dockerfile
FROM wordpress:apache

RUN pecl install xdebug \
  && docker-php-ext-enable xdebug

WORKDIR /var/www/html
COPY docker-entrypoint.sh ./docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]
CMD ["apache2-foreground"]
```

使用しているイメージはこちら↓です。
[wordpress/latest/php7.4/apache at 376f01affcaacac50d8416b5f7f4abb34d6b60d2 · docker-library/wordpress](https://github.com/docker-library/wordpress/tree/376f01affcaacac50d8416b5f7f4abb34d6b60d2/latest/php7.4/apache)

中身を見てもらえればわかると思いますが、RUNでxdebugをインストールしている以外はやっていることは変わりません。
ちなみに、下3行はコンテナの中身がホストのディレクトリ（public_htmlの中身）で上書きされないようにするための措置です。
詳細はこちら↓の記事が参考になると思います。
[Dockerのボリュームのマウントのされ方についてちょっとまとめました - Qiita](https://qiita.com/daemokra/items/322270091cf41a853226#%E8%A3%9C%E8%B6%B3cmd%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)

### docker-entrypoint.sh
長くなってしまうので、コードは記載しません。
[先程の記事](https://github.com/docker-library/wordpress/tree/376f01affcaacac50d8416b5f7f4abb34d6b60d2/latest/php7.4/apache)からコピーしてきただけなので、同じように内容をコピペしてください。

### php.ini
```
[xdebug]
xdebug.idekey="VSCODE"
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_connect_back=0
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9000
```
xdebug3に合わせた記述にしています。
なお、最後の`xdebug.client_port=9000`に関しては、ご自身の環境に合わせて変更しても良いですが、後ほどの設定で必要になるので覚えておくようにしてください。

### docker-compose.yml
```docker
version: '3'

services:
  db:
    image: mysql:5.7
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    volumes:
      - db_data:/var/lib/mysql
  wordpress:
    depends_on:
      - db
    build: ./docker
    ports:
      - "8000:80"
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - .:/var/www/html
      - ./docker/php.ini:/usr/local/etc/php/php.ini

volumes:
  db_data:
```


## VSCodeの準備

VSCodeのWorkSpaceに`public_html`フォルダ、そしてそれ以下のファイルが格納されている状態にしてください。

### PHP Debug
VSCodeではphpデバッグ用の拡張機能`PHP Debug`をインストールしてください。
有効化したら、左のバーから虫のアイコンを選択し、上の方に表示された歯車マークをクリックしてください。
![スクリーンショット 2022-02-09 0.04.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473251/acfc24d4-5a17-74e8-ed43-a39efd591ac5.png)
選択肢がいくつか表示されるのでPHPを選択します。
public_htmlフォルダ直下に`.vscode/launch.json`というファイルが作成されるかと思いますのでこれを編集します。

### launch.json
```json-doc
{
  "version": "0.2.0",
  "configurations": [
    {
        "name": "XDebug on docker",
        "type": "php",
        "request": "launch",
        "port": 9000,
        "pathMappings": {
            "/var/www/html": "${workspaceFolder}"
        }
    }
  ]
}
```

`port`は`php.ini`で設定した`xdebug.client_port`の値を入れてください。
`pathMappings`は**コンテナ上のプロジェクトパス:ローカルのプロジェクトパス**という書き方になるので、私の指定したディレクトリ構成であれば修正する必要ありません。

## 実行

1. PHP Debugでスタートボタンを押す（上の画像にある緑の三角形のボタンです）
2. public_html階層で`docker-compose up -d --build`

以上の手順だけで`public_html`配下にWordPressのフォルダ群が自動的に作成され、`localhost:8000`でブラウザからWordPress管理画面を見れるはずです。

## デバッグ

デバッグしたいコードで行数の左横をクリックしてください。赤い丸（ブレークポイント）が表示されるはずです。
処理がここを通過する際にこれがあると処理が止まります。
（VSCodeでのデバッグについて、詳しい説明はこの記事では省きます。）
![スクリーンショット 2022-02-09 0.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473251/089ac958-8089-ae10-6028-71ff26c285c4.png)

## 参考
- [Dockerで構築したPHP環境をxdebugでデバッグ（vscode） - Qiita](https://qiita.com/gigosa/items/90431be7a6a79db78480#docker-composeyml)
- [wordpress/latest/php7.4/apache at 376f01affcaacac50d8416b5f7f4abb34d6b60d2 · docker-library/wordpress](https://github.com/docker-library/wordpress/tree/376f01affcaacac50d8416b5f7f4abb34d6b60d2/latest/php7.4/apache)
- [Dockerのボリュームのマウントのされ方についてちょっとまとめました - Qiita](https://qiita.com/daemokra/items/322270091cf41a853226#%E8%A3%9C%E8%B6%B3cmd%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
- [Docker Hub](https://hub.docker.com/_/wordpress)