WordPressのキレイなテーマ開発環境をDockerで整えた

2020年5月14日

こんにちは，ぎいとです．
現在利用しているWordpressのテーマはLightningという無料公開されたテーマなのですが，~~どうも好きになれないので，~~せっかくなら自分で作ってみたいと思いまして．
もちろんこのサイトを実験台にしてもいいんですがそれはあまりスマートではないですし，危ないので専用の開発環境を構築しました．お察しの通りDocker-Composeです．

毎度のことながらできるだけ環境は汚したくないので，今回もそれを第一に構築していきます．とりあえず構築したい方のために前半は説明省略．後半で何をしているのか書いていきます．これも毎度のことながら説明が下手で長いです．

はりきっていきましょう．

事前準備

とりあえずDockerとDocker-Composeのインストール

Ubuntuを例にやっていきますが，MacならHomebrewなどと適宜読み替えていきましょう．
まずはインストール，sudoがなくても実行がきるように権限を付与，最後に動作確認．

#  docker.ioのインストール
$ sudo apt-get install docker.io
#  docker.searviceを起動できるようにする
$ sudo systemctl enable --now docker
#  dockerを利用できる権限をユーザに付与
$ sudo usermod -aG docker $(whoami)
#  docker-composeのインストール
$ sudo apt-get install docker-compose

#  再起動
$ reboot

#  確認
$ docker --version
$ docker run --rm docker/whalesay cowsay 'Hello, World!'

WordPressのテーマ開発環境の構築

まずは作業ディレクトリを作成します．名前はなんでもいいですがここではwpthemeとしています．このディレクトリの中に開発環境の全て（できるだけ）を詰め込んでいきます．

$ mkdir wptheme
$ cd wptheme

必要ファイルを作成

Dockerfileとdocker-composeを作成していきます．Wordpressのみ自らビルドして利用するのでDockerfileが必要です．ここではDockerfile-wpとして作成しています．

FROM wordpress:latest

RUN apt-get update
RUN apt-get install -y wget unzip --no-install-recommends

WORKDIR /tmp/
RUN wget https://downloads.wordpress.org/plugin/wp-multibyte-patch.latest-stable.zip
RUN wget https://downloads.wordpress.org/plugin/contact-form-7.latest-stable.zip

RUN unzip './*.zip' -d /usr/src/wordpress/wp-content/plugins 

RUN apt-get clean
RUN rm -rf /tmp/*

RUN chmod 757 /usr/src/wordpress/wp-content/themes

WORKDIR /var/www/html

次にdocker-compose.ymlファイルを作成します．次の内容を書き込みましょう．

version: "3"

services:
    wordpress:
        build:
            context: .
            dockerfile: Dockerfile-wp
        image: wordpress:dev-theme
        container_name: "wp-wptheme"

        ports:
            - "8080:80"
        depends_on:
            - db
        environment:
            WORDPRESS_DB_HOST: "db:3306"
        env_file: ".env"
        volumes:
            - "./.data/wordpress:/var/www/html"
    db:
        image: mysql:5.7
        container_name: "db-wptheme"
        env_file: ".env"
        volumes:
            - "./.data/database:/var/lib/mysql"

環境を定義した.envファイルを作成します．内容は以下のとおり．

WORDPRESS_DB_NAME=wpdb
WORDPRESS_DB_USER=wpuser
WORDPRESS_DB_PASSWORD=hogehoge

MYSQL_ROOT_PASSWORD=irohanihoheto
MYSQL_DATABASE=wpdb
MYSQL_USER=wpuser
MYSQL_PASSWORD=hogehoge

こちらも変数をそれぞれ適当につけていますが，対応する環境変数については同じにします．例えばWORDPRESS_DB_NAMEが”moyashi”であれば，MYSQL_DATABASEも”moyashi”にします（多分）．

ここまでできれば準備は完了です．初回のみイメージのビルドから．次回以降はbuidが不要になります．

#  イメージのビルド
$ docker-compose build

#  コンテナの作成
$ docker-compose up -d

ブラウザを起動して，http://localhost:8080/にアクセスしてみます．画面に従いWordpressのインストールを行いましょう．

実はDockerfile-wpでいくつかプラグインをインストールしていますが（後述），有効化されていないので有効化します．

最後に以下のコマンドでシンボリックリンクを作成しましょう．

#  シンボリックリンクを作成
$ ln -s ${PWD}/.data/wordpress/wp-content/themes ${PWD}/themes

samplethemeというテーマ開発を行う場合には次のようにすればOKです．
なおWordpressはテーマディレクトリ内に，index.php，functions.php，style.css，screenshot.pngが存在しないとテーマとして認識されないため，ブラウザから確認するには少なくともこれらのファイルが必要なようです．

$ mkdir themes/sampletheme
$ cd themes/sampletheme
#  ここにindex.phpなどを書いていく

インストールは終わり．お疲れ様でした．

参考：

構築のポイント

開発環境は上の通りで完成です．ここからは何をしているのかの解説になります．といってもざっくりです．
まずはDockerfile-wpから．

Dockerfile-wp

FROM wordpress:latest

RUN apt-get update
RUN apt-get install -y wget unzip --no-install-recommends

WORKDIR /tmp/
RUN wget https://downloads.wordpress.org/plugin/wp-multibyte-patch.latest-stable.zip
RUN wget https://downloads.wordpress.org/plugin/contact-form-7.latest-stable.zip

RUN unzip './*.zip' -d /usr/src/wordpress/wp-content/plugins 

RUN apt-get clean
RUN rm -rf /tmp/*

RUN chmod 757 /usr/src/wordpress/wp-content/themes

WORKDIR /var/www/html

基本的なプラグインはビルドの時点でインストールする

WORKDIR /tmp/　以下ではビルド段階でのプラグインのインストールを行っています．Wordpressのプラグインはダウンロードして解凍して決まった場所( wp-content/plugins/ )におくだけみたいです．
この時点では有効化されていないため，ブラウザから有効化します．
結局ブラウザからインストールもできるのでわざわざここでインストールすることもないですが，Contact Form 7など定番のプラグインを記載したらいいと思います．
“latest-stable”には具体的なバージョンの指定も可能．
参考: 日本語Doc.Wordpress

chmodはややこしい話になる

重要なのがchmodコマンドです．themesディレクトリへの書き込み権限を開放します．
Macでの構築時には，コンテナ内のユーザとホストOSのユーザが一致するようですが，筆者のUbuntu環境では一致しませんでした．コンテナ内の基本的なディレクトリはwww-dataというユーザが作成したことになっています．
そのためこの記事ではホストユーザ( www-dataではなく，グループも別のユーザ）が書き込めるように権限を変更します（757はやり過ぎかもしれない）．

ここまでするくらいなら普通はマウントするんですが，筆者の環境では何故かインストール時の言語選択ができなくなりました．また，マウントせずに日本語でインストール後，themesディレクトリをマウントした場合でも何故か言語が英語になってしまいます．
筆者の場合は，Ubuntuの言語環境を英語としているのが影響しているかもしれません．

上記の理由からthemesディレクトリを直接マウントするのではなく，シンボリックリンクを作成する形をとっています．前提としてマウントしているディレクトリが存在しているのですがそちらは後述．

捕足:
WordPressコンテナを作成後であっても，WordPressのインストール前の場合にはコンテナ内に/var/www/html (WordPressのデータ保存場所）が存在していません．
WordPressのインストール後に/usr/src/wordpressを基に作成されているようです．そのため，Dockerfileのビルド段階では/usr/src/wordpress/の下にある/wp-content/themes の権限を書き換えています．

docker-compose.yml

version: "3"

services:
    wordpress:
        build:
            context: .
            dockerfile: Dockerfile-wp
        image: wordpress:dev-theme
        container_name: "wp-wptheme"

        ports:
            - "8080:80"
        depends_on:
            - db
        environment:
            WORDPRESS_DB_HOST: "db:3306"
        env_file: ".env"
        volumes:
            - "./.data/wordpress:/var/www/html"
    db:
        image: mysql:5.7
        container_name: "db-wptheme"
        env_file: ".env"
        volumes:
            - "./.data/database:/var/lib/mysql"

どちらも作業用に作成したwpthemeディレクトリに，そのデータの本体をマウントします．
コンテナが削除された場合通常はコンテナ内のデータも削除されますが，ホストOS上にマウントすることでデータを保持することが可能です．毎回インストールからやりなおしなんてことにはなりません．

service: wordpress

Dockerイメージとしてwordpress:dev-themeを作成しています．またコンテナ名も常に指定するよう設定しています．
depends_onに”database”に，service: dbをservice: databaseに変更するとWordpressとMySQLの接続がうまくいかなくなる現象が発生しました（1度だけなので別の要因があるかもしれません）．そのためこれらの項目はdbとしておく方が良さそうです．

マウントするボリュームは.data/wordpressを指定します．
確認したところ，WordPressイメージは（指定がなくても）コンテナの作成時にDocker管理下に新しいボリュームが作成されていく仕様のようです．これを相対パスでwptheme以下にボリュームを作成するよう上書きします．
マウントディレクトリはコンテナ内の/var/www/htmlであり，wordpressのデータが保持されています．このディレクトリ以下にthemesディレクトリが存在しているため，先述のようにシンボリックリンクの作成が可能となっています．

service: db

MySQLのバージョンは5.7を選択．MySQLのサポートが2020年10月に終了予定ですので注意．迷ったらMariaDBの最新版でいいでしょう．
MySQL 8.0.4以降では認証プラグインの変更に伴い追加で設定が必要になります．ここでは触りません．

作成するボリュームはwordpressと同様に.data/に指定します．こちらもwordpressイメージ同様，Docker管理下に新しいボリュームが作成されていく仕様．
マウントディレクトリはコンテナ内の/var/lib/mysql．MySQLのデータを保持しているようです．

参考: 日本語Doc.Docker

どちらのデータも作業ディレクトリwptheme以下（.data/）に置いておきます．
これらのデータがDocker管理下にあると「あれ，これなんのデータだっけ．まぁ消すか．」みたいなことになりかねません．消してしまった場合には開発していたテーマが吹っ飛びます．
WordPressのテーマ開発ディレクトリ直下にあればそんなことにはならないですね．

Docker管理下に作成されたボリュームの確認方法は以下．

$ docker volume ls

筆者は「Docker管理下に新しいボリュームが作成されていく仕様」に気づかず構築の実験を行っていたため結構な数のボリュームが作成されていました．

参考:Docker、ボリューム(Volume)について真面目に調べた

まとめ

必要なファイル：

docker-compose.yml
Dockerfile-wp
.env

最終的なディレクトリ構造：

$ tree
.
├── .data
│   ├── wordpress/....
│   └── database/....
├── Dockerfile-wp
├── docker-compose.yml
├── .env
└── themes -> ./ ..... /wp-content/themes

.envについてはほとんど説明していません．筆者はMySQLとかサッパリ人間なのでちょっとテキトー気味です．各自自習でお願いします．

今日のちなみに（迷走）

スクラップ&ビルドが簡単にできるので便利です．
筆者は全然知らない言語でWordpressをインストールしてみたら壮大な感じに仕上がりました．

これは何語なんでしょうね．日本語と英語も混ざるカオスな環境の完成．だからどうした．

コメントお待ちしています〜

Follow me!