🐳 Docker × WordPress × Wordmove でローカル環境を構築する

  • URLをコピーしました!

はじめに

WordPress の開発環境、毎回どう構築していますか?

  • 「Dockerでサクッと立てたいけど、本番への移行も楽にしたい」
  • 「WordPressのテーマやプラグインを気軽に試したい」
  • 「開発するソフトウェアをなるべく増やしたくない」

そんな開発者におすすめなのが、Docker + Wordmove の組み合わせです。

この記事では、GitHub で公開されている elephantnode/docker-wp-localをカスタマイズしたFoxkeh33/kyoropress)を使って、ローカル環境を素早く立ち上げる方法を紹介していきます。

目次

使用するツールと構成

🐳 kyoropress

Docker Compose によって WordPress + Maria DB のローカル環境を即座に立ち上げる構成です。設定ファイルもシンプルで、カスタマイズしやすくなっています。またWordmoveコンテナを使用することで、WordPress の wp-content やデータベースを、本番・ステージング・ローカル間で同期できる便利なツールです。

SSHやrsync、SFTP、FTPなどをサポートしています。

❇️ 開発環境

  • MacOS Sequoia Ver.15.3.2
  • Docker Desktop Ver.4.40.0
  • Homebrew Ver. 4.4.23
  • Git Ver. 2.39.5 (Apple Git-154)
  • Sequel Ace Ver. 5.0.4
  • ターミナル

なお、本解説はMac環境を前提として説明します。

できるようになること

  • php.iniを使用してファイルのアップロードサイズを変更したい
  • Sequel Aceを使用してデータベース内の情報を確認したい
  • Wordmoveを利用して本番環境と同期を手軽に行いたい
  • フォームのメール送信テストをしたい(別記事で紹介予定)

などの機能が使えるようになります。

リモートリポジトリからクローン

Macのターミナルを起動し、任意のフォルダを作成後GitHubからリポジトリをクローンします。
ここではDocumentフォルダ内でクローンする手順で進めます。クローン完了後、kyoropressディレクトリができます。

【リモートリポジトリからのクローン】

$ cd Documents
$ git clone git@github.com:Foxkeh33/kyoropress.git

【リポジトリ構成】

kyoropress
├── certs                # SSL証明書を格納するディレクトリ
├── src                  # WordPressのソースコードを配置するディレクトリ
├── wordmove             # Wordmove関連の設定・スクリプト類
│   ├── Dockerfile       # Wordmove用のDockerイメージ定義
│   └── movefile.yml     # Wordmoveの設定ファイル(同期先情報など)
├── wordpress            # WordPress環境のDocker設定類
│   ├── Dockerfile       # WordPressコンテナ用のDockerイメージ定義
│   ├── php.ini          # PHP設定ファイル
│   └── ssl.conf         # SSL設定ファイル
├── .env                 # 環境変数定義ファイル(各種設定値を管理)
├── .gitattributes       # Git属性設定ファイル(改行コード管理など)
├── .gitignore           # Gitで無視するファイルを定義
├── docker-compose.yml   # コンテナ構成を定義するComposeファイル
├── LICENSE              # ライセンス情報
└── README.md            # プロジェクトの概要や使い方を記載した説明書

Wordmove の初期設定

.envファイルにプロジェクト名を設定する

はじめにプロジェクト名を設定します。ここでは例として kyoroというプロジェクト名にします。

# -------------------------------------------
# wordpress PROJECT_SETTING
# -------------------------------------------
# プロジェクト名
PROJECT_NAME=kyoro

# タイムゾーン(任意)
TIMEZONE=Asia/Tokyo

# mkcertで使う証明書名(ドットの前の部分)
CERT_NAME=

mkcertでSSL証明書を作成する

ローカル開発環境でHTTPSを使用するためには、mkcertを使用してSSL証明書を作成します。以下の手順で証明書を作成し、信頼できる証明書としてブラウザに認識させましょう。

mkcertのインストール

まずは、mkcertをインストールします。macOSは、Homebrewで簡単にインストールできます。

$ brew install mkcert

補足:Fire Foxを使用する場合は、以下のnssもインストールしてください。

$ brew install nss

ローカルCA(証明書認証局)の作成

mkcertコマンドは、ローカル用のCAを作成します。以下のコマンドを実行することでローカルで使用する証明書認証局が作成され、ブラウザで信頼されるようになります。

$ mkcert -install

ドメイン用証明書を作成

次に、localhostの証明書を作成します。certsディレクトリに移動後、以下コマンドを実行し、証明書ファイルを生成します。

$ cd ./certs
$ mkcert localhost 127.0.0.1

localhost+1.pem及びlocalhost+1-key.pem ファイル生成が実行されます。。

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"

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

It will expire on 6 August 2027 🗓

certsディレクトリ内に認証鍵と証明書ファイルが作成されます。これらをNginxやDockerの設定で使っていきます。

localhost+1.pem      #証明書ファイル(サーバ証明書、公開鍵が含まれる)
localhost+1-key.pem  #認証鍵ファイル(秘密鍵)

.envファイルを開き、上記で作成した証明書名を記述して上書き保存をします。

# -------------------------------------------
# wordpress PROJECT_SETTING
# -------------------------------------------
# プロジェクト名(ホスト名の前半)
PROJECT_NAME=kyoro

# タイムゾーン(任意)
TIMEZONE=Asia/Tokyo

# mkcertで使う証明書名(ドットの前の部分)
CERT_NAME=localhost+1

DockerコンテナのWordPress起動

docker-compose.ymlが保管されているディレクトリ内でDocker イメージをビルド(作成)のコマンドを実行します。

$ docker compose build --no-cache 

Dockerイメージのビルド後、Dockerコンテナを起動します。

$ docker compose up -d
[+] Running 6/6
 ✔ Network docker-wp-local_default   Created                                                             0.0s 
 ✔ Volume "docker-wp-local_db_data"  Created                                                             0.0s 
 ✔ Container develop_db              Started                                                             0.5s 
 ✔ Container develop_mailcatcher     Started                                                             0.5s 
 ✔ Container develop_wp              Started                                                             0.4s 
 ✔ Container develop_wordmove        Started 

動作確認

設定後にブラウザもしくは以下コマンドで表示されるか確認します

$ open https://localhost

WordPressのインストール画面が表示できました。

WordPressインストール画面が表示されずに真っ白の画面が表示された場合は、以前作成したDocker Imagesが残っている可能性があります。以下のリンク先を参考にDocker Imagesを削除してください。

この操作で、WordPressのデータベースもまっさらな状態になります。

# コンテナとボリュームを完全に削除
$ docker compose down -v

# 必要に応じて未使用ボリュームも削除(安全確認した上で)
$ docker volume prune

Sequel AceでローカルDBにアクセスする

WordPress開発でデータベースの中身を直接確認・編集したいときは、GUIツールを使うと便利です。
ここでは、mac向けの軽量MySQLクライアント「Sequel Ace」を使って、ローカル環境のDBに接続する手順を紹介します。

Sequel Aceをインストール

まずはMac App Storeから「Sequel Ace」をインストールします。

インストールが完了したら起動しておきましょう。

接続設定を行う

Dockerで立ち上げたWordPress環境に接続する場合、以下のように設定します。

💡 パスワードやデータベース名は .env ファイルに定義されている内容と一致している必要があります。

以下のように画面が表示されていれば問題ありません。

php.iniファイルを編集してアップロード制限を調整する

WordPressで画像やZIPファイルなどをアップロードする際、以下のようなエラーメッセージが出ることがあります。

このファイルはアップロードできません。ファイルサイズが大きすぎます。

これはPHPの設定ファイル php.iniで定義されている制限値に引っかかっている可能性が高いです。
ローカル環境で開発中でも、この制限を適切に調整しておくと快適です。

docker-wp-localディレクトリ → wordrpress → php.ini で設定することができます。

; アップロードできる1ファイルの最大サイズ(例: 64MB)
upload_max_filesize = 64M

; POSTリクエスト全体での最大サイズ(upload_max_filesize以上にする)
post_max_size = 64M

; スクリプトが使える最大メモリ(開発では512MなどでもOK)
memory_limit = 512M

次回の予告

次回はこの環境を活かして、Wordmoveを使って本番サーバーとデータを安全に同期する方法をご紹介する予定です。「ローカルで編集→本番に反映」や「本番の内容をローカルに引き込む」ワークフローを整えれば、WordPressの開発・運用がさらにスピードアップするはずです。お楽しみに!

あわせて読みたい
🐳 Docker × WordPress × Wordmove でKUSANAGIサーバーと同期する はじめに 前回の記事では、Dockerを使ってローカルにWordPress開発環境を構築し、Wordmoveの導入までを行いました。今回はその続きとして、ローカル環境と本番環境(Xse...

今回の環境構築にあたっては、以下の記事を大いに参考にさせていただきました。この場を借りて感謝申し上げます。

Qiita
自分のWordPressのローカル開発環境(Mac用)を紹介してみる - Qiita はじめまして 最近WordPressで個人のウェブサイトを作った(まだ構築中)のですが、出来たばっかりなので、誰も来ない。SNSで宣伝しようにもフォロワーさんイナイ。そんな...
push.tokyo
僕のWordPress×dockerのローカル開発環境の使い方を丁寧に紹介します はる WordPressのdocker開発環境用にカスタマイズしたので、その環境の使い方をできるだけ丁寧に紹介したいと思います。 ブログも放置してましたが、また頑張りたいと思っ...

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次