はじめまして

最近WordPressで個人のウェブサイトを作った（まだ構築中）のですが、出来たばっかりなので、誰も来ない。SNSで宣伝しようにもフォロワーさんイナイ。そんなぼっちな私なので、サイトの記事にした「制作で使ったローカルの開発環境」を投稿してみようと思います。

もしWordPressのローカル開発環境をお探しでしたらぜひ一度お試しください。

こんな方にお薦めです

ローカルのWordPressでもSSLを適用したい
コンテナに入らないでもphp.iniでファイルのアップロードサイズを変更したい
wp-cliも使いたい
WORDMOVEが使いたい
contactform7などのメールもテストしたい
localhostではないローカルドメインで使いたい

紹介するWordPress開発環境の特徴

SSL対応、WP CLIインストール済みのwordpressコンテナ
Docker-Composeで簡単起動
WORDMOVEでサーバーと同期※
mailcatcherでローカルに作成したWordPressのメールをテスト可能

※この記事では詳しく紹介しません。後日別記事にします。

利用条件（私の動作環境）

MacOS　Sonoma 14.4（23E214）
docker desktop 4.19.0 (106363)
- Engine: 23.0.5
- Compose: v2.17.3
Homebrew 4.3.3
iHosts 1.4.0
git 2.39.3 (Apple Git-146)
Sequel Ace　4.0.17

gitとhomebrew,docker desktopがインストールされていることを前提にしています。
コンソールも使えることが条件です。

リポジトリ

ソースコードはgithubに纏めました。

利用方法

macの開発用ディレクトリを決めたら、レポジトリをクローンします。

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

ローカルにフォルダが作成されます。構成はこんな内容です。

📦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

ドメイン設定

まずはローカルで開発する際に利用するドメインを決めます。localhostでもOKですが、マルチサイトなどの構築時にも便利ですので決めておきます。(.localは避けましょう！)

決めたらまずは.envファイルを開いて、ドメインを設定します。ここでは仮にlocal-wp.protoとしておきます。（デフォルト値になっています。）

PROJECT_NAMEに「local-wp」を、SUFFIXに「proto」を入力します。

.env

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

SSL証明書

次にSSL証明書を作成します。まずはbrewでmkcertをインストールします。

mkcertのインストール

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

Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

これでローカルの認証局が出来ました。
次に証明書を作成します。

クローンしたフォルダでcertsフォルダに入って下記のコマンドを入力します。

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 🗓

このような表示が出れば認証鍵と証明書ファイルがフォルダに作成されています。

./localhost+2.pem
./localhost+2-key.pem"

先ほど編集した.envファイルに作成された証明書のファイル名（共通部分のlocalhost+2）を設定します。

.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

これで設定はひとまず終わりです。

WordPressの立ち上げ

設定が終わったら、docker-compose.ymlと同じ階層で下記のコマンドでビルドを実行します。

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が便利です。

127.0.0.1  local-wp.proto

さて、いよいよブラウザで確認してきます。直接ブラウザでURLを入力するか、下記のコマンドで開きましょう。

open https://local-wp.proto

おなじみのWordPressの言語選択画面が出てきました。

SSLもOKですね。

データベースに接続

DBを直接触りたい場合はSequel Aceを利用して接続します。.envにmysqlのユーザー情報、パスワードなどが登録されていますので、参照して設定します。

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

php.iniについて

wordpressフォルダに、コンテナ立ち上げ時に読み込まれるphp.iniがあります。ローカル環境でもWordPressへファイルをアップロードする際に、アラートが出る場合は、このファイルのpost_max_sizeやupload_max_filesizeを変更してください。

php.ini

memory_limit = 256M
post_max_size = 128M
upload_max_filesize = 64M
max_input_time = 60

php.iniを編集したら、docker-composeでリビルドしましょう。

docker-compose down
docker-compose build --no-cache

docker-compose up -d

wordmoveについて

wordmoveはローカル環境のWordPressとサーバーにインストールされたWordPressを同期できるツールです。非常に便利ですが、サーバーとの接続方法によって設定項目が多く、またデータベースの同期にはサーバー側のユーザー権限を変更する必要があったり、SSHを使用する場合は鍵の管理なども必要になります。
pullであればローカルが変化するだけなので、影響は限られますが、push時はサーバーの内容を大幅に書き換えるため、プラグインが消えたり、キャッシュも同期してしまったりと、注意点が多いです。
自分は最近テンプレートの同期のみに利用していますので、別の記事で詳しく紹介したいと思います。

追加！記事にしました。

MailCatcherについて

MailCatcherはローカルに建てたWordPressでメールの送信をテストできるツールです。Docker-Composeのネットワーク内でSMTPサーバーとして機能し、WordPressでContactForm7などのメールの送信をテストすることができるようになります。

docker-composeで立ち上げると、

open http://localhost:1080/

ここに立ち上がっています。

こちらも別の機会に紹介してみたいと思います。すでに詳しく紹介されている方もいらっしゃいますので、そちらも併せてリンクを貼っておきます。

おまけ

docker内のwp cliはコンテナに入らなくても操作できます。

# コンテナ名はdocker-compose psなどで確認してください。
docker exec -it local-wp_wp wp plugin status --allow-root

最後に

「Local by Flywheel」や最近登場したAutomatticの「Studio」も試してみましたが、DBへの接続やサーバーへのデプロイなどに満足できなかったので、結局元のDocker-Composeを使う方法に落ち着きました。

ちなみにこの環境は過去にQiitaで拝見したお二方の環境を取り入れております。この機会にお礼申し上げたいと思います。

Wordmoveはこちらに

MailCatcherはこちらの方が詳しく紹介されています。

誰かの手助けとなれば幸いです。

さて、自分のサイトづくりも頑張ります！