🐳

PHP 開発環境と実行環境を統合して WordPress 開発を効率化

に公開
Docker
Linux
PHP
WordPress
dev container
tech

はじめに

WordPress 開発に挑戦している皆さん、環境構築で次のようなお悩みはありませんか？

  • ローカル環境と本番環境で PHP のバージョンが合わない
  • デバッグがうまくいかない
  • チーム開発で環境を統一するのが難しい

もし1つでも当てはまるなら、Docker と VS Code Dev Container の出番です。これらのツールを活用することで、本記事で紹介する dvc-wordpress のような、快適で効率的な WordPress 開発環境を構築できます。dvc-wordpress をサンプルとして、自分の開発環境を効率化することを考えてみてはどうでしょうか。

dvc-wordpress は、Docker と VS Code Dev Container を活用し、WordPress 開発で不可欠な「PHP 開発環境」と「Apache + PHP 実行環境」をシームレスに統合します。これを使うことで、複雑だった環境構築が驚くほど簡単になり、開発そのものへ集中できるようになります。

この記事では、WordPress 初心者の方でも安心して取り組めるよう、dvc-wordpress の基本から、具体的な環境構築手順、そして日々の開発ワークフローまでを丁寧にご紹介していきます。さあ、一緒に快適な WordPress 開発の世界へ踏み出しましょう！

なお、この記事では dvc-wordperss の v202507 タグをつけてあるバージョンを使っています。

dvc-wordpress とは？

dvc-wordpress は、WordPress 開発を効率的に進めるための、2 つの主要なコンテナ環境を統合したソリューションです。dvc-wordpress には 2 つの Docker Compose プロジェクトが含まれています。

プロジェクト 役割
dvc-wordpress PHP コードの開発・実行、開発に必要なツールが揃った「開発コンテナ」
php-apache WordPress サイトの動作・確認を行う「WordPress 実行環境」

dvc-wordpress (開発コンテナ用)

この Docker Compose プロジェクトは、PHP のコード開発や単体 PHP プログラムの実行に特化したコンテナ環境を提供するものです。

dvc-node-workspace-data Docker ボリュームを php-apache Docker Compose プロジェクトのコンテナと共有することで WordPress 関連のソースコードを編集できます。

主な特徴は以下の通りです。

  1. ベースイメージに hiro345g/dvc:php-202507 を採用
  2. 統一された作業フォルダ
  3. 永続ボリュームの活用

それぞれについて説明します。

ベースイメージに hiro345g/dvc:php-202507 を採用:

ベースイメージとして hiro345g/dvc:php-202507 を採用することで、あらかじめ開発で必要となる機能やツールを自分で用意しなくても、すぐに PHP 開発ができます。

使用する開発コンテナを指定することで、開発環境の再現性と効率性を高め、安心して開発へ集中できるようになります。

統一された作業フォルダ:

統一された作業フォルダというのは、dvc-wordpress の PHP 環境では /home/node/workspace/php/html、/php-apache といった作業フォルダが決まったパスで用意されていることを意味します。

普通は、ホームフォルダなどがユーザー環境によって違うファイルパスとなりますが、開発コンテナーを使うと共通のものになります。

統一されていると、コマンド実行時などに指定するファイルパスの説明について、各自の環境に合わせた変更が必要なくなり、誤解が発生しにくくなります。

永続ボリュームの活用:

永続ボリュームの活用というのは、Docker ボリュームという機能を使って、開発用のコンテナーと WordPress 実行用のコンテナーとで、WordPress 関連のソースコードが置いてあるフォルダを安全に共有する仕組みのことです。

これにより、コンテナーを停止してもデータが消えず、実際のサーバーに近い Linux 環境でファイルを扱うことができます。特に Windows や macOS で開発する際に起こりがちな、ファイル共有に関する問題を回避できるというメリットがあります。

php-apache (WordPress 実行環境)

この Docker Compose プロジェクトは、WordPress の実行に必要なコンテナ群と、開発を強力にサポートするツール群を統合的に提供します。php-apache の主な特徴は以下の通りです。

特徴 説明
WordPress 用 Web サーバー カスタムビルドされた Apache と PHP 環境を提供し、WordPress サイトを安定稼働
サイトアクセス ホストの 8080 ポートを通じて、開発中の WordPress サイトにブラウザから直接アクセス可能
データベース WordPress 用データベースを提供（サービス名: php-apache-mysql）
ソースコードの永続化 Docker ボリューム dvc-node-workspace-data による、コンテナ破棄後も保持される WordPress ソースコード
ファイル同期 開発コンテナで行ったファイル編集の、WordPress 実行環境への即時反映
データベース管理 開発効率向上のため、データベース管理用 Web アプリを提供（サービス名: php-apache-adminer）

これらの機能は、php-apache の compose.yaml ファイルで定義された以下のサービスによって実現されています。

サービス 役割
php-apache Apache2 + PHP モジュール + PHP インタプリタ
php-apache-mysql データベース
php-apache-adminer データベース管理用 Web アプリ

各サービスの役割は以下の通りです。

php-apache は、WordPress サイトの核となる Web サーバーです。カスタムビルドされた Apache と PHP 環境が、安定した動作と高い互換性を提供します。ホストの 8080 ポートへの転送設定により、ブラウザから簡単にアクセス可能です。

php-apache-mysql は、WordPress のすべてのデータを管理するデータベースサービスです。mysql:8.0 イメージを使用しており、堅牢なデータ管理を実現します。

php-apache-adminer は、開発時にデータベースの内容を確認・編集する際に非常に便利な Web アプリケーションです。WordPress サイトをブラウザで開きながら、手軽にデータベース操作が行えます。これは WordPress 実行に必須ではありませんが、開発者の利便性を考慮して用意されています。

フォルダ構成

環境構築をする前に、dvc-wordpress の主要なフォルダ構成について確認しておきましょう。次のようになっています。

dvc-wordpress/
├── .devcontainer/         # Dev Container用設定ファイル
├── compose.yaml           # Dev Container用 Docker Compose 設定ファイル
├── GEMINI.md              # Gemini CLI 向け開発ガイド
├── README.md              # dvc-wordpress の説明
├── php-apache/            # WordPress 実行環境 (Apache, PHP, MySQL) の設定
│   ├── build/            # php-apache 用 Docker イメージをビルドするための設定
│   └── script/           # php-apache 環境の起動・停止スクリプト
└── workspace_share/       # 開発コンテナーとホストで共有するフォルダ

php-apache 用のファイルは php-apache/ フォルダに置いてありますから、それ以外は dvc-wordpress 用のものとなります。

なお、これ以降、dvc-wordpress/ フォルダを ${PROJECT_DIR} と表記することにします。

環境構築の準備

dvc-wordpress を利用した開発を始める前に、お使いの PC に以下のツールがインストールされている必要があります。

Docker については、Docker Desktop でも良いです。Docker Desktop には Docker Engine と Docker Compose が含まれているからです。

また、次の VS Code 拡張機能もインストールしておいてください。

dvc-wordpress 環境構築手順

1. プロジェクトのクローンと VS Code でのオープン

まず、dvc-wordpress リポジトリをクローンし、VS Code でプロジェクトルートを開きます。

git clone https://github.com/hiro345g/dvc-wordpress.git
cd dvc-wordpress
git checkout v202507
code .

VS Code で開くと、「コンテナーで再度開く」という通知が表示されるので、クリックして Dev Container を起動します。

すると、VS Code をアタッチした状態で Dev Container が起動し、VS Code の画面がリロードされます。

2. 初回セットアップ（WordPress 実行環境のビルド）

Dev Container が起動したら、これにアタッチした VS Code の画面でターミナルを開き、WordPress 実行環境の Docker イメージをビルドします。

bash /php-apache/build/build.sh

このコマンドは、Apache や PHP の設定、WordPress の初期化に必要なツールなどを組み込んだ Docker イメージを作成します。

ビルドが完了したら、動作確認のために起動します。確認が済んだら停止します。

# WordPress実行環境の起動
bash /php-apache/script/up.sh

# 起動確認
docker compose ls | grep php-apache

# 停止
bash /php-apache/script/down.sh

3. WordPress サイトの初期設定

いよいよ WordPress サイトの初期設定です。Dev Container 内のターミナルで、WordPress 実行環境を起動します。

bash /php-apache/script/up.sh

次に、起動した php-apache コンテナ内で、WordPress のダウンロード、wp-config.php の生成、プラグインのインストールなどを行います。そのため、docker compose -p php-apache exec php-apache bash 経由でコマンドを実行します。

ここで、この後のコマンドについては、知らない人には珍しい書き方となっているので、説明しておきます。たとえば、php-apache コンテナ内で echo "Hello" コマンドを実行して作業を終了するには次の手順を踏みます。

  1. アタッチ: docker compose -p php-apache exec php-apache bash
  2. コンテナでコマンド実行: echo "Hello"
  3. デタッチ: exit

基本はターミナルから順番にコマンド実行するのですが、実は、これはワンライナーで実行できます。

その場合のコマンドは次のようになります。見やすくするために \ を使って改行をいれているため、複数行になっていますが、改行せずに1行で実行できます。

docker compose -p php-apache exec php-apache bash -c '\
    echo "Hello" \
'

このようなコマンド実行例で説明するのはなぜかというと、こうしておかないと、どのコンテナでコマンド実行するのかわからなくなるからです。この表現だと、コマンドを実行するコンテナがどれか明確になります。

それでは先に進みましょう。

まず、php-apache コンテナ内で以下のコマンドを実行してデバッグ機能の設定を無効化します。こうしておかないと、WordPress のインストール時にデバッグ機能関連のメッセージが出力されて邪魔になります。

docker compose -p php-apache exec php-apache bash -c '\
    mv /usr/local/etc/php/conf.d/xdebug.ini \
        /usr/local/etc/php/conf.d/xdebug.ini.disabled \
'

それから、次のコマンドを実行してデバッグ機能を無効化します。

docker compose -p php-apache exec php-apache bash -c '\
    kill -HUP 1 \
'

デバッグ機能の無効化と有効化については、この後に改めて説明します。ここでは先に進みます。

WordPress のインストールをするために、次のコマンドを実行します。

docker compose -p php-apache exec php-apache bash -c '\
    cp /var/www/html/init-wp.sh /home/node/workspace/php/html/ \
    && cp /var/www/html/html.code-workspace /home/node/workspace/php/html/ \
    && cd /home/node/workspace/php/html/ \
    && WEB_ROOT_DIR=$(pwd) bash init-wp.sh \
'

init-wp.sh は、WordPress 本体と、all-in-one-wp-migration、backwpup、query-monitor といったプラグインを自動でインストールし、初期設定もします。

なお、WordPress サイト管理者のユーザー名やパスワードを変更したい場合は init-wp.sh の内容を変更してから実行すれば良いです。

dvc-wordpress の使い方を知りたいだけなら、初期設定のままで良いので、ここではそのまま進めます。

WordPress サイトの初期設定が終わったら、WordPress 実行環境のコンテナを破棄します。

bash /php-apache/script/down.sh

WordPress をインストールした /home/node/workspace/php/html や DB のデータは永続化されているので、コンテナを破棄しても残っています。消えないので安心してください。

なお、PHP デバッグ機能の設定を無効化したことについては、永続化していません。そのため、破棄したことで変更は残っておらず、次回のコンテナ起動時には PHP デバッグ機能は有効になっています。

日々の開発ワークフロー

日々の開発ワークフローについて、ここでは VS Code Dev Container で dvc-wordpress 開発コンテナを起動して作業する前提で説明します。

1. WordPress 環境の開始

開発を始める際は、Dev Container 内のターミナルで以下のコマンドを実行します。

bash /php-apache/script/up.sh

2. WordPress サイトへのアクセス

環境が起動したら、Docker ホストの Web ブラウザで以下の URL にアクセスして WordPress を使うことができるようになります。

3. ファイルの編集

WordPress のソースコードは、dvc-wordpress 開発コンテナと php-apache コンテナの両方から /home/node/workspace/php/html/ のパスでアクセスできます。

VS Code でこのフォルダ内のファイルを編集すると、即座に Web サイトへ反映されます。

ただし、反映されるのは Web サーバー上だけなので、Web ブラウザで表示確認するには URL のリロードが必要です。

4. WordPress 環境の停止

作業を終える際は、以下のコマンドで WordPress 環境を停止します。

bash /php-apache/script/down.sh

デバッグ機能の活用 (Xdebug)

dvc-wordpress は Xdebug が設定済みです。VS Code の「実行とデバッグ」ビューから Listen for Xdebug を選択するだけで、ブレークポイントを設定して PHP コードをステップ実行できます。

デバッグ機能の有効化/無効化

すでに説明してありますが、改めて説明しておきます。単純なコマンドの場合は bash -c による実行をしなくても良いので、その場合のコマンドを、ここでは紹介します。

WordPress のインストール時など、デバッグが不要な場合は、以下のコマンドで一時的に無効化できます。

# 無効化
docker compose -p php-apache exec php-apache \
    mv /usr/local/etc/php/conf.d/xdebug.ini \
        /usr/local/etc/php/conf.d/xdebug.ini.disabled
docker compose -p php-apache exec php-apache \
    kill -HUP 1

PHP デバッグ機能である Xdebug の設定は、/usr/local/etc/php/conf.d/xdebug.ini にあります。このファイル名の末尾に .disabled をつけることで、この設定が読み込まれなくなります。

設定変更をするためにはプロセスの再起動が必要で、そのために kill -HUP コマンドを使います。これはプロセスの再起動をするコマンドで、パラメーターにプロセス ID を指定します。

コンテナのメインプロセスは常にプロセス ID が 1 なので、これを再起動します。

一度無効化した PHP デバッグ機能を有効化するには、php-apache コンテナを再起動します。/usr/local/etc/php/conf.d は永続化していないので、デバッグ機能が有効な状態となります。コンテナの再起動をしたくないときは、以下のコマンドを実行します。

# 有効化
docker compose -p php-apache exec php-apache \
    mv /usr/local/etc/php/conf.d/xdebug.ini.disabled \
        /usr/local/etc/php/conf.d/xdebug.ini
docker compose -p php-apache exec php-apache \
    kill -HUP 1

シンボリックリンクの利用

実際に WordPress 関連の開発をする場合は、テーマやプラグイン用の PHP プロジェクトを WordPress とは別に用意することになります。

この時、シンボリックリンクを利用すると、WordPress と開発するプロジェクトを分けて管理しやすくなります。

今回用意してある php-apache では、apache2 の設定でシンボリックリンクの許可をしてあります。

たとえば、WordPress のプラグインを開発するとしましょう。ここでは wp_simple_shell_script_exe の開発をするとします。

これについて、dvc-wordpress コンテナ内では次のような配置で開発ができます。

/home/node/workspace/php/
├── html/                         # WordPress インストール済み
│  ├── wp_content/plugins/       # ここにシンボリックリンク作成
│  └── (略)
└── wp_simple_shell_script_exec/  # プラグイン
    └── wp_simple_shell_script_exec/
        └── wp_simple_shell_script_exec.php

具体的には dvc-wordpress コンテナ内で次のような手順でプラグイン用のプロジェクトの用意と、シンボリックリンクの作成をします。

まず、プラグイン用のプロジェクトを用意します。

cd /home/node/workspace/php
git clone https://github.com/hiro345g/wp_simple_shell_script_exec.git

WordPress のプラグイン用のフォルダの下に、開発するプラグインのフォルダのシンボリックリンクを ln -s コマンドで用意します。

ln -s ~/workspace/php/wp_simple_shell_script_exec/wp_simple_shell_script_exec \
    ~/workspace/php/html/wp-content/plugins/wp_simple_shell_script_exec

後は、dvc-wordpress 開発コンテナーで /home/node/workspace/php/html を開いて開発をすれば良いということになります。

なお、PHP のライブラリについて、追加でインストールが必要な場合は、hiro345g/dvc:php-202507 をベースとする Docker イメージをカスタマイズします。
もしくは、公式の mcr.microsoft.com/devcontainers/php をベースにしてカスタマイズするなどの対応をすれば良いです。

まとめと今後の展望

この記事では、Docker と VS Code Dev Container を活用した WordPress 開発環境 dvc-wordpress を紹介しました。dvc-wordpress は、開発環境と実行環境を明確に分離しつつ、それらをシームレスに連携させることで、WordPress 開発における多くの課題を解決します。

主なメリット:

  • 環境構築の簡素化: 面倒なセットアップ作業から解放され、誰でもすぐに開発を始めることが可能
  • 再現性の確保: チームメンバー全員が同じ環境で開発できるため、「環境依存のバグ」を防ぐことが可能
  • 開発効率の向上: Xdebug による快適なデバッグや、VS Code との強力な連携により、コーディングの高い生産性の確保
  • 柔軟なカスタマイズ: Dockerfile や init-wp.sh を変更することで、プロジェクト固有の要件にも柔軟に対応可能

今後の展望:

dvc-wordpress はまだ発展途上です。今後は、以下のような機能拡張を検討しています。

  • テスト自動化の統合: テストフレームワークの導入と、CI/CD パイプラインとの連携強化
  • パフォーマンスチューニング: パフォーマンス改善を容易にするためのプロファイリングツールの導入
  • セキュリティスキャンの導入: 開発段階で脆弱性を検知できる仕組みの構築

メールへの対応

WordPress の開発をするにあたっては、メールへの対応も必要になることがあります。それについては別途記事を公開しています。参考にしてください。

参考資料

Discussion