VSCode Remote ContainersでWordPress開発環境を構築

Table of Content

広告

はじめに

VSCode Remote ContainersでLaravel開発環境を構築」でDocker上のPHPの開発環境が構築することが出来ました。Wordpressでも同じことができるなぁ…ということで、今回はWordopress+VSCode Remote ContainersでWordPressの開発環境を構築してみました。プラグイン開発ではXDebugを組み合わせてデバッグができるようになると生産性が上がると思いますので、WordpressにXDebugを組み込んで見ました。

まずは環境を作ってみる

前提条件

本記事では以下の環境で作成しています。

ソフトウェア バージョン
os Ubuntu 20.04 Desktop
docker 20.10.6
docker-compose 1.25.0
VSCode 1.56.2
Remote Containers v0.177.2

Renmote Containersインストール

「Remote Containers」のインストールについては、多くの方が記事にしているので本記事では触れません。

Remote Containersの環境構築

こんな感じでファイルを作成していきます。

├── .devcontainer
│   └── devcontainer.json
├── docker-compose.yml
└── wordpress
    ├── Dockerfile
    └── xdebug.ini

docker-compose.yml

「docker-compose.yml」はこんな感じで作成します。

version: '3.1'

services:
    wordpress:
        build:
            context: wordpress/.
            dockerfile: Dockerfile
        restart: always
        ports:
            - 80:80
        environment:
            WORDPRESS_DB_HOST: db
            WORDPRESS_DB_USER: wpuser
            WORDPRESS_DB_PASSWORD: wppass
            WORDPRESS_DB_NAME: wpdb
        volumes:
            - wordpress:/var/www/html
    db:
        image: mariadb:10.3
        restart: always
        environment:
            MYSQL_DATABASE: wpdb
            MYSQL_USER: wpuser
            MYSQL_PASSWORD: wppass
            MYSQL_ROOT_PASSWORD: pwd
        volumes:
            - db:/var/lib/mysql
    adminer:
        image: adminer
        restart: always
        ports: 
            - 8080:8080
volumes:
    wordpress:
    db:

Laraelと違って簡素になりました。データベース管理にはphpMyAdminではなくadminerを使用しています。
Wordpress全体をボリュームで永続化しています。wp-contante以下をボリュームにする例が多いのですが、Wordpress自体のバージョンアップはWordpressに任せれば良いか…という考えでWordpress全体をボリューム化しています。

Dockerfile

WordPressのDockerfileです。xdebugを追加しているだけです。

FROM wordpress:latest

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

COPY ./xdebug.ini /usr/local/etc/php/conf.d/20-xdebug.ini

xdebug.ini

xdebug.iniはこの様にしてみました。

xdebug.client_host=localhost
xdebug.client_port=9000
xdebug.idekey=PHPSTORM 
xdebug.mode=develop,debug
xdebug.start_with_request=yes

.devcontainer.json

VSCode Remote Containersのための定義です。extensionsにはWordpressにオススメと言われているプラグインを追加しました。VSCodeでWordpress開発にオススメのプラグインがありましたら教えて下さい。

{
    "name": "wordpress",
    "dockerComposeFile": ["../docker-compose.yml"],
    "service": "wordpress",
    "workspaceFolder": "/var/www/html",
    "settings": {
        "terminal.integrated.shell.linux": null
    },
    "extensions": [
        "mikestead.dotenv",
        "felixfbecker.php-debug",
        "neilbrayfield.php-docblocker",
        "bmewburn.vscode-intelephense-client",
        "zignd.html-css-class-completion",
        "ikappas.phpcs",
        "stylelint.vscode-stylelint"
    ]
}

Remote Containersを使う

Remote Containersの使い方はここをを参考にして下さい。Wordpress開発環境でXDebugを使ってみたいと思います。

デバッガを起動して「create a launch.json file.」をクリックします。

create a launch.json file

コマンドパレットが開くので「PHP」をクリックします。

Select environment

「launch.json」はそのまま使用できます。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

後はブレークポイントを設定すればデバッグが可能です。

最後に

WordPressのプラグイン開発が必要になったのでLaravelで構築したVSCode Remote Containersで開発環境を構築してみました。XDebugでデバッグもできるのでWordpressの開発も捗りますね。