WordPress の「StaticPress」というプラグインを使って、WordPressのページを静的ファイルに変換して S3 にアップロードし、WordPress サイトを激安で運用しよう、というのが今回の主旨です。
きっかけは、@masuidrive さんの、
という記事を見て、「そんなのできるんだー。試してみたい！」と思っていたので。
これまで4本ほど連続して、S3 や WordPress について書いてきたわけですが、
- はじめての S3 （Amazon S3 を使って Webサイトを公開する）
- はじめての Route 53 （Amazon Route 53 を使って Webサイトをネイキッドドメインで運用する）
- Ansible で CentOS 6.5 に WordPress + Nginx + PHP-FPM 環境をさくっと構築（Vagrantバージョン & さくらのVPSバージョン）
- Ansibleで WordPress日本語版(3.9.1) を楽々インストール
それらの集大成的なものになります。
やりたいこと
- StaticPressプラグインを使って、WordPressページを静的ファイルに変換し、S3 にアップロード
- アップロードされたファイルを、S3 で Webサイトとしてホスティング
なお、S3へのアップロードには、staticpress-s3 というプラグインを利用します。
環境
- ホストマシン: Mac OS X 10.9.3
- ゲストマシン: CentOS 6.5 (64bit) on Vagrant 1.4.3 + VirtualBox
手順
1) Access Key、Secret Key を作成
S3 へファイルをアップロードするために必要な Access Key、Secret Key を作成します。
AWS Console Manager にログインし、右上のメニューから「Security Credentials」をクリックします。
[Access Keys (Access Key ID and Secret Access Key)] から、「Create New Access Key」をクリックします。
表示された「Access Key Id」「Secret Access Key」をコピペしておくか、ファイルをダウンロードします。
ダウンロードしたファイルには、このように「Access Key Id」と「Secret Access Key」が記述されています。
AWSAccessKeyId=<Access Key Id> AWSSecretKey=<Secret Access Key>
2) S3 バケットを作成
2) ～ 3) の手順の詳細については、「はじめての Route 53 （Amazon Route 53 を使って Webサイトをネイキッドドメインで運用する）」を参照のこと。
FQDN 形式でバケット名を指定して、S3 バケットを作成します。
誰でもファイルの参照ができるようにポリシーを設定します。
以下のように Webサイトホスティングの設定をします。
| Index Document | index.html |
| Error Document | 404.html |
3) レジストラ側で CNAME を設定
「akiyoko.info」ドメインを管理している「お名前.com」のドメインNavi 上で、CNAME の設定をします。
ドメインNavi にログインして、[ドメイン設定] から、[DNS関連機能の設定] -> [DNSレコード設定を利用する] の「設定する」をクリックします。
以下のように、CNAME の設定をします。
| ホスト名 | TYPE | VALUE | 状態 |
| www.akiyoko.info | CNAME | www.akiyoko.info.s3-website-ap-northeast-1.amazonaws.com | 有効 |
4) WordPressを起動
Vagrant + Ansible を使って、さくっと WordPress を起動します。
詳しくは、「Ansibleで WordPress日本語版(3.9.1) を楽々インストール」を参照してください。
5) パーマリンク設定
WordPressダッシュボードで [設定] -> [パーマリンク設定] で「カスタム構造」にチェックを入れて、「/%postname%.html」と入力して保存します。
参考
6) StaticPress を導入
WordPressダッシュボードで [プラグイン] -> [新規追加] をクリックし、「StaticPress」プラグインを検索します。
StaticPress 0.4.3.4 が該当しました。
「いますぐインストール」をクリックします。
「プラグインを有効化」をクリックします。
7) staticpress-s3 を導入
https://github.com/megumiteam/staticpress-s3
GitHubの画面上で、「Download ZIP」ボタンをクリックして zipファイルをダウンロードします。
WordPressのダッシュボードの [プラグイン] -> [新規追加] から、zipファイルをアップロードして追加します。
8) StaticPress 設定
以下のように StaticPress の設定をして、「変更を保存」をクリックします。
| 静的サイト URL | WordPressが動作しているURLではなく、S3で公開するFQDNを指定。例えば「http://www.akiyoko.info/」など |
| 出力先ディレクトリ (ドキュメントルート) | デフォルトの「/srv/wordpress/」ままだと、wp-admin, wp-content, wp-includes などが出力されないので、「/srv/wordpress/static/」などとする |
次に、StaticPress S3 Option の設定をして、一旦「変更を保存」をクリックします。
| AWS Access Key | 1) で作成した Access Key |
| AWS Secret Key | 1) で作成した Secret Key |
| AWS Region | 「Tokyo」の場合は「AP_NORTHWEST_1」 |
「S3 Bucket」を選択して、再度「変更を保存」します。
9) 再構築してみる
[StaticPress] -> [StaticPress] から「再構築」ボタンをクリックすると、
/srv/wordpress/static/ 以下にファイルを保存すると同時に、S3へもアップロードされます。
$ ls -al /srv/wordpress/static/ total 72 drwxr-xr-x 11 wordpress wordpress 4096 Jun 8 04:47 . drwxr-xr-x 7 wordpress wordpress 4096 Jun 8 04:45 .. drwxr-xr-x 3 wordpress wordpress 4096 Jun 8 04:46 2014 -rw-r--r-- 1 wordpress wordpress 6393 Jun 8 04:47 404.html drwxr-xr-x 3 wordpress wordpress 4096 Jun 8 04:46 author drwxr-xr-x 3 wordpress wordpress 4096 Jun 8 04:46 category drwxr-xr-x 3 wordpress wordpress 4096 Jun 8 04:46 comments drwxr-xr-x 2 wordpress wordpress 4096 Jun 8 04:46 feed -rw-r--r-- 1 wordpress wordpress 10713 Jun 8 04:45 hello-world.html -rw-r--r-- 1 wordpress wordpress 6941 Jun 8 04:45 index.html drwxr-xr-x 2 wordpress wordpress 4096 Jun 8 04:45 sample-page drwxr-xr-x 5 wordpress wordpress 4096 Jun 8 04:45 wp-admin drwxr-xr-x 4 wordpress wordpress 4096 Jun 8 04:46 wp-content drwxr-xr-x 7 wordpress wordpress 4096 Jun 8 04:46 wp-includes
S3 にもアップロードされているようです。
なお、2回目以降の再構築では、/srv/wordpress/static/ からの差分しかフェッチ（S3へのアップロードも）しないので、最初からやり直したいときは、一旦 /srv/wordpress/static/ 以下と S3のバケットにアップロードされたファイルを全てを削除してください。
11) S3 の Metadata を変更
S3 にアップロードした CSSファイルの Content-Type がおかしくなってしまっているのが原因のようなので、変更していきます。
wp-content/themes/twentyfourteen/style.css
の Content-Type を「text/x-c」から「text/css」に変更します。
他にも、
- wp-content/themes/twentyfourteen/rtl.css
- wp-content/themes/twentyfourteen/css/editor-style.css
- wp-content/themes/twentyfourteen/css/ie.css
という CSSファイルがあるのですが、念のためこちらも変更しておきます。
13) 再度、確認
OKでした。
あと最後に大切なことですが、以上の手順で激安ホスティングができるのは間違いないのですが、1ヶ月10円かどうかは保証できません。各自でお試しくださいませ。
