こんにちは、CSチームの坂本です。
MovableTypeでは静的なHTMLページを生成する機能がありますが、WordPressの場合はデフォルトではそういった機能はありません。
WordPressでも静的なHTMLページを生成できれば、信頼性の高いS3を利用することができると思い方法を調べてみました。
その結果「Really Static」というWordPressのプラグインの利用で静的なHTMLページの生成が可能でしたので、今回は「Really Static」を利用してEC2上のWordPressをS3で公開するまでの流れを説明したいと思います。
▼ S3で公開したWordPressのトップページ
| Really Static | MovableTypeのように、静的なHTMLページを生成してくれるWordPressのプラグイン |
| S3Sync.rb | EC2からS3へのリリースに利用したRubyのプログラム |
※全て静的HTMLページで公開しますので、「コメントを受け付けない、検索フォームを利用しない」など、動的な部分は動作しなくてもよいブログであることが前提となります。
※以下の手順は既にEC2上でWordPressが動作していることを前提としています。
目次
- 「Really Static」のインストール・有効化
- 「Really Static」の設定
- 「S3Sync.rb」の準備
- AWS Management ConsoleでAmazon S3の準備
- S3Sync.rbでS3へリリース
- S3で公開
1. 「Really Static」のインストール・有効化
まずはWordPressの管理画面から「Really Static」をインストールして、有効化してください。
※管理画面からのインストール方法は、以下を参考にしてください。
WPtouchでスマートフォン対応のブログを簡単構築
2. 「Really Static」の設定
次にWordPressの管理画面から「Really Static」の設定を行います。
▼ 「Really Static」の設定画面
以下、今回必要な最低限の各タブの設定です。
設定 > Really Static > Source
url to wordpressinstalltion :
※EC2上のWordPressのURLを設定します。example.comは仮のURLです。
url path to the actuall used templatefolder :
※EC2上のWordPressのテーマのURLを設定します。
上記設定後、「save」ボタンを押します。
設定 > Really Static > Destination
ラジオボタンの「work with local filesystem internal filepath from to cachedfiles」を選択します。
work with local filesystem internal filepath from to cachedfiles :
※静的なHTML生成場所を指定します。
Domainprefix for your cached files :
※実際に公開するURLを指定します。今回はS3のURLです。生成されるHTMLファイル内でリンクのURLとなります。mybucket.s3-website-ap-northeast-1.amazonaws.comは仮のURLです。
Url to the templatefolder :
※EC2上のWordPressのテーマのURLを設定します。
上記設定後、「save」ボタンを押します。
設定 > Really Static > Settings
以下のチェックボックスをチェックします。
Rewrite every http://example.com/wordpress/ with http://mybucket.s3-website-ap-northeast-1.amazonaws.com/wordpress/ (high security)
※チェックを入れることで、HTMLページ内のEC2上のURLがS3用のURLに書き変わります。
make category-pages static
make author-pages static
make date-pages static
make index-pages static
※チェックを入れることで、静的なHTMLページを生成する項目を設定できます。今回のブログではタグを利用していませんでしたので、タグページの生成のみチェックしていません。
上記設定後、「save」ボタンを押します。
Copy all Files with following extensions to the destinationserver
.cssを「Add」します。
※今回この設定で「/usr/share/nginx/html/wordpress/wp-content/plugins/really-static/static/wp-content/themes/twentyeleven/」以下に「style.css」がコピーされませんでしたので、「style.css」のみ手動コピーしました。
設定 > Really Static > Reset
「reset filedatabase」ボタンを押します。
※「Really Static」をインストールすると、DBに「wp_realstatic」というテーブルが作成されますが、このボタンを押すと「wp_realstatic」テーブルに保存されている情報が削除されます。
設定 > Really Static > Manual Refresh
「write all files」ボタンをを押します。
※このボタンを押すと、静的なHTMLページが生成されます。
「/usr/share/nginx/html/wordpress/wp-content/plugins/really-static/static/」に静的なHTMLページが生成されました。
生成された内容を確認すると、以下のようにURLと同じようにディレクトリが作成され、その中にindex.htmlが作成されているのがわかります。
tree
.
├── index.html
├── index.php
│ ├── 2012
│ │ ├── 03
│ │ │ ├── 23
│ │ │ │ └── index.html
│ │ │ ├── cdp
│ │ │ │ └── index.html
│ │ │ └── index.html
│ │ └── index.html
│ ├── author
│ │ └── admin
│ │ └── index.html
│ ├── category
│ │ └── aws
│ │ └── index.html
│ └── sample-page
│ └── index.html
├── test.txt
└── wp-content
└── themes
└── twentyeleven
├── images
│ └── headers
│ └── trolley.jpg
└── style.css
index.htmlを確認すると、リンクがS3のURLになっていることが確認できます。
/usr/share/nginx/html/wordpress/wp-content/plugins/really-static/static/index.html
L40～L49
[html]
<body class="home blog single-author two-column right-sidebar">
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="http://mybucket.s3-website-ap-northeast-1.amazonaws.com/wordpress/" title="blog" rel="home">blog</a></span></h1>
<h2 id="site-description">Just another WordPress site</h2>
</hgroup>
<a href="">http://mybucket.s3-website-ap-northeast-1.amazonaws.com/wordpress/">
<img src="http://mybucket.s3-website-ap-northeast-1.amazonaws.com/wordpress/wp-content/themes/twentyeleven/images/headers/trolley.jpg" width="1000" height="288" alt="" /></a>
[/html]
3. 「S3Sync.rb」の準備
次は「S3Sync.rb」をダウンロードして、設定を行います。 ダウンロードして解凍後、設定ファイル用のディレクトリを作成して、設定ファイルの見本をコピーします。
wget http://s3.amazonaws.com/ServEdge_pub/s3sync/s3sync.tar.gz tar zxf 3sync.tar.gz cd s3sync mkdir /etc/s3conf cp s3config.yml.example /etc/s3conf/s3config.yml
READMEを確認したところ、設定ファイルは以下の順に検索されているとのことです。
- $S3CONF/s3config.yml
- $HOME/.s3conf/s3config.yml
- /etc/s3conf/s3config.yml ※今回はここに設定ファイルの見本をコピー
次に設定ファイルにaws_access_key_id、aws_secret_access_keyを設定して保存してください。
aws_access_key_id: 11111111111111111111111 aws_secret_access_key: 222222222222222222222 aws_calling_format: SUBDOMAIN # USの場合はREGULARを設定
4. AWS Management ConsoleでAmazon S3の準備
「Create Bucket」で「mybucket」というバケットを作成します。次に「Create Folder」で「wordpress」というフォルダを作成します。
次に右上の「Properties」ボタンを押下します。下側の「Website」タグを選択します。
「Enabled」にチェックを入れ、「Index Document」に「index.html」を入力して、「Save」します。
※「Enabled」にチェックを入れることでS3をWebサイトとして利用できるようになります。「Index Document」はファイル名を指定せず、フォルダ名までの指定でアクセスした際に表示されるファイル名の指定です。「Error Document」は今回は設定していませんが、エラー時に表示したいファイル名を指定します。
▼ AWS Management ConsoleのAmazon S3設定画面
5. S3Sync.rbでS3へリリース
ruby s3sync.rb -r --delete -v /usr/share/nginx/html/wordpress/wp-content/plugins/really-static/static/ mybucket:wordpress
※mybucketはS3上のバケット名、wordpressはフォルダ名です。
6. S3で公開
最後に「wordpress」フォルダを選択して「Actions」から「Make Public」を選択して公開します。
▼ 「Make Public」を選択
以下のURLでブログが表示されました。
http://mybucket.s3-website-ap-northeast-1.amazonaws.com/wordpress/
「Really Static」を利用してWordPressをS3で公開できました。
サイドメニューから2012年3月をリンクをクリックすると、きちんと表示されます。静的なHTMLページが生成されたディレクトリの中身ももう一度確認してみてください。以下の画像では、「/wordpress/index.php/2012/03」/以下のindex.htmlが表示されています。
▼ サイドメニューから2012年3月をリンクをクリック
tree . ├── index.html ├── index.php │ ├── 2012 │ │ ├── 03 │ │ │ ├── 23 │ │ │ │ └── index.html │ │ │ ├── cdp │ │ │ │ └── index.html │ │ │ └── index.html │ │ └── index.html
以上のように動的な部分を利用しないブログであれば、WordPressでもS3の利用が可能です。今回はEC2からファイルをリリースする形を取りましたが、他にEC2でS3をマウントして利用する方法もあります。
今回S3を利用する目的に信頼性を一番に考えましたが、他にもS3を利用する大きなメリットがあります。
『S3はかなりのトラフィックに耐えられる』という点です。
「Really Static」を利用して現在WordPressを利用している環境からサイトをS3に移行すれば、キャンペーンなどで一時的にトラフィックが増加した場合でもダウンは避けられると思います。
※EC2の場合はインスタンスがダウンするということは、もちろんサービス停止を意味します…。
このようにS3は信頼性以外にも大変魅力があるサービスですので、今後のWordPressの運用場所としてS3を考えてみてはいかがでしょうか。
参考：今回の利用バージョン
- WordPress 3.3.1
- Really Static 0.31
- S3Sync.rb 1.2.6
