WordPress
Docker

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

More than 1 year has passed since last update.

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

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


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

WordPress公式リポジトリに掲載されている設定をもとに、ホスト側の公開用ポートを「8080」から「80」に変更したyamlファイルを用意します。

(初期設定の8080番ポートでWordPressを起動し、Simply Staticプラグインを利用したところ、静的ファイルの生成が確認できなかったため、80番ポートに変更しました)


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 にアクセスし、初期設定を行います。


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

初期設定が終わると、http://127.0.0.1/wp-admin/ から管理画面にアクセスできます。

管理画面左側のメニューから「プラグイン ⇒ 新規追加」画面に移動し、「Simply Static」プラグインをインストールします。


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

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

まずは、管理画面左側のメニューから「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


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