StaticPress で書き出した html を S3 でホスティングする

StaticPress で書き出した html を S3 でホスティングする

StaticPress で書き出した html を Amazon S3 でホスティングすることにより、低コストで落ちないサイトを実現することが可能です。
※このサイトも、この構成になっています。
この記事では、実現方法を解説します。

S3 によるホスティングを行うには。以下の作業を行う必要があります。

  • コンテンツを保存する S3 バケットを作成する。
  • 作成した S3 バケットを Web サイト用に設定する。
  • 独自ドメインでアクセスできるよう設定する。
  • コンテンツを S3 バケットにアップロードする。

コンテンツを保存する S3 バケットを作成する

まず、AWS Management Console にログインして Amazon S3 タブを開きます。
https://console.aws.amazon.com/s3

スクリーンショット(2013-06-11 17.16.31)
次に「Create Bucket」ボタンをクリックします。

スクリーンショット(2013-06-11 17.21.11)
Bucket Name フィールドにバケット名を入力します。
Bucket Name は、ホスティングしたいサイトの FQDN に合わせてください。
このサイトの場合だと「staticpress.net」にしておきます。

Region のドロップダウンリストから、リージョンを選択します。
日本で公開するサイトであれば「Tokyo」を選択しておけば良いでしょう。

設定できたら「Create」をクリックします。
アクセスログを保存しておきたい場合は「Set Up Logging>」をクリックして設定します。

作成した S3 バケットを Web サイト用に設定する。

スクリーンショット(2013-06-11 17.27.18)
作成した S3 バケットを右クリックして表示されるメニューから「Properties」を選択してください。
その後、右ペインに表示される「Static Website Hosting」をクリックして「Enable website hosting」を選択します。
Index Document は「index.html」と入力しましょう。
Error Document は 404 Not Found が発生した時に表示される html を指定します「404.html」と入力しておけば良いです。

設定を有効にするためにSaveボタンをクリックし設定を保存します。

スクリーンショット(2013-06-11 17.34.27)
次にバケットポリシーを追加します。デフォルトのバケットポリシーでは自分にしか閲覧権限が無いため、インターネットで公開されるようなポリシーを追加します。
ポリシーの細かい設定は JSON 形式で指定することが出来ます。
「Permissions」を選択して「Add bucket policy」をクリックしてください。
以下にサンプルのバケットポリシーを置いておきます。
これをコピーして、Bucket Policy Editor 内に張りつけて save してください。
※ 以下のサンプルはバケット名が「example.com」のものです。
  "Resource": "arn:aws:s3:::example.com/*" の「example.com」の部分を作成したバケット名に置き換えてください。

独自ドメインでアクセスできるよう設定する

サブドメインの場合は Route 53 を使用しなくても、利用している DNS サーバで CNAME を割り当てれば良いです。
例えば static.example.com の場合は、以下のように割り当てれば良いでしょう。

static.example.com CNAME static.example.com.s3-website-ap-northeast-1.amazonaws.com

このサイトのようにネイキッドドメインで運用するには Route53 を使用します。
AWS Management Console にログインして Route 53 タブを開きます。
https://console.aws.amazon.com/route53/

まず「Create Hosted Zone」を選択して、新しい Hosted Zone を作成してください。
次に作成した Hosted Zone を選択して「>Go to Record Sets」を選択します。

スクリーンショット(2013-06-11 17.49.15)
Type は「A – IPv4 address」を選択します。
Alias は「Yes」を選択します。
Alias Target をクリックすると選択できる S3 Bucket や ELB などがリスティングされるので、先ほど作成した S3 バケットを選択してください。

その後、作成した Hosted Zone の NS レコードに設定されているネームサーバ(通常は4つ)をドメインレジストラの設定画面で、使用したいドメインのネームサーバとして設定すれば完了です。

スクリーンショット(2013-06-11 18.18.32)
例えば「ムームードメイン」を使用している場合は、ドメイン設定の「ネームサーバ設定変更」ボタンをクリックして表示される画面で「上記以外 のネームサーバを使用する」を選択し「ネームサーバ1」〜「ネームサーバ4」を Route 53 で指定されたネームサーバに変更すれば良いです。

コンテンツを S3 バケットにアップロードする。

後は StaticPress が書き出した html, js, css, 画像ファイル等をすべて S3 バケットにアップロードすれば終了です。

それらを行うためのスクリプトも用意しましたので、ご利用ください。(php 5.3 以上対応)

10 – 14 行目を適宜修正してください。
このスクリプトは AWS SDK for PHP 2 が必要なので、AWS からダウンロードしておいてください。
AWS SDK for PHP 2

S3 へのアップロードは、そのうち StaticPress プラグインに実装されるかもしれません。