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

WordPressの [Simply Static](https://srd.wordpress.org/plugins/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 &mdash; WordPress Plugins](https://wordpress.org/plugins/simply-static/)


## 大まかな手順
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でインストールしました。

```bash
$ brew cask install docker
```

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

* [Get started with Docker for Mac - Docker](https://docs.docker.com/docker-for-mac/)


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

* [library/wordpress - Docker Hub](https://hub.docker.com/_/wordpress/)

```yaml: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ファイルをもとに、コンテナを起動します。

```bash
$ 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： インストールスクリプトの実行](https://wpdocs.osdn.jp/WordPress_%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB#.E6.89.8B.E9.A0.86_5.EF.BC.9A_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.AE.E5.AE.9F.E8.A1.8C)

#### プラグインをインストールする
初期設定が終わると、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ファイルが作成されていることが確認できます。

```bash
# ローカル
$ 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ディレクトリ」でローカルの同じディレクトリをマウントする

```yaml: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
```

更新内容を反映します。

```bash
$ 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は便利だなと思いました :)