StaticPress プラグインで静的 HTML を生成して Amazon S3 で公開してみる

大場裕喜

2014.02.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは大場です。

前回、前々回と以下の記事を紹介させていただきました。

今回は、上記の手順で作った環境から StaticPress プラグインを使って静的 HTML を生成して、Amazon S3 で公開する手順を試してみましたので紹介します。

WordPress で紹介される記事は、動的サイトとして公開されますが、StaticPress プラグインで静的 HTML を作成して Amazon S3 のホスティング機能で公開することで S3 のメリットを活かした堅牢で高可用性の Web ページを実現することができます。静的サイトに Amazon S3 を使うことのメリットは、以下の通りです。

データがなくならない（堅牢性99.9999）バックアップ不要
ハードウェア障害の心配不要
容量無制限
従量課金で 1ヶ月10円〜で非常に安価

などなど。

おこなった作業としては、以下の通りです。

パーマリンク設定
StaticPress プラグインのインストール
S3 バケットの準備と設定
s3cmd のセットアップ
コンテンツの同期

パーマリンク設定

StaticPress を使用する場合、パーマリンク設定は .html の拡張子になるように事前に準備が必要です。

WordPress の管理画面から［設定］-［パーマリンク設定］を選択します。

共通設定でカスタム構造にチェックを入れて、”/%postname%.html” を設定します。この設定により「投稿名.html」が記事へのリンクとなります。

設定変更後、記事のタイトルからのリンクを確認したところ Not Found のページが出てしまいました。

どうやら、URL の書き換えをおこなう「mod_rewrite」が正しく動作していない模様。。「mod_rewrite」を動作させるには、httpd.conf と .htaccess ファイルの設定が必要なようです。"こちら" の記事を参考に、それぞれ以下をおこないました。

■ httpd.conf

LoadModule rewrite_module modules/mod_rewrite.so に「#」がないことを確認

LoadModule rewrite_module modules/mod_rewrite.so

以下の記述がなかったため、ファイルの末尾に追記

<Directory "/var/www/html/wordpress">
    AllowOverride All
</Directory>

■ .htaccess

以下のとおり記述があることを確認 ^*1

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

上記の確認がとれたら、Apache を再起動します。これで無事に記事が正しくリンクしていることが確認できました。

StaticPress プラグインのインストール

WordPress の管理画面［プラグイン］-［新規追加］から「StaticPress」をインストールして有効化します。

S3 バケットの準備と設定

AWS 管理コンソールからバケットを作成します。

作成したバケットの Properties から Static Website Hosting を開いて、Enable web hosting にチェックを入れます。また、以下の通り Index Document と Error Document を設定して保存します。

Permissions から「Add bucket policy」ボタンを左クリックします。

Sample Bucket Policies を選択します。

Granting Permission to an Anonymous User のサンプルをコピーします。

Bucket Policy Editor でペーストした後、下記の bucket 部分を、作成したバケット名に変更して保存します。

s3cmd のセットアップ

WordPress サーバに SSH でログインして、以下のコマンドを実行します。

$ sudo yum --enablerepo=epel install s3cmd

以下のコマンドを実行して設定を進めます。Access key と Secret Key 以外は空設定で問題ありません。

$ S3cmd –configure

次にホームディレクトリ配下に作成される .s3cfg の中身を、使用するリージョンにあわせて編集します。以下は Oregon の場合の例です。

■ 編集前 bucket_location = US host_base = s3.amazonaws.com host_bucket = %(bucket)s.s3.amazonaws.com simpledb_host = sdb.amazonaws.com

■ 編集後 bucket_location = us-west-2 host_base = s3-us-west-2.amazonaws.com host_bucket = %(bucket)s.s3-us-west-2.amazonaws.com simpledb_host = sdb.us-west-2.amazonaws.com

リージョンとエンドポイントについては "こちら"のサイトで確認できます。

コンテンツの同期

WordPress の管理画面［StaticPress］-［StaticPress 設定］で以下を設定して「変更を保存」ボタンを左クリックします。

静的サイト URL には、S3で公開したいFQDN
静的サイト用に変換されたファイル郡の出力先ディレクトリ

WordPress の管理画面［StaticPress］から「再構築ボタン」を左クリックしてファイルが生成されるのを待ちます。

ファイルが生成されたら、静的ファイルが出力されたディレクトリに移動して、S3 とコンテンツの同期をおこないます。

$ cd /var/www/html/staticpress/
$ s3cmd put -r --acl-public $(pwd)/* s3://wp-test.asia

無事に静的サイトが確認できました。 ^*2

まとめ

ということで、WordPress のサイトから静的 HTML を生成して Amazon S3 で公開することができました。これによって、本記事の冒頭に記載したように Amazon S3 のメリットを活かして、安価でかつ堅牢で高可用性なサイトが運用できるのではないでしょうか。注意点としては、静的サイトになるのでコメントや検索機能などをそのまま用いることができません。これに関しては Facebook コメントであったり Google カスタムサーチなどで代替して実装するといった検討が必要になるそうです。

以上になります。