はじめに
タイトルのとおりです。
WordPressのプラグイン作成なんかを作りたい時に、Dockerさえインストールされていればサクッと環境構築できるようになります。
Dockerでメールを確認できる環境を作る記事も書いてますので、こちらも参考にしてください。
実はこんな方法があるのに、こいつ遠回りしてんな、、と気づかれた方はそっとコメントしていただけますと幸いです。
各ファイルの準備
下記のディレクトリ構成でファイルを用意してください。
ディレクトリ
public_html（<- プロジェクトのフォルダ名です。なんでも良いです。）
├── docker
│ ├── Dockerfile
│ ├── docker-entrypoint.sh
│ └── php.ini
├── docker-compose.yml
└── （WordPressプロジェクトはこの階層に入ります。）
すでにWordPressを開設していて、自身のファイルを利用したいという方は、public_htmlの配下にwp-adminやwp-contentが来るように配置していただければ大丈夫です。
後ほど紹介するdocker-compose.ymlで、ホストのファイルをコンテナ側にマウントするように設定しているからです。
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
中身を見てもらえればわかると思いますが、RUNでxdebugをインストールしている以外はやっていることは変わりません。
ちなみに、下3行はコンテナの中身がホストのディレクトリ（public_htmlの中身）で上書きされないようにするための措置です。
詳細はこちら↓の記事が参考になると思います。
Dockerのボリュームのマウントのされ方についてちょっとまとめました - Qiita
docker-entrypoint.sh
長くなってしまうので、コードは記載しません。
先程の記事からコピーしてきただけなので、同じように内容をコピペしてください。
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
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をインストールしてください。
有効化したら、左のバーから虫のアイコンを選択し、上の方に表示された歯車マークをクリックしてください。
選択肢がいくつか表示されるのでPHPを選択します。
public_htmlフォルダ直下に.vscode/launch.jsonというファイルが作成されるかと思いますのでこれを編集します。
launch.json
{
"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はコンテナ上のプロジェクトパス:ローカルのプロジェクトパスという書き方になるので、私の指定したディレクトリ構成であれば修正する必要ありません。
実行
- PHP Debugでスタートボタンを押す（上の画像にある緑の三角形のボタンです）
- public_html階層で
docker-compose up -d --build
以上の手順だけでpublic_html配下にWordPressのフォルダ群が自動的に作成され、localhost:8000でブラウザからWordPress管理画面を見れるはずです。
デバッグ
デバッグしたいコードで行数の左横をクリックしてください。赤い丸（ブレークポイント）が表示されるはずです。
処理がここを通過する際にこれがあると処理が止まります。
（VSCodeでのデバッグについて、詳しい説明はこの記事では省きます。）
