Docker、Xdebug、PhpStormを使ったローカルWordPress開発環境の構築

Docker Compose、Xdebug、PhpStormを使用すると、本番サーバーを模倣した、再現可能で分離された管理しやすいローカル開発環境を作成でき、WordPressプロジェクトの品質を向上させることができます。

WordPress開発者および上級ユーザーの皆様、こんにちは。本日は、Docker Composeを使用したローカルWordPress開発環境のセットアップに関する、包括的かつわかりやすいチュートリアルを共有できることを嬉しく思います。最近、OnTheGoSystemsのダイナミックなチームの一員となったため、自分の快適な環境を持ち込むことにしました。それがこのセットアップの目的です。

目的はシンプルでした。XdebugとWP-CLIを公式のWordPress Dockerイメージと統合し、開発ツールをきめ細かく制御できるセットアップを構築することです。このセットアップは車輪の再発明ではなく、個人の好みやワークスタイルに合わせてカスタマイズすることを目的としています。このガイドが、同様の環境を構成し、WordPress開発の旅をより良いものにするためのお役に立てば幸いです。

前提条件

このチュートリアルを最大限に活用するには、以下の依存関係をインストールしておく必要があります。

Docker: コンテナを使用してアプリケーションを作成、デプロイ、実行するための主要なツールとしてDockerを使用します。これにより、アプリケーションと必要なすべての部分をコンテナにパッケージ化し、1つのパッケージとして出荷できます。Dockerをさらに強力にしているのは、きめ細かい制御が可能であり、アプリケーションのセットアップのあらゆる側面を正確に定義できることです。この制御により、ニーズに完全に適合した開発環境を構築できます。
Xdebug Chrome Extension: このブラウザ拡張機能は、コードのステップ実行、バグの特定、WordPressプロジェクト全体の品質向上に役立ちます。
PhpStorm: JetBrainsによって開発された、インテリジェントでフル機能のPHP用IDEです。PHP、HTML、JavaScriptのオンザフライのコード分析と、これらの言語の自動リファクタリングを備えたエディタを提供します。

Docker、Xdebug、PhpStormを使用する理由

私たちの目的は、分離され、再現可能で、簡単に管理できるローカルWordPress開発環境を確立することです。Dockerはこのセットアップのバックボーンを形成し、アプリケーションを格納および管理するためのインフラストラクチャを提供します。XdebugとPhpStormは、このパズルを補完するピースであり、強化されたPHPコード開発とデバッグ機能を提供します。

まず、公式のWordPress Dockerイメージを拡張するDockerfileを作成することから始めます。WordPressの開発とデバッグタスクに役立つツールであるXdebugとWP-CLIを組み込むことで、このイメージを強化します。

次に、WordPressとMySQLという2つの主要なサービスをオーケストレーションするためのDocker Composeファイルを作成します。信じられないかもしれませんが、基本的にはこれだけです。

このセットアップの素晴らしい点は、本番サーバーを模倣するだけでなく、簡単に複製できるローカル開発環境が構築されることです。つまり、複数の環境やマシン間でまったく同じセットアップを簡単に複製できるため、一貫性が確保され、セットアップ関連の問題が軽減されます。

ステップバイステップのチュートリアル

ステップ1：Dockerfile

まず、新しいDockerfileの作成から始めます。このファイルは、イメージのビルド方法をDockerに指示します。私が通常開始する基本的なセットアップは次のとおりです。

# Use the official WordPress image as a parent image
FROM wordpress:latest

# Install Xdebug
RUN pecl install xdebug 

# Install WP-CLI
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
    chmod +x wp-cli.phar && \
    mv wp-cli.phar /usr/local/bin/wp

# Copy xdebug.ini into the container
COPY xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

このDockerfileでは、公式のWordPressイメージから開始します。次に、明確さと保守性のために、XdebugとWP-CLIを個別にインストールします。Xdebugの設定ファイル（xdebug.ini）は、コンテナ内の適切なディレクトリにコピーされます。これが、ローカルのWordPress開発環境における私の定番セットアップの基盤となります。

ステップ2：Xdebug設定ファイル（xdebug.ini）

DockerイメージにXdebugがインストールされたので、ローカル開発環境で機能するように設定する必要があります。これには、以下の設定を含むxdebug.iniファイルを作成することが含まれます。

ini
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_port=9003
xdebug.start_with_request=yes

これらの設定により、Xdebug拡張機能が有効になり、リクエストごとにデバッグを開始するように設定され、接続先のクライアントポート（この場合は9003）が定義されます。まだclient_hostを指定していないことにお気づきかもしれませんが、ご心配なく。セットアッププロセスの次の段階ですぐに登場します。

ステップ3：Docker Composeファイル

次に、WordPressとMySQLのサービスをセットアップするdocker-compose.ymlファイルを作成します。

yaml
version: '3'
services:
  # MySQL Service
  mysql:
    image: mysql:latest
    container_name: mysql_container
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
  
  # WordPress Service
  wordpress:
    depends_on: 
      - mysql
    image: wordpress:latest
    container_name: wp_container
    volumes:
      - ./wp_data:/var/www/html
    environment:
      WORDPRESS_DB_HOST: mysql
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DEBUG: 1
      XDEBUG_CONFIG: client_host=host.docker.internal
    ports:
      - "8000:8000"

volumes:
  db_data:

このファイルでは、MySQLとWordPressという2つのサービスを定義しました。参照と管理を容易にするため、どちらのサービスにも一意のコンテナ名が付けられています。

restart: alwaysディレクティブは、サービスが予期せず停止した場合に常に再起動することを保証します。手動で停止された場合は、コンテナが手動で再起動されたときにのみ再起動されます。

MySQLサービスはDockerボリューム（db_data）をマウントし、コンテナが削除された場合でも永続的なストレージを確保します。WordPressサービスについては、ローカルディレクトリ（./wp_data）をコンテナにマウントしています。つまり、ローカルシステム上のWordPressファイルに加えた変更は、すべてコンテナに反映されます。

WordPressサービスには、WordPressのデバッグを有効にするWORDPRESS_DEBUGと、Xdebugのクライアントホストを指定するXDEBUG_CONFIGの2つの環境変数を追加しました。client_hostはhost.docker.internalに設定されています。これは、ホストの内部IPアドレスにルーティングされる特別なDNS名であり、Xdebugがホスト上のIDEと通信できるようにします。

client_host設定はWindowsおよびmacOS向けに調整されていることに注意してください。Linuxの場合の一般的な代替策は、host.docker.internalをマシンの実際のIPアドレスに置き換えることです。これは、ターミナルコマンドip addr showを使用して取得できます。

ステップ4：ローカルWordPress開発環境の実行

Dockerfile、Xdebug設定ファイル、およびDocker Composeファイルの準備ができたら、ローカルのWordPress開発環境を起動します。

これを行うには、ターミナルでDocker Composeファイルが含まれているディレクトリに移動し、次のコマンドを実行するだけです。

bash
docker-compose up -d

このコマンドは、バックグラウンドでサービスを開始するようにDockerに指示します。

正常に実行されると、ローカルマシン上でWordPressサイトが実行され、http://localhost:8000経由でアクセスできるようになります。WordPressのPHPファイルに加えた変更はすべてこのサイトに反映されるため、WordPressアプリケーションを簡単かつ効果的に開発およびデバッグできます。

さらに、MySQLサービスも起動して実行され、ポート3306でアクセスできます。これにより、WordPressアプリケーション用の完全に機能するMySQLデータベースが提供され、開発ニーズに合わせた本物に近い環境が複製されます。

ステップ4.5：ボーナスステップ – phpinfo.phpファイルの追加

PHPの設定をもう少し深く掘り下げたい場合は、Dockerイメージにphpinfo.phpファイルを導入できます。このファイルにアクセスすると、PHP設定の包括的な概要が表示されます。
phpinfo.phpファイルを追加するには、まずDockerfileと同じディレクトリに作成する必要があります。ファイルには次のPHPコードを含める必要があります。

<?php phpinfo(); ?>

次に、Dockerfileに以下の行を追加します。

# Bonus: Copy phpinfo.php into the container
COPY phpinfo.php /var/www/html/phpinfo.php

このコマンドは、phpinfo.phpファイルをDockerイメージ内のWordPressルートディレクトリにコピーします。

これらの変更を確実に有効にするには、Dockerイメージを再ビルドし、Docker Composeサービスを再起動する必要があります。ターミナルで次のコマンドを実行します。

bash
docker-compose down
docker-compose up -d --build

docker-compose downコマンドは、現在のDockerコンテナを停止して削除します。これに続いて、docker-compose up -d –buildは、新しく追加されたphpinfo.phpファイルを含むDockerイメージを再ビルドし、バックグラウンドでWordPressとMySQLサービスを再起動します。
Webブラウザでhttp://localhost:8000/phpinfo.phpに移動することで、phpinfo.phpファイルにアクセスできるようになります。ここでは、PHPの設定を概説した詳細なページが表示され、デバッグや検証のための貴重なリソースとなります。

ステップ5：デバッグの開始

Docker、Xdebug、PhpStormを使用したローカルWordPress開発環境のセットアップが完了したので、WordPressサイトのデバッグを開始できます。開始方法の簡単な概要は次のとおりです。

PhpStormでのXdebugのセットアップ: PhpStormを開き、File → Settings（Macの場合はPreferences）→ Languages & Frameworks → PHP → Debugに移動します。Xdebugセクションで、Debug portが9003に設定され、Can accept external connectionsオプションがオンになっていることを確認します。
PhpStormサーバーの追加: PHP → Serversに移動します。名前をwordpress、ホストをlocalhostとして新しいサーバーを追加します。ポートを8000に設定します。パスマッピングが正しく設定されていることを確認します。サーバー上のwp_dataフォルダの絶対パスは/var/www/htmlにする必要があります。
Xdebug helper拡張機能のインストール: Google Chrome用のXdebug helper拡張機能をインストールします。インストールしたら、バグアイコンをクリックし、IDEキーをPHPSTORMに設定します。
PHPデバッグ接続の待機開始: PhpStormで、右上隅にあるバグアイコンをクリックして、PHPデバッグ接続の待機を開始します。
デバッグの開始: 前のステップが完了すると、WordPressアプリケーションのデバッグを開始する準備が整います。必要に応じてPhpStormでブレークポイントを設定し、Webサイトをリロードするだけです。快適なデバッグをお楽しみください！

まとめ

このチュートリアルの締めくくりとして、これが私の道のりにおいてそうであったように、皆様にとっても価値あるリソースとなることを願っています。phpinfo.phpファイルを追加したように、このセットアップをカスタマイズできる機能は無数の可能性を開き、開発プロセスをより堅牢かつ効率的にします。すべてのコードはこのGitHubリポジトリで入手できます。ぜひプルして試し、改善点を提案してください！

私個人はUbuntu OSを使用していますが、このセットアップの素晴らしい点は、DockerのおかげでOSが関係ないことです！Dockerはどのオペレーティングシステムでも等しく実行できるため、macOS、Windows、Linuxのどれを好むかにかかわらず、セットアップと使用方法は同じです。

このウォークスルーにお付き合いいただきありがとうございました。皆様の経験や、このセットアップをさらに改善するための提案についてお聞かせいただければ幸いです。成長は、共有された知識とコラボレーションの精神によってもたらされることを忘れないでください。

楽しいコーディングを。そして、素晴らしいWordPress体験を一緒に作り続けていきましょう！

前提条件

Docker、Xdebug、PhpStormを使用する理由

ステップバイステップのチュートリアル

ステップ1：Dockerfile

ステップ2：Xdebug設定ファイル（xdebug.ini）

ステップ3：Docker Composeファイル

ステップ4：ローカルWordPress開発環境の実行

ステップ4.5：ボーナスステップ – phpinfo.phpファイルの追加

ステップ5：デバッグの開始

まとめ

おすすめの記事

WPML for WooCommerce 5.5.2.2 – WooCommerce 10.3向けの重要な修正

WPML エクスポートとインポート 1.1.0 – 多言語コンテンツのインポートを自動化

ChatGPTによるWordPressサイトの翻訳：成功点、失敗点、より賢い代替策