もはや何番煎じかわかりませんが…どうも、かっぱ（@inokara）です。

はじめに

WordPress の StaticPress プラグインと StaticPress S3 プラグインを利用することで書きだした HTML を Amazon S3 のホスティング機能を利用してサイトを公開してみたいと思います。

Amazon S3 に公開することで以下のようなメリットがあるかと思います。

  • サーバーのメンテナンスが不要（WordPress 用のサーバーは必要ですね）
  • Amazon S3 の安定性と堅牢性（99.999999999％）で安心
  • 月額 10 円からはじめられる！
  • 容量は無制限

と Amazon S3 の特徴を余すことなく享受出来ますね。また、上記以外も WordPress を動かす環境はどこでも（例えば、手元の Macbook Pro でも！）構築出来るので記事を書く環境を選ばないというのも魅力の一つではないでしょうか。

ということで設定してみたいと思います。今回は既に構築済みの WordPress 環境を利用します。（以下、「おまけ」参照）

やることリスト

  • S3 にバケットを用意する（バケット作成、ホスティング機能を有効、公開用のバケットポリシーの設定）
  • Route 53 でドメインの設定を行う
  • StaticPress と StaticPress S3 プラグインのインストール
  • StaticPress S3 の設定

ホントにこれだけで出来るんかいと…

S3 にバケットを用意

バケットを作成

公開するドメイン名でバケットを作成しましょう。今回は wp.xxx.xxxxx.com 以下のように AWS CLI で作成します。（事前に AWS CLI を実行出来るようにしておきましょう。）

aws s3api create-bucket --bucket wp.xxx.xxxxx.com

以下のようにバケットが作成されました。

01

ホスティング機能を有効にする

まずは以下のような JSON ファイルを用意しましょう。

{
  "IndexDocument": {
    "Suffix": "index.html"
  }
}

これは S3 のウェブホスティング機能を有効にした際の Index Document 等の設定を行います。

02

そして、以下のように S3 のホスティング機能を有効にします。

aws s3api put-bucket-website --bucket wp.xxx.xxxxx.com --website-configuration file://webhosting.json

尚、上図にある Endpoint は公開用ドメインの CNAME 先として指定するので控えておきましょう。

公開用のバケットポリシーを設定

まずは以下のような JSON ファイルを作成しましょう。これがポリシーですな。ファイル名は policy.json とかにしておきましょう。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::wp.xxx.xxxxx.com/*"
        }
    ]
}

以下のように AWS CLI で作成します。

aws s3api put-bucket-policy --bucket wp.xxx.xxxxx.com --policy file://policy.json

レスポンスボディが返ってこないのでちゃんと設定されたか判らないのがちょっと残念。

バケット操作用の IAM ユーザーを作成

StaticPress から公開用のバケットを操作する StaticPress S3 が利用するユーザーを IAM ユーザーで作成しましょう。セキュリティ的にも専用ユーザーを設けた方が安心ですね。

IAM ユーザーを作成

これも AWS CLI でチャレンジです。マネジメントコンソールにアクセスしたら今日は負けです。

aws iam create-user --user-name staticpress

以下のようにレスポンスが返ってきました。

03

IAM ユーザーのポリシーを作成

ポリシーファイルを以下のように作成しましょう。ファイル名は staticpress.json とかにしておきましょう。

{
    "Version": "2012-10-17",
    "Statement": [
    {
        "Action": [
            "s3:*""
        ],
        "Resource": [
            "arn:aws:s3:::wp.xxx.xxxxx.com/*""
        ],
        "Effect": "Allow"
    },
    {
        "Action": [
            "s3:ListAllMyBuckets",
            "s3:ListBucket",
            "s3:GetBucketLocation"
        ],
        "Resource": [
            "arn:aws:s3:::*""
        ],
        "Effect": "Allow"
    }
    ]
}

以下のように AWS CLI を実行しましょう。

aws iam put-user-policy --user-name staticpress --policy-name staticpressPolicy --policy-document file://staticpress.json

アクセスキーとシークレットアクセスキーを取得する

以下を実行してアクセスキーとシークレットアクセスキーを取得しましょう。

aws iam create-access-key --user-name staticpress

以下のような結果が返ってきますのでメモっておきます。

04

Route 53 でドメインの設定を行う

外部に公開するためのドメインを Route 53 に登録します。

先ほどホスティング機能を有効にした際に控えた Endpoint を利用して以下のような JSON ファイルを作成します。ファイル名は適当に route53.json とでもしておきましょう。

{
  "Comment": "string",
  "Changes": [
    {
      "Action": "CREATE",
      "ResourceRecordSet": {
        "Name": "xxx.xxxx.xxxx.com",
        "Type": "CNAME",
        "TTL": 600,
        "ResourceRecords": [
          {
            "Value": "wp.xxx.xxxxx.com.s3-website-us-east-1.amazonaws.com"
          }
        ]
      }
    }
  ]
}

以下のように AWS CLI コマンドを実行しましょう。

aws route53 change-resource-record-sets --hosted-zone-id "/hostedzone/xxxxxxxxxx" --change-batch file://route53.json

以下のような結果が返ってきます。

05

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

WordPress のちょっとした修正

StaticPress は書きだした静的な HTML ファイル名が必要になりますので「パーマリンク設定」で書きだす HTML ファイル名を指定します。

06

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

以下のように 3 ステップでインストール可能です。

07

プラグインを検索して…

08

「いますぐインストール」をクリックしてインストール。

09

インストールが終わったらプラグイン一覧に表示されます。

StaticPress の設定

プラグインのインストールが終わると WordPress の左メニューに StaticPress のメニューが追加されます。

10

「StaticPress」の設定をクリックしましょう…

11

上記のように StaticPress の設定画面が表示されます。

  • 静的サイト URL は書きだした HTML を表示させるパスを指定します（とりあえずは /static/ 以下で）
  • 出力先ディレクトリはドキュメントルートを…（自動的に /static/ というディレクトリが作成されます）

はじめての StaticPress

適当に記事を作成して…

12

サイトにアクセスしてみる。

13

静的ですがページが表示されました。

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

StaticPress で書き出した静的な HTML を Amazon S3 のバケットに転送するプラグインをさらに追加します。

cd /var/www/html/wp-content/plugins
git clone https://github.com/megumiteam/staticpress-s3.git
chown -R apache:apache staticpress-s3

上記のように git clone してきます。git clone した後でプラグイン一覧を見ると…

14

StaticPress S3 がプラグインとして登録されています。「有効化」をクリックしてプラグインを使えるようにしましょう。

StaticPress S3 プラグインの設定

StaticPress S3 プラグインの設定をしましょう。

15

先ほど設定した静的サイト URL を Route53 で指定した URL に変更して、出力先ディレクトリのパスに static を追加しましょう。また、既に static というディレクトリが作成されているはずなので削除からリネームしておきましょう。

16

あらかじめ控えておいたアクセスキーとシークレットアクセスキーを設定します。合わせて S3 のリージョンも指定します。リージョンまで指定したら一旦、「変更を保存」をクリックするとバケットを指定出来るようになります。S3 Bucket のプルダウンメニューから先ほど作成したバケット名を指定しましょう。

はじめての Static Press S3

記事を書いた後に「公開」を一旦クリックしたら、StaticPress メニューから「再構築」をクリックしましょう。

17

書きだされたようです。念のために、S3 のバケットを覗いてみましょう。

18

ちゃんと転送されているようですね。では、静的サイト URL に指定した URL にアクセスしてみましょう。

19

おお、出ました！

まとめ

やったこと

  • WordPress を 5 分で構築した
  • StaticPress プラグインをインストールして静的なサイトを公開した
  • StaticPress で書きだした静的なサイトを Amazon S3 で転送して別のドメインで公開した

気づいた点、感想

  • StaticPress 自体の設定はとても簡単だった（ブラウザから出来る！）
  • Amazon S3 への転送に関しても適切に設定が行われていれば特にハマることがない
  • 但し、テーマによってはページのレイアウトが崩れてしまう現象が確認されたので実際の運用時には注意が必要
  • そもそも静的サイトとなるので検索やコメント機能は利用出来ない、または代替のプラグインで補完する必要があるのも注意

おまけ（5 分で構築する WordPress 環境）

@understeer さんのブログ をそのまま利用させて頂きます。以下のような環境であればコピペで構築出来ました。

  • Amazon Linux
  • EBS を /dev/sdf アタッチ済み

有難うございます！

本当に 5 分位で WordPress 環境を構築することが出来ました！

おまけ（AWS CLI で Route 53 を操作する際のチートシート）

ポイント

  • list-hosted-zones で取得出来る ID が重要

list-hosted-zones

aws route53 list-hosted-zones

以下のように表示される。

20

list-resource-record-sets

ドメインに登録されているレコードを確認する。

aws route53 list-resource-record-sets --hosted-zone-id "/hostedzone/xxxxxxxxxxxxxxxx"

実行すると登録済みのレコードが JSON で返ってくる。

おまけ（JSON ファイルのデバッグ）

JSONView という Google Chrome の拡張を使うのがお薦めだったりします。

21

上図のように JSON ファイルを Chrome にドラッグアンドドロップするだけで構文のチェックを行ってくれます。不備がある場合にはもちろん指摘も…。

元記事は、こちら