dockerでGutenbergのブロック開発の環境を整える

2019 4/19

2018.12.08 2019.04.19

今まで使ってきたWordPressのClassic Editorの開発サポート終了が2020年までと発表された今、新たな新エディターであるGutenbergに切り替えざるを得なくなりました。

そこでGutenbergのブロック開発をするために、開発環境を一新しました。
今までVVVを使用してきましたが、dockerで初開発です。

dockerで開発環境を整えた経緯

早めに切り替えて慣れた方が良いとは思っているものの、投稿を半自動化して、パソコンで管理画面から投稿する事がなくなった私は、Gutenbergを使う意味があるのだろうか？と自問自答してしまう。

パソコンで投稿する時は、Add Quicktagの恩恵を受けていたので、それに変わるものと言ったら、カスタムブロックを作るしかありません。

そうなると、早々に開発環境を整えて、新しい技術も覚えなくてはいけなくなってしまいました…非常に面倒💧

この面倒臭がりな私が最短でGitenbergの開発環境を整える方法を記載したいと思います。

事前の開発環境の準備

今までWordPressのプラグイン開発と言ったら、開発環境を整える為にVVV（Varying Vagrant Vagrants）かVCCWを使用していたと思います。

※VCCWは開発者がWordPressの開発から引退するという事で衰退することになります。VCCWを使用している人は、今後VVVに移行することになると思います。

Gutenbergでブロックを作るための例的なgutenberg-examplesが上がっていたので読んでみると、ここに来てWordPressのGutenbergの推奨開発環境がdockerになっていることに気づきました。

え？docker？

dockerって、どちらかというとデザイナー向けじゃなかった？

しかし、Gutenbergのサンプルコードを扱う上で、dockerと書いてある以上、それに従わざるを得ない。

今後、WordPressの開発環境はdockerの流れになるんじゃないかと思っています。

確かに…VVV重いですからね…

という事で、Gutenbergのブロックを作る前提はdocker開発環境を整えるということになります。

dockerをインストールするにあたって参考にしたサイト

色んなサイトでdockerでWordPressの開発環境を整える方法が紹介されていましたが、どれも情報が古かったので、上手くインストール出来ず。

やはりここはDocker 公式サイトに則ってやる方が良いです。

docker-compose.ymlを読み込む方法でないと上手くWordPressをローカルで表示するまでに辿り着けませんでした。

参考サイトを見ても良いですが、docker-compose.ymlのバージョン記載が3.3（2018年11月現在）と記載されているのを確認してからにしましょう。

ホスト上のディレクトリをマウントして開発環境を整える

VVVと勝手が異なるので、フォルダ階層はどこかな？と一瞬探してしまいました（汗）

よくよく考えて見ればdockerは仮想なので、docker exec -it コンテナ名 bashとコマンドで打って、cdで階層移動しましょう。

でも面倒臭いですよね？！

そこで、既にVVVで作った開発環境フォルダとマウントする方法があります。

docker公式サイトに記載されています。

データ・ボリュームとしてホスト上のディレクトリをマウント

※私は用心を取って一応別フォルダにしましたが、問題なさそうだったらVVVの開発環境フォルダとマウントしようと思います。

docker run -v /Users/<パス>:/<コンテナ内のパス> ...

と書いているので、テーマフォルダとプラグインフォルダをマウントしたいなら下記の記述になると思います。
私の場合は、ユーザー名直下にlocal-wordpressフォルダを作って、その中にプラグインフォルダとテーマフォルダを入れました。

docker run -v /Users/ユーザー名/マウントしたいトップフォルダ/plugins/:/var/www/html/wp-content/themes/
docker run -v /Users/ユーザー名/マウントしたいトップフォルダ/themes/:/var/www/html/wp-content/plugins/

マウントできると、仮想からいじらなくても、local-wordpressフォルダにプラグインを入れれば自動的にdocker側が認識してくれますし、ビルドすれば自動的にdockerの仮想サイトで変更場所が反映されています。

便利！

ちなみにdocker-compose.ymlには下記が記述されています。


version: '3.3'

services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress

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: wordpress
volumes:
- ./themes/:/var/www/html/wp-content/themes/
- ./plugins:/var/www/html/wp-content/plugins
volumes:
db_data: