WordPressのローカル開発環境について

2024年6月5日

皆さんはWordPressのローカル開発環境の構築、どうされてますでしょうか。

WordPressの新規開発に際して、今どきの開発環境ってどんなだろうと思い、リサーチしていると、Automattic製WordPressローカル開発環境Studioが爆誕という記事があったので、早速トライ。

またローカル環境開発が増えたワン！

Automattic製WordPressローカル開発環境Studioが爆誕 https://t.co/mhymhAnhDs
— Capital P (@capitalPjp) April 26, 2024

インストールして、サイト名とフォルダを指定して実行すればWordPressが立ち上がる、、、

ほんと爆速ですね。

すでに”Local by Flywheel”といったアプリもスタンダードになっているようで、WordPressの開発も世代交代していくのかなとしみじみ。でも思いっきりノーコードサイト作成ツールのstudioと名前被りなのが不安。後発のStudioはややこしいので、名前を変えてほしいなー。

ただ、すでに使用しているWordPressのデータをローカルに落として、新しい環境のWordPressにインポートしてデバッグしたいなどの場合には手探りだったり、デプロイツールも何を使うのか考えてしまいました。

私はDockerが気に入っています

今回は自分のDockerでのWordPressのローカル開発環境を整理しながら、紹介してみようと思います。

ちなみにmac用です。

自分専用だったので、ローカルでコピーして使ってましたが、Githubでリポジトリを作ってみました。

■ murodon/docker-wp-local: docker-compose settings for local wordpress development enviroment.
https://github.com/murodon/docker-wp-local

ローカルフォルダにレポジトリをクローンします。

git clone git@github.com:murodon/docker-wp-local.git

Cloning into 'docker-wp-local'...
remote: Enumerating objects: 31, done.
remote: Counting objects: 100% (31/31), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 31 (delta 5), reused 31 (delta 5), pack-reused 0
Receiving objects: 100% (31/31), 10.33 KiB | 1.72 MiB/s, done.
Resolving deltas: 100% (5/5), done.

構成はこんな感じ

📦docker-wp-local
 ┣ 📂certs   ...SSL証明書用フォルダ
 ┣ 📂src　...ビルド後にwordpressのファイルが入ります。
 ┣ 📂ssh　...WORDMOVEでコンテナからsshでサーバーに接続する際に使用
 ┃ ┣ 📜config
 ┃ ┣ 📜id_rsa
 ┃ ┗ 📜known_hosts
 ┣ 📂wordmove ...wordmoveのコンテナ用設定
 ┃ ┣ 📜Dockerfile
 ┃ ┣ 📜mount-ssh.sh
 ┃ ┗ 📜movefile.yml
 ┣ 📂wordpress　...wordpressのコンテナ用設定
 ┃ ┣ 📜Dockerfile
 ┃ ┣ 📜php.ini
 ┃ ┗ 📜ssl.conf
 ┣ 📜.env ...docker-composeで使用する環境変数を設定するファイル
 ┣ 📜.gitattributes
 ┣ 📜.gitignore
 ┣ 📜LICENSE
 ┣ 📜README.md
 ┗ 📜docker-compose.yml

ローカルサーバーでも証明書対応しておくと、毎回ブラウザに叱られないので、SSL化します。mkcertというmacのツールを使います。

mkcert

brew install mkcert
brew install nss # if you use Firefox
mkcert -install

SSL化する際にローカルWordPressのドメインを決めておきます。デフォルトではlocal-wp.protoにしています。

クローンしたcertsフォルダでmkcertを実行して、証明書を作成します。

cd certs
mkcert localhost 127.0.0.1 local-wp.proto

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "local-wp.proto"

The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅

It will expire on 5 September 2026 🗓

.envに作成された証明書のファイル名を設定します。

# -------------------------------------------
# wordpress PROJECT_SETTING
# -------------------------------------------
# PROJECT NAME 接頭辞に使用
PROJECT_NAME=local-wp
# SUFFIX PROJECT_NAME.SUFFIXでホスト名を作成する
SUFFIX=proto
# TIMEZONE
TIMEZONE=Asia/Tokyo
# mkcertの証明書名(.より前)
CERT_NAME=localhost+2

ここまで設定して、docker-composeでビルドして起動します。

docker-compose build

しばらく待って、ビルドが終わったら立ち上げます。

docker-compose up -d

[+] Running 6/6
 ✔ Network docker-wp-local_default   Created                                                                                                                                   0.1s
 ✔ Volume "docker-wp-local_db_data"  Created                                                                                                                                   0.0s
 ✔ Container local-wp_db             Started                                                                                                                                   1.8s
 ✔ Container local-wp_mailcatcher    Started                                                                                                                                   1.8s
 ✔ Container local-wp_wp             Started                                                                                                                                   1.4s
 ✔ Container local-wp_wordmove       Started

こんな感じになれば立ち上がっていると思います。hostsでlocal-wp.protoをローカルホストに向けて起きます。iHostsが便利です。

■ ターミナルが苦手なあなたに！Macでhostsファイルを簡単に編集するアプリを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

127.0.0.1  local-wp.proto

さて、ブラウザで立ち上げてみます。

open https://local-wp.proto

見慣れた画面が出てきました。

SSLもOKですね。

データベースをみたいときはSequel Aceを利用して接続します。

これでSQLが簡単に使えるようになったので、ローカルとリモートのDBでデータをやり取り出来ます。

リポジトリには他にもデプロイ用のWORDMOVEコンテナとローカルのWordPressでメールテストするためのmailcatcherが入ってますが、そちらは別の記事にすることにします。

開発環境は個性があるよね

Macユーザーの自分もXAMPP、MAMPから初めて、ちょっと前まではVirtualbox+Vagrantを利用していました。

Virtualbox+Vagrantは本番環境を模して作ることができるので、OSの構成やapache,php,mysql,nginxなどLAMPスタックだったり、ローカル環境の構築を通じて本番サーバーのことも詳しくなっていくと勉強にはもってこいでしたが、サーバーごとにゲストOSも増やすため、VirturalBoxのファイルサイズが肥大化することもしばしばで、サーバーのバージョンチェックなどで環境を変えると、ローカルの容量がどんどんなくなっていきました。
そこで、ホスト型仮想化からコンテナ型仮想化のDockerへと移行しようとしたわけですが、ローカルアプリDocker Desktopが出た当時のdockerのファイルシステムは、コンテナとローカルのファイル同期が非常に遅く、とても使用できないなと感じていました。

またVagrantにはVCCWというWordpressを楽に起動し、wordmoveという外部サーバーとローカル環境を同期させるツールが非常に便利で、開発環境はほぼVCCWに。

ところが、Intel MacからM1へ移行したタイミングで、VirtualboxがM1 macに対応していなかったため、Vagrantが動かなくなります。ものすごい焦って、VMWAREやUTMも試しましたが、VCCWの使い勝手の良さには届かず。

困り果てていたところ、ダメ元でdockerを試したところ、構築の速さや拡張制の良さ、データの軽量性でなんて便利なんだ！となって今に至ります。

STUDIOなどのノーコードでデザイン重視のサイトづくりが出来たり、AIなどでサイトが自動生成できるようになってきて、WordPressもすでに一昔前のツールになった感じもしますが、開発環境は人それぞれ個性があり、いろんなアプローチがあって面白いです。

参考

■ Docker-composeで最強（自分史上）のWordPress開発環境を作る #Docker – Qiita
https://qiita.com/ryo2132/items/d75e1846aa181676406e

■ HTTPSに対応したWordPressのローカル開発環境をDockerで構築 #Docker – Qiita
https://qiita.com/matsuri0828/items/b4259e385996daa8aa6e

■ welaika/wordmove: Multi-stage command line deploy/mirroring and task runner for WordPress
https://github.com/welaika/wordmove