概要

何ができるのか

WordPressの「StaticPress S3」プラグインを使うことで、WordPressサイトの静的コンテンツをAmazon S3でWebホスティングすることができます
WordPressは静的コンテンツを吐き出すだけなので、サーバスペックは最低限でOKです
イベントサイトなどの永代供養に最適です
メールフォームなどPOSTを伴うコンテンツやGetによる検索クエリは利用できません。CloudFrontを利用しましょう
WordPressサイトをCloudFrontで配信する

＜参考＞JAWS-UG京都第5回勉強会登壇スライド
ヤフー砲も怖くない!? WordPressとS3で落ちないコーポレートサイトを立ち上げよう

前提条件

WordPressのインストールが完了していること。本手順は、AMIMOTO AMI(Apache HTTPD PHP7)の環境が前提となっていますので、他の環境では期待通りの動作をしない可能性があります
http://qiita.com/Ichiro_Tsuji/items/88f9009f80f3439ad9fa
WordPressサーバにSSHでアクセスできること
S3のバケットがWeb公開できる状態になっており、APIアクセス用のKeyが取得できていること
http://qiita.com/Ichiro_Tsuji/items/c174d580587a622d3358
手順中に登場するFQDN(サイトのURL)は下記の通りです。ご自分の環境に合わせて読み替えて下さい

Wordpressサイト    -> wp.jaws-ug.tk
S3バケットのWeb公開 -> s3.jaws-ug.tk

独自ドメインをもっていない場合は下記の通り読み替えて下さい

Wordpressサイト    -> WordPressサーバのPublic DNS
S3バケットのWeb公開 -> S3バケットのEndpoint

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

StaticPress S3プラグイン

WordPressサーバにSSHでアクセスし、下記コマンドを実行する
※ SSH接続できない場合はこちら
※ i-xxxxxxxxは、AMIMOTO AMIインストール時に指定したインスタンスID。i-まで入力してTabキーで補完してもよい

$ cd /var/www/vhosts/i-xxxxxxxx/wp-content/plugins
$ sudo git clone https://github.com/megumiteam/staticpress-s3.git
$ sudo chown -R nginx:nginx staticpress-s3

StaticPressプラグイン

WordPressダッシュボードを開く
[プラグイン] -> [新規追加]
「staticpress」で検索し、[今すぐインストール]をクリックする

プラグインの有効化／停止

[プラグイン]をクリックする
Nginx Cache Controllerの[停止]をクリックする
StaticPressの[有効化]をクリックする
StaticPress S3の[有効化]をクリックする

各種設定

設定中のwp.jaws-ug.tkは、自分のWordPressサイトアドレスに読み替えてください。

リバースプロキシキャッシュの削除

WordPressサーバにSSHでアクセスし、下記コマンドを実行する

$ sudo rm -rf /var/cache/nginx/proxy_cache

コード修正

WordPressサーバにSSHでアクセスする

class-S3_helper.phpの修正

$magic_fileのパスをAMIMOTO環境に合わせて修正します。
※ i-xxxxxxxxは、AMIMOTO AMIインストール時に指定したインスタンスID。i-まで入力してTabキーで補完してもよい

$ cd /var/www/vhosts/i-xxxxxxxx/wp-content/plugins/staticpress-s3/includes
$ sudo cp class-S3_helper.php class-S3_helper.php.org
$ sudo vim class-S3_helper.php

class-S3_helper.php

/*188行目あたり
$magic_file = '/usr/share/misc/magic'; 
をコメントアウトまたは削除し、追記する*/

$magic_file = '/usr/share/percona-server/magic';

class-static_press.phpの修正

画像つきの投稿を新規作成するとうまく動かない事象への対処です。

$ cd /var/www/vhosts/i-xxxxxxxx/wp-content/plugins/staticpress/includes
$ sudo cp class-static_press.php class-static_press.php.org
$ sudo vim class-static_press.php

class-static_press.php

/*730行目あたり
                        if (is_wp_error($permalink))
                                continue;
の後に追記する*/

if (preg_match('/.*\.html\/.*/', $permalink, $m)) {
                                continue;
}

パーマリンクの設定

[設定] -> [パーマリンク設定]
カスタム構造を選択し、/%postname%.htmlを入力する
[変更を保存]をクリックする

StaticPress S3の設定

StaticPress設定を開く
静的サイトURLにS3バケットのWeb公開URL(独自ドメインをもっていない場合は、S3バケットのEndpoint)を入力する
出力先ディレクトリの最後尾にstatic/を追加する
[設定を保存]をクリックする
S3バケットのIAM Access Keyを入力し、リージョンを選択する
※ 東京リージョンはAP_NORTHEAST_1
[変更を保存]をクリックする
S3 Bucketが選択できるようになっているので、同期先のバケットを選択する
[変更を保存]をクリックする

記事を投稿する

管理画面から新規記事を投稿します。写真入りの記事が望ましいです。

コンテンツを同期する

[StaticPress] -> [再構築]
[終了]と表示されたら同期完了

■「エラー！」と表示された場合のトラブルシューティング
・class-S3_helper.phpの修正部分を見直す
・StaticPress S3の設定を見直す
・S3バケットのIAM Access Keyを作りなおす
・サーバのstaticディレクトリを削除する(次項参照)

S3バケットのWeb公開URLにアクセスしてブログサイトが表示されることを確認する

コンテンツを更新する

記事の投稿など、コンテンツを更新した際は都度「再構築」を実行する必要があります。
ただし、テーマの変更など大きくコンテンツが変更された場合など、同期がうまくいかず「エラー！」と表示されることがあります。
その時は、下記コマンドでサーバのstaticディレクトリを削除してから「再構築」を実行してみましょう。
※ i-xxxxxxxxは、AMIMOTO AMIインストール時に指定したインスタンスID。i-まで入力してTabキーで補完してもよい

$ sudo rm -rf /var/www/vhosts/i-xxxxxxxx/static

WordPressサーバを停止してみよう

WoudPressサーバを停止してもS3バケットのWeb公開URLに正常にアクセスできれば、落ちないWebサイトの完成です！(ブラウザキャッシュの影響を排除するために別のブラウザを使って確認した方が良いでしょう) もし、画像等一部コンテンツが欠落するようなら、Webページのソースを調べて、オリジンの絶対パスの記述がないか確かめます。
※ EC2でElasticIPをアサインしていない場合、サーバ停止 -> 起動でグローバルIPが変わりますので注意して下さい。IPが変わってしまった場合は、DNSのレコードを修正する必要があります

サーバの停止

Elastic IP(固定IP)を設定していない場合はIPアドレスが変わります

AWS ConsoleでEC2を開く
左ペインの[Instances]をクリックする
停止するインスタンスの上で右クリック -> [Instance State] -> [Stop]
※ 起動する場合は[Instance State] -> [Start]
[Yes, Stop]をクリックする

WordPress + StaticPress S3で静的WebサイトをS3でホストする

概要