Docker上でWordPressの静的ファイルジェネレータを使ってみる

WordPressの Simply Static というプラグインを検証するために、MacのDocker上にWordPressコンテナを立て、投稿記事を静的ファイル郡として出力してみました。
その際の手順になります。

環境

• macOS Sierra 10.12.1
• Docker for Mac 1.12.3

Simply Staticプラグインについて

WordPressというブログソフトウェア用プラグインの1つです。
ブログの投稿記事を静的ファイルに変換することで、WordPress本体とサイトを分けたり、スピード面でのメリットがありそうです。

Simply Static is a static site generator for WordPress that helps you create a static site that you can serve separately from your WordPress installation.

This provides a couple benefits. One, this allows you to keep WordPress in a secure location that no one can access but you. Two, your static site is going to be really, really fast.

Simply Static — WordPress Plugins

大まかな手順

1. Docker for Macをインストールする
2. docker-compose.ymlをもとにdocker-compose upでコンテナを起動する
3. WordPressの初期設定を行い、管理画面からSimply Staticプラグインをインストールする
4. Simply Staticプラグインを使って、静的ファイルを生成する
5. 生成した静的ファイルをnginxコンテナと共有する

詳細な手順

1. Docker for Macをインストールする

今回はHomebrewでインストールしました。

$ brew cask install docker

また、公式ドキュメントにインストール方法が掲載されています。

• Get started with Docker for Mac - Docker

2. docker-compose.ymlをもとにdocker-compose upでコンテナを起動する

WordPress公式リポジトリに掲載されている設定をもとに、ホスト側の公開用ポートを「8080」から「80」に変更したyamlファイルを用意します。
（初期設定の8080番ポートでWordPressを起動し、Simply Staticプラグインを利用したところ、静的ファイルの生成が確認できなかったため、80番ポートに変更しました）

• library/wordpress - Docker Hub

docker-compose.yml

version: '2'

services:

  wordpress:
    image: wordpress
    ports:
      - 80:80 # "8080:80" から "80:80" に変更
    environment:
      WORDPRESS_DB_PASSWORD: example

  mysql:
    image: mariadb
    environment:
      MYSQL_ROOT_PASSWORD: example

yamlファイルをもとに、コンテナを起動します。

$ docker-compose up -d
Creating network "test_default" with the default driver
Creating test_mysql_1
Creating test_wordpress_1

# イメージを確認
$ docker images
REPOSITORY            TAG                 IMAGE ID            CREATED             SIZE
mariadb               latest              05a32751fb4d        6 days ago          389.9 MB
wordpress             latest              ee397259d4e5        2 weeks ago         420.1 MB

# コンテナを確認
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
9e18d3582a53        wordpress           "docker-entrypoint.sh"   27 seconds ago      Up 25 seconds       0.0.0.0:80->80/tcp   test_wordpress_1
47f7d167d24b        mariadb             "docker-entrypoint.sh"   27 seconds ago      Up 25 seconds       3306/tcp               test_mysql_1

# ネットワークを確認
$ docker network ls
NETWORK ID          NAME                   DRIVER              SCOPE
55846db2ef39        test_default           bridge              local

3. WordPressの初期設定を行い、管理画面からSimply Staticプラグインをインストールする

初期設定を行う

コンテナを起動した時点で、データベースなどの設定を含むwp-config.phpというファイルは生成済みとなります。
ブラウザで http://127.0.0.1/wp-admin/install.php にアクセスし、初期設定を行います。

• WordPress のインストール - WordPress Codex 日本語版 - 手順 5： インストールスクリプトの実行

プラグインをインストールする

初期設定が終わると、http://127.0.0.1/wp-admin/ から管理画面にアクセスできます。
管理画面左側のメニューから「プラグイン ⇒ 新規追加」画面に移動し、「Simply Static」プラグインをインストールします。

4. Simply Staticプラグインを使って、静的ファイルを生成する

WordPressをインストールすると、「サンプルページ」という固定ページが初期設定で存在します。この投稿を対象に静的ファイルの生成を確認します。

• http://127.0.0.1/sample-page/

まずは、管理画面左側のメニューから「Simply Static ⇒ Settings」画面に移動し、プラグインの設定を行います。

• 「htmlファイル内のリンクを相対パスで出力する、生成したファイルをサーバーのローカルディレクトリに出力する」という設定

タブ	設定	値
General	Destination URLs	Use relative URLs
	Delivery Method	Local Directory
	Local Directory	/var/www/html/static/
Advanced	Additional URLs	http://127.0.0.1/sample-page/

設定を終えた後、「Simply Static ⇒ Generate」画面に移動し、「Generate Static Files」ボタンを押します。

• WordPressコンテナにログインし、Local Directoryで指定したパスを見ると、「サンプルページ」のhtmlファイルが作成されていることが確認できます。

# ローカル
$ docker exec -it test_wordpress_1 env TERM=xterm bash

# コンテナ
$ cd /var/www/html/static/sample-page/
$ ls
feed  index.html

• ブラウザで http://127.0.0.1/static/sample-page/ にアクセスすると、 http://127.0.0.1/sample-page/ と同じ内容が確認できます。

5. 生成した静的ファイルをnginxコンテナと共有する

docker-compose.ymlを以下のように書き換えます。

• オフィシャルリポジトリのnginxを追加し、「WordPressコンテナの静的ファイルの生成先」と「nginxコンテナのnginxのrootディレクトリ」でローカルの同じディレクトリをマウントする

docker-compose.yml

version: '2' 

services:

  nginx:
    image: nginx
    ports:
      - "8080:80"
    volumes:
      - "./.data/html:/usr/share/nginx/html/"
    environment:
      - NGINX_HOST=foobar.com
      - NGINX_PORT=80

  wordpress:
    image: wordpress
    ports:
      - "80:80"
    volumes:
      - "./.data/html:/var/www/html/static/"
    environment:
      WORDPRESS_DB_PASSWORD: example

  mysql:
    image: mariadb
    environment:
      MYSQL_ROOT_PASSWORD: example

更新内容を反映します。

$ docker-compose up -d

ローカルをマウントしたことで、先ほど生成した静的ファイルは参照されなくなりました。
WordPressの管理画面 http://127.0.0.1/wp-admin/ から再びSimply Staticプラグインで静的ファイルを生成すると、以下のページが閲覧できるかと思います。

ページ	URL
WordPressごしに見たサンプルページ	http://127.0.0.1/sample-page/
WordPressコンテナ上の静的ファイル	http://127.0.0.1/static/sample-page/
nginxコンテナ上の静的ファイル	http://127.0.0.1:8080/sample-page/

以上です。
プラグインの検証や、プラグインを利用した複数サーバー間の連携を検討する際にdockerは便利だなと思いました :)