僕のWordPress×dockerのローカル開発環境の使い方を丁寧に紹介します

ウェブ制作
2021.02.27
はる
はる

WordPressのdocker開発環境用にカスタマイズしたので、
その環境の使い方をできるだけ丁寧に紹介したいと思います。

ブログも放置してましたが、また頑張りたいと思っているはるです！
何をやってたかというと、このブログ以外にアイドル情報サイトのWebサービスを作っていました。（それはまた、記事にしたいと思います）それ以外にも本業が忙しくなりあわわしてたら今になってしまいました。時間ほんと足りませんね…

今回は、WordPressのローカル開発環境をdockerで用意しましたので、それを紹介したいと思います。

すぐ使えるdockerローカル開発環境を用意しました

すぐ使える開発環境として、vccwがあると思います。
vccwならwordmoveが用意されていて簡単に本番環境との同期も行えて便利だと思います。
しかし、vccwは数年前に更新が停止されているので自前でdockerで作りたいと思いました。
それが使えるレベルにカスタマイズできたので紹介したいと思います。

用意したい要件

私が考えていた最強のローカル開発環境がどのようなモノかというと、

  • dockerでWordPressのローカル開発環境を用意したい
  • wordmoveでデータの同期を簡単にしたい
  • https(SSL証明書)の設定がされた状態で確認したい
  • メール確認もちゃんとできる
  • それらができるだけ簡単にしたい

これらができていることだと思います。

完成物

はる
はる

完成した開発環境をGithubで公開しています。

Githubに『wockerpress』という名前で公開しています。
厨二病の名付けが大好きな僕がWordPressとdockerの単語をかっこよく組み合わせていい感じの名前をつけました(　･`ω･´)ｷﾘｯ 深い意味はないヨ!

GitHub - blanket11/wockerpress: Local development environment for wordpress created with docker.
Local development environment for wordpress created with docker. - blanket11/wockerpress
github.com

参考記事

dockerはまだまだ入門レベルで下記の記事を参考に自分なりに使いやすいようにカスタマイズしました。

使い方の説明

はる
はる

この環境の使い方について説明していきたいと思います。

ローカル開発の起動

ローカル開発環境を設定ファイルを用意と編集していきましょう。

.env-example のファイルを .env に変更

$ cp .env-example .env

用意した.envをプロジェクトに合わせて編集

設定ファイルの.envは下記のような使われ方をします。
使う環境に合わせて設定します。
wordmoveの設定項目は本番環境の設定になるので慎重に設定してください！

ローカル項目説明
PROJECT_NAMEプロジェクト名を入力
dockerコンテナの接頭辞などに使われます
LOCAL_URLローカル開発環境URLを設定してください
例：https://localhost
LOCAL_DB_PORTローカルのDBのポートを指定
WP_WORKING_DIRWordPress本体のディレクトリを深くする場合変更してください。
指定しない場合は『 / 』のままにしてください。
もし、LOCAL_URLを『 https://localhost/wordpress/ 』にする場合、
『 /wordpress/ 』を指定してください。
wordmove項目説明
PRODUCTION_URL本番環境のURLを指定
例: https://push.tokyo
PRODUCTION_DIR_PATH本番サーバーのルートディレクトリのパスを指定
PRODUCTION_DB_NAME本番サーバーのデータベース名を指定
PRODUCTION_DB_USER本番サーバーのデータベースのユーザー名を指定
PRODUCTION_DB_PASSWORD本番サーバーのデータベースのパスワーズを指定
PRODUCTION_DB_HOST本番サーバーのデータベースのHOSTを指定
PRODUCTION_DB_PORT本番サーバーのデータベースのポートを指定
PRODUCTION_SSH_HOST本番サーバーのSSHログインのHOSTを指定
PRODUCTION_SSH_USER本番サーバーのSSHログインのユーザー名を指定
PRODUCTION_SSH_PORT本番サーバーのSSHログインのポートを指定

コンテナを実行

$ docker-compose up -d

上記コマンドでコンテナ実行します。

ブラウザで確認

コンテナ実行後、しばらくしてから http://localhost にアクセスします。

WordPressの初期設定画面開いたら完了です。

初回コンテナ実行時は、wordpressファイルなどをインストールしたり少し時間がかかるのでうまく表示されない場合、少し開けてから再度アクセスしてみてください。

もし、表示されなかったら…

establishing a database connection

と表示されてページが見れない場合、
wordpressコンテナのバージョンが変わったことで設定ができなかったようなので、一時対応として、wp-config.phpの『DB_NAME』『DB_USER』『DB_PASSWORD』『DB_HOST』『DB_CHARSET』『DB_COLLATE』下記のように設定することで一時対応が可能。

define( 'DB_NAME', 'wordpress');
define( 'DB_USER', 'root');
define( 'DB_PASSWORD', 'wordpress');
define( 'DB_HOST', 'database:3306');
define( 'DB_CHARSET', 'utf8');
define( 'DB_COLLATE', '');

これはバグなので、時間がある時対応します。(プルリク をいただけたらうれしいなぁチラチラ)

修正しました！ ( CLOSE: 初回 docekr 起動して 『establishing a database connection』と出てサイトが見れない)

SSLサーバー証明書(https)設定

次にローカル開発環境でhttpsでアクセスできるようにする場合は、SSLサーバー証明書の設定を行う必要があります。極力手間にならないようにカスタマイズしたので設定方法を紹介します。

homebrewの用意の説明は省きます。

mkcertで証明書を発行

mkcertを使えるようにhomebrewでインストールします。

これは初回だけです。他のプロジェクトでdocker環境を用意するときは省略してください。

homebrewでmkcertをインストール
$ brew install mkcert
homebrewでnssをインストール

mkcertだけでも問題ないですが、動作確認するブラウザがFirefoxの場合はnssを用意する必要があります。

$ brew install nss
local CAをインストール

local CAファイルは【/Users/your_user_name/Library/Application Support/mkcert】に生成されます。

$ mkcert -install

このプロジェクトの証明書を発行

certsディレクトリに移動
$ cd ./certs
証明書を発行します
$ mkcert localhost 127.0.0.1

シェルスクリプトを実行して、コンテナに反映

プロジェクトのフォルダの一番上の階層まで移動し、
コンテナに証明書を設定するスクリプトを実行します。

$ cd ../
$ sh ./scripts/ssl.sh

アクセス確認

httpsでアクセスできるか確認します。
https://localhost にアクセスして表示(wordpressの初期設置画面)されたら無事設定ができました。

wordmoveの使い方

wordmoveを使い、データの同期を行います。

その同期実行方法を説明します。

wordmoveコンテナにアクセス

下記コマンドの『wordmove_container_name』の部分を、wordmoveに使用しているコンテナーの名前に変更して実行してください。

$ docker exec -w /home/ -it wordmove_container_name /bin/bash

wordmoveコンテナ名の確認方法は、コンテナ実行中に

$ docker ps

をすると NAMEの欄で 『XXX_wordmove 』のようにと思うのでそれで確認するか、

.envファイルでPROJECT_NAMEに指定した部分が 『XXX_wordmove 』の『XXX』の部分になっていると思います。

SSH公開鍵認証を使用する場合

SSH公開鍵認証を設定しているサーバーにアクセスする場合は設定してください。

（パスワードでの認証の場合は『wordmoveを実行』まで飛ばしてください）

ssh-agentを使って設定をします。

ssh-agentを起動
$ ssh-agent bash
ssh-agentを登録

下記コマンドの『/home/.ssh/id_rsa』のパスは、あなたのパソコンの保存している鍵の保存場所に合わせて設定を変更してください。

$ ssh-add /home/.ssh/id_rsa

wordmoveを実行

wordmoveのコマンドはサーバーとの接続を行い、アップロードができてしまいます。
しっかりと理解して使うようにしてください。

データをローカルにpullする場合

次のコマンドでローカルの状態を本番に合わせることができます。

$ wordmove pull -e production --all
データをアップロードしたい場合

次のコマンドで本番の状態をローカルに合わせることができます。

$ wordmove push -e production --all

このコマンドを本番サーバーに使用するときはよく設定を確認してから利用してください。

メールチェックを行いたい場合

docker imageでmailhogというメールテストツールを用意してあります。
ローカル環境用にWordPressの設定が少し必要なのでその方法を紹介します。

WP Mail SMTP をインストール

SMTPが設定できるプラグインならなんでもいいですが、僕はこの『WP Mail SMTP』というプラグインが使い慣れているのでこのプラグインでの設定方法を紹介したいので、『WP Mail SMTP』をインストールして有効化してください。

ローカル環境のwp-config.phpに定数を追加

ローカル環境のwp-config.phpに定数を追加し、『WP Mail SMTP』に『mailhog』にメールが届くようにする設定指定します。

下記定数のコードをwp-config.phpの /* That's all, stop editing! Happy publishing. */ の後に追記してください。

define( 'WPMS_ON', true );
define( 'WPMS_SMTP_HOST', 'mailhog' );
define( 'WPMS_SMTP_PORT', 1025 );
define( 'WPMS_SSL', '' );
define( 'WPMS_SMTP_AUTH', false );
define( 'WPMS_SMTP_AUTOTLS', false );
define( 'WPMS_MAILER', 'smtp' );

meilhogにアクセス

ブラウザで http://localhost:8025/ または https://localhost:8025/ にアクスするとメールが確認できるmeilhogのダッシュボード画面が表示されると思います。メール送信されるとメールが確認できると思います。

SQLのバックアップ

現在のローカル環境のSQL状態をバックアップしたり、そのバックアップしたものを読み込む方法を説明します。

SQLファイルのエクスポート

現在のローカル環境のSQL状態をバックアップしたい場合、
下記コマンドのように、dump.shファイルを実行すると、「dump.sql」という名前の「sql」ディレクトリにSQLファイルがエクスポートされます。

$ sh ./scripts/dump.sh

SQLファイルのインポート

エクスポートしたファイルをインポートする方法です。
下記コマンドのように、import-sql.shファイルを実行して「dump.sql」ファイルを読み取り、SQLをインポートします。

$ sh ./scripts/import-sql.sh

さらに細かい設定

はる
はる

次は、ちょっと細かい設定がしたい場合の設定です。
必要があるときに設定してください。

wordmoveの細かい設定

wordmoveコマンドはサーバーに接続します。使うときは充分注意して欲しいのですが、ちゃんと使うとなると、WordPressの構成によっては設定ファイルをカスタマイズする必要があります。

その設定ファイルは、config/movefile.yml ファイルを編集してください。

同期ファイルの除外

設定ファイルには、exclude の設定があります。wordmove pull -e production --allコマンドなどで、同期する時の除外を指定できます。pullならいいですが、pushするときにまずいことにならないように確認し設定した方がいいと思います。

初回起動でダウンロードされるWordPressのバージョンを指定したい

docker-compose.yml ファイルを変更します。

  wordpress:
    depends_on:
      - database
    image: wordpress:latest

image: wordpress:latest となっている部分の latest は最新バージョンを指定しています。ここをダウンロードしたいバージョンを指定すればOKです。

例

  wordpress:
    depends_on:
      - database
    image: wordpress:5.8.0

うまくいかないとき

wordmoveの設定方法に注意

wordmoveの使用上設定するルールがあったりします。
動かない現象や注意点を他の記事でまとめています。どうしても解決できない時は、その記事も参考にしてみてください。

wordmoveを使うときの注意点を日々まとめていく用の記事
はる こんにちは。はるです。 wordmoveを使うようになり、wordmoveの癖やルールをこの記事でまとめていきます。記事を書いた後も、何か見つけたらこの記事に更新していきます。 wordmoveとdockerの組み合わせのローカル開発...
push.tokyo
2021.03.16

最後に

参考記事を元に、自分が使いやすいようにいろいろ追加し使いやすいようにしたdocker環境の使い方をまとめました。何か他にも便利にしたくなったらgithubのリポジトリをアップデートしたり、この記事も更新していきたいと思います。

タイトルとURLをコピーしました