ITANDI TECH BLOG

イタンジのスタッフブログです。イベントや技術情報などを発信しています。

wordpressをAmazon S3で運用する方法

はじめまして。3月17日付でイタンジに入社しました、永嶋(@eiei19)と申します。

個人のブログはこちらです。

http://manimani-rider.com

よろしくお願いします。

さて、一発目のネタとして何を書こうかと迷ったのですが、最近プライベートで新たにブログを作ったのでその構成について書きたいと思います。

もうすでにいろんなとこで書かれているネタではありますが、「wordpressAmazon S3で運用する方法」です。

wordpressAmazon S3で運用?

wordpressをS3で運用といってもwordpress自体を動かすわけでなく、別サーバに構築したwordpressサイトを静的HTMLに変換して、S3のスタティックホスティング機能を利用して公開するという構成になります。

やっていることだけ見ると、それなんてmovabletype?という感じなのですが、慣れ親しんだwordpressを使いつつS3と静的サイトのメリットを享受できるのは選択肢としてはありかなと思ったのと、ブログの技術構成を変えるのがけっこう好きなのでやってみました。

メリット

  • サーバ借りるより安価

  • サーバ運用しなくていい

  • wordpress乗っ取りとか心配しなくていい

  • S3の堅牢性とスケーラビリティ

デメリット

  • コメントとかPHP処理が走るプラグインとかが動かない

  • いちいち静的ソースを生成するのがちょっとめんどくさい

用意するもの

ドメイン

たぶん独自ドメインじゃなくても出来ますが、今回は、最近一眼レフカメラを買って散歩と写真を趣味にしようと決めた自分のために、tokyo-photo-sanpo.comというドメインを取りました。

Amazon S3のバケット

作ります。リージョンはTOKYOで。

公開するドメインと同じ名前で作成し、Property > Static web hosting でホスティング機能をONにします。

あと、Bucket > Property > Edit bucket policyと進んで下記の設定をコピペして、誰からでも読み出しできるようにします。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::tokyo-photo-sanpo.com/"
        }
    ]
}

IAMでユーザ作成

さっき作ったバケットを操作できるユーザを作成します。

ユーザをつくってポリシーを下記の用に設定します。

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

設定したらManage Access KeyからCreate Access Keyと進み、表示されるAccess Key ID, Secret Access Keyをコピーしておきます。

Route 53

せっかくなのでDNSもアマゾンにしましょう。

create hosted zoneからゾーンを作ります。

作成できたらレコードの作成画面に移動して下記の画面ようにします。

Aレコードを選んでAliasを選ぶとさっきつくったS3のバケットが表示されるので選びます。

スクリーンショット 2014-04-26 00.38.09

設定できたら表示されてるDNSサーバのURLをコピってドメイン側の設定からDNSサーバを切り替えます。

wordpress

今回はRedhatが提供してるPaaSのOpenshiftを使いました。

ローカルにwordpressを構築しても良いのですが、それすらもめんど(ry、なのでこっちを使いました。

他のPaaSに比べて無料で1Gのストレージが使えるのである程度画像とかあげちゃっても大丈夫。

普通にSing Up してwordpressを立ちあげます。

f

ポイントはPHPを5.4にすること。

5.3だと後述するstaticpressのcss生成がうまくいきません。

staticpress & staticpress S3

wordpressの静的HTMLを生成するプラグイン

http://ja.staticpress.net/

前述したwordpressが立ち上がったらこのプラグインをインストールします。

設定画面を開いてさっきコピっておいたS3のキーとシークレットを設定します。

AWS RegionはAP_NORTHEAST_1です(TOKYOの場合)。

スクリーンショット 2014-04-26 00.57.42

 

完成

ここまでくれば設定は完了です。

StaticpressでRebuildボタンを押せばHTMLの生成とS3へのアップロードまで自動でやってくれます。便利。

完成したサイトがこちらになります。

http://tokyo-photo-sanpo.com/

デメリットでも触れましたがwordpressのコメント機能とかトラックバックとかPHPが必要なものは動きません。

コメントなどを使いたい場合はFacebookプラグインとかDisqusとかjsで動作するものを使えばいいと思います。

Amazonのお支払いはこんな感じ。安い。

billing

トラフィック量によって増加することが予想されますがサーバたてるよりはぜんぜん安いはず。

以上、wordpressAmazon S3で運用する方法でしたー。

参考サイト

Amazon S3でWordPressを動かす // Speaker Deck

WordPressをStaticPress+Amazon S3+Vagrantでセキュリティ万全にする方法 [前編] | @masuidrive blog