【初心者向け】Docker 4.31 を使ってWordPress 6.5 の VPS 本番環境と macbook 開発環境を統一してみた

この記事では、WordPressを本番と開発を統一した環境で開発作業したかったので、Dockerを使った本番環境から開発環境のクローンを構築した際の作業手順や、やってみての感想を紹介します。

本記事の対象者

• Dockerを使って本番と開発環境を統一したい人
• 開発環境でWordPressのPHPコード変更やプラグインのテスト等をしたい人
• Dockerを使ったWordPress環境構築の具体的な手順が知りたい人

本記事のポイント

WordPressでブログを公開していますが、本番環境へいきなりPHPのコードやプラグインを導入する運用を続けていくのは前々から怖かったです。今までは、都度イメージバックアップを取ってからお試しという手順でしたが、失敗したときの影響やリカバリ時間が大きいので前々から改善したいと思ってました。

現在運用している本番環境（Xserver VPN）と、今回構築する開発環境（MacBook）の関係図を以下に示します。本記事の前提として、下図の①、②は既に実施済となります。

環境を統一することで得られるメリットは以下の4つです。

• Dockerを使うと、色々なOSやハードウェア上で環境を統一できる
  • 今回はXserver VPNと普段使いのMacBookで環境を統一します。もちろんWindowsやUbuntuでも同様に環境を統一できます。
• 環境は定義ファイルで設定するので、環境を配布して再現が簡単にできる
  • 今回は環境定義ファイル（docker-compose.yml）を本番と開発で共通に利用します。これをGit等で管理するとメンバーへの展開や版管理が楽になりますね。
• 本番と同じ構成やデータを開発環境で簡単に再現することができる
  • 今回はMacBookの開発環境を本番と構成とデータで作成します。作成に使った定義ファイルやデータを使えば、開発環境が壊れても簡単に復旧ができます。
• ローカル環境から開発環境と本番環境を同じツールで操作する
  • 今回、環境の操作はMacBookに導入したツール群で統一します。なお、これらのツールは、WindowsやUbuntuでも使えるので、色々なツールの操作を覚える必要がありません。

本記事の環境

今回の記事では、以下の環境で手順を説明します。

本番環境（今回移行元の環境、現在運用中）

開発環境（今回新しく作る環境、今回の記事で作成）

本記事で紹介するソフトウェアおよびツールは、筆者の個人的な使用経験に基づくものであり、公式のサポート外の設定や使用方法を含む場合があります。利用に際しては、公式サイトの指示およびガイドラインを参照し、自己責任で行ってください。

目次

• WordPress環境の概要
  • 環境のコンセプト
  • WordPress環境のソフトウェア構成
  • 環境のディレクトリ構成
  • WordPress環境の定義ファイル：docker-compose.yml
  • 本番環境の構成
  • 開発環境の構成
  • 環境構築の前提となるソフトウェア
• WordPress環境の移行
  • 移行対象
  • 開発環境の構築
  • 本番環境からのデータや設定移行
• まとめ

WordPress環境の概要

まずは、今回移行＆構築するWordPressの環境を解説します。

環境のコンセプト

• 現時点（2024年6月末時点）で最新のバージョンでソフトウェアを構成し長く安定して使えるようにする。
• WordPressのコンテンツやシークレットファイルを相対ディレクトリ指定して定義ファイルを共通化する。
• WordPressのコンテンツは指定したディレクトリで管理し、PHPコードやプラグインの変更を容易にする。
• MySQLの永続化はDocker管理のVolumeを指定する。（DBツールを使ってデータのメンテするのでVolumeへの直接アクセスは不要と判断）
• MySQLのポートを公開し、外部のツールから開発環境や本番環境のDBを操作可能にする。
• DBのパスワードを外部のシークレットファイルとする（環境毎に秘密情報を分けて管理する）

WordPress環境のソフトウェア構成

環境のディレクトリ構成

WordPressのディレクトリ構成は以下の通りです。

本番環境と開発環境のディレクトリ構成は同じです。任意のディレクトリに配置してください。

wp_env（任意のディレクトリ）
├── docker-compose.yml
└── wordpress
    ├── .htaccess
    ├── wp-config.php
    └── wp-content ...
├── db_password.txt
└── db_root_password.txt

WordPress環境の定義ファイル：docker-compose.yml

services:
  db:
    image: mysql:8.0.37
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD_FILE: /run/secrets/db_root_password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD_FILE: /run/secrets/db_password
    ports:
      - "3306:3306"
    secrets:
      - db_root_password
      - db_password

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD_FILE: /run/secrets/db_password
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html # WordPressのコンテンツディレクトリを指定
    secrets:
      - db_password

volumes:
  db_data:

secrets:
  db_root_password:
    file: ./db_root_password.txt # このファイルにはDBのrootパスワードを保存します
  db_password:
    file: ./db_password.txt # このファイルにはWordPress用DBユーザーのパスワードを保存します

docker-compose.ymlの定義概要は以下の通りです。

• db: サービス
  • MySQLデータベース、mysql:8.0.37のイメージを使用。UbuntuとmacOS共通で使える様にarmアーキテクチャが用意されているOracle-linuxのイメージを指定します。
  • データベースのデータはdb_dataという名前のボリュームに保存。
  • 環境変数により、rootのパスワード、データベース名、ユーザー名、ユーザーパスワードが設定。これらのパスワードは、Dockerシークレット機能を使って安全に管理され、それぞれのパスワードが保存されているファイルへのパスが指定される。
• wordpress: サービス
  • WordPress、最新のwordpressイメージを使用。
  • wordpressはdbサービスに依存。dbサービスの起動後に、WordPressを起動。
  • 環境変数により、データベースのホスト（dbサービス）、ユーザー名（wordpress）、パスワード（/run/secrets/db_password）、データベース名（wordpress）が設定される。
  • WordPressのコンテンツディレクトリはホストの./wordpressディレクトリにマップ。
• volumes:
  • db_dataというボリュームを定義。
• secrets:
  • db_root_passwordとdb_passwordの2つのシークレット情報を定義。それぞれのシークレット情報は、対応するパスワードを保存したテキストファイルにリンクされる。

本番環境の構成

UbuntuサーバーのWordPressを管理するユーザーが管理するディレクトリに作成されています。

今回はwordpressuser（SUDO権限付き、SSH接続可）とし、そのHOMEディレクトリにwp_envというディレクトリを作成します。完成したディレクトリの構成イメージを以下に示します。

wordpressuser
└── wp_env
    ├── docker-compose.yml
    └── wordpress
        ├── .htaccess
        ├── wp-config.php
        └── wp-content ...
    ├── db_password.txt
    └── db_root_password.txt

開発環境の構成

macの任意のユーザーのHOMEディレクトリなど任意のディレクトリ配下に作成する。

今回はmacuserとし、そのHOMEディレクトリにvn-wp-testというディレクトリを作成します。完成したディレクトリの構成イメージを以下に示します。

macuser
└── vn-wp-test
    ├── docker-compose.yml
    └── wordpress
        ├── .htaccess
        ├── wp-config.php
        └── wp-content ...
    ├── db_password.txt
    └── db_root_password.txt

環境構築の前提となるソフトウェア

今回紹介する手順の実施には、開発環境のMacBook上に 以下のソフトウェアがインストールされている必要があります。インストールの詳細は、公式サイトを参照してください。

Docker Desktopのインストールについては、以下の記事をご覧下さい。

WordPress環境の移行

移行対象

本番環境には、以下のテーマとプラグインを導入して運用しています。

これらを、本番環境から複製して、開発環境を構築します。

開発環境の構築

1．開発環境のディレクトリ作成

以下のディレクトリを作成します。

macuser
└── vn-wp-test
    └── wordpress

2．本番環境からdocker-compose.ymlのコピー

本番環境で使用しているdocker-compose.ymlをコピーし、vn-wp-testディレクトリに配置します。

新規に作成してもOKです。定義内容は、「WordPress環境の定義ファイル：docker-compose.yml」を参照してください。

macuser
└── vn-wp-test
    ├── docker-compose.yml
    └── wordpress

3．シークレットファイルの作成

開発環境用に新たにファイルを作成します。設定するパスワードは任意ですが、本番環境とは別にして情報漏洩に対処することをお薦めします。

macuser
└── vn-wp-test
    ├── docker-compose.yml
    └── wordpress
    ├── db_password.txt
    └── db_root_password.txt

MySQL wordpressデータベースのユーザーのパスワード：db_password.txt

hogehoge（任意のパスワード）

MySQLのルートユーザーのパスワード：db_root_password.txt

fugafuga（任意のパスワード）

4．動作確認

WordPressを起動します。MacBookのコマンドラインを開き、vn-wp-testディレクトリに移動して以下のコマンドを実行します。

docker compose up -d

上記の様に、それぞれのコンテナの作成とスタートのメッセージが表示されたら、起動は成功です。

Webブラウザで動作確認をします。以下のURLにアクセスします。

http://localhost:8000

以下の画面（WordPressのインストール）が表示されればWordPressの設定はOKです。なお、この後のステップでコンテンツやデータの移行を行うので、WordPressのセットアップは行いません。

本番環境からのデータや設定移行

1．WordPressコンテンツファイルアーカイブ

本番サーバにログインし、WordPressの環境ディレクトリに移動します。

/home/wordpressuser# cd /home/wordpressuser/wp_env/

次にWordPressのコンテンツをアーカイブします。

/home/wordpressuser/wp_env# tar czvf /home/wordpressuser/wpdata.tar.gz wordpress/

2．WordPressコンテンツファイルのダウンロード

開発環境からVPN上にあるWordPressのコンテンツアーカイブファイルをダウンロードします。

scp xxxx@example.com:/home/wordpressuser/wpdata.tar.gz ~ wpdata.tar.gz

ダウンロードしたWordPressのコンテンツアーカイブを適当なディレクトリに展開します。今回はhomeディレクトリ直下にtmpディレクトリを作成しそこに展開します。

/home/macuser/tmp

3．コンテンツの移行

tmpディレクトリに展開したWordPressのコンテンツから開発環境のWordPressのコンテンツディレクトリにコピーします。

コピーするファイルおよびディレクトリは以下の通りです。

• wp-content/（ディレクトリごと全て）
• wp-config.php
• .htaccess

コピー先ディレクトリ

• /home/macuser/vn-wp-test/wordpress

4．MySQデータの移行

開発環境でData Gripを起動します。

「＋」アイコンをクリックし、MySQLのData Sourceを追加します。

Data Sourceの作成画面（初期画面）です。

接続先の本番環境に応じてHost（接続先のドメイン名もしくはIPアドレス）、User（ユーザ名）、Password（パスワード）、Database（データベース名）の項目を設定します。
Nameは、接続先のDBが分かるように任意の名前を付けてください。今回は、「wordpress@xxxx.com」のように付けました。

作成されると、Project Data Sourcesに設定したデータベースが追加されます。

本番環境のデータベースからデータをエクスポートします。先ほど作成したデータベースを右クリックして「Import/Export」→「Export with ‘mysqldump’」を選択します。

エクスポートの詳細画面です。赤枠の項目を設定します。
Path to mysqldump：mysqlクライアントをインストールした場所のmysqldumpを指定
Databases：エクスポート対象のデータベース
Out path：エクスポートしたデータを出力するディレクトリとファイル名

設定が終わったら「Run」ボタンをクリックします。指定したディレクトリにダンプファイルが作成されていれば成功です。
なお、今回はData Gripを使いましたが、mysqldumpコマンドを直接使ってもエクスポート出来ます。

5．エクスポートデータに環境の差異を反映

本番環境からエクスポートしたデータをインポートする前に、環境の差異を反映します。今回は、ホスト名が実際のドメイン名（xxxx.com）から開発環境（’localhost’）に変わるため、以下の2項目を変更します。

• ホスト名
  • WordPressのWordPress アドレス (URL)とサイトアドレス (URL)が実際のドメイン名（xxxx.com）から開発環境（’localhost’）に変わります。
  • エクスポートしたファイルのドメイン名をxxx.comからlocalhostに置換します。
• ReCapture
  • reCAPTCHAのサイトキー、シークレットキーが実際のドメイン名（xxxx.com）から開発環境（’localhost’）に変わります。開発環境用に、localhostのサイトを作成してキーを変更します。
  • エクスポートしたファイルのサイトキー、シークレットキーを本番環境のキーからlocalhostのキーに置換します。

MEMO：開発環境から本番環境にコンテンツやデータを移行する場合には、上記の手順を逆に実行すれば本番環境に移行出来ます。

データのインポートを行う準備をします。再度、Data Gripを起動し、開発環境用のデータベース（Data Source）を追加します。

接続先の開発環境に応じてHost（接続先のドメイン名もしくはIPアドレス）、User（ユーザ名）、Password（パスワード）、Database（データベース名）の項目を設定します。
Nameは、接続先のDBが分かるように任意の名前を付けてください。今回は、「wptest@localhost」のように付けました。

開発環境のデータベースへデータをインポートします。先ほど作成したデータベースを右クリックして「Import/Export」→「Restore with ‘mysql’」を選択します。

インポートの詳細画面です。赤枠の項目を設定します。
Path to mysql：mysqlクライアントをインストールした場所のmysqlを指定
Databases：インポート対象のデータベース
Path to Dump：インポートするデータ（エクスポートしたデータファイル名）

6．移行後の動作確認

動作確認します。先ほど起動していたDockerコンテナを終了させます。以下のコマンドを順番に実行してください。

docker compose down

docker compose up -d

Webブラウザで動作確認をします。以下のURLにアクセスします。

http://localhost:8000

以下の画面（本番環境のコンテンツ）が表示されればWordPressの移行は完了です。構築した開発環境で思う存分変更やテストを実施してください！

まとめ

今回の記事のまとめです。Dockerコンテナを使って、WordPressの本番環境と統一した開発環境を構築できる事が分かりました。

今回紹介した手順のポイントは以下となります。

• Dockerを使って本番と開発環境を統一できる。
• 環境は定義ファイルで作成するので、環境を配布して再現が簡単にできる。
• ただし、環境で使用するDockerイメージは対応しているCPUアーキテクチャを選択すること。
• お試しが簡単にできる開発環境を数ステップで構築することができる
• ただし、WordPressのドメイン名や設定データは変更する必要があるので注意すること。

このステップバイステップのガイドを通じて、あなたもDockerを使った効率の良いWordPress開発の世界に一歩踏み出しましょう！