S3 でのスタティックコンテンツのウェブホスティング

S3 は AWS のサービス群の中でシンプルなストレージを提供しています。

S3 は単にファイルを保存できるだけでなく、簡単にウェブページをホスティングするようにも構成可能です。

ただし、制限としてはスタティックコンテンツのみです。つまり、PHP や Python といったアプリケーションを実行するようにはできていません。

あくまでもサーバー側でのスクリプティング/CGI といったサポートはありません。

ここでは S3 でのスタティックコンテンツのウェブホスティングを行なうための基本的な設定方法を紹介します。

AWS の管理コンソールにログインして S3 を選択します。

ここでバケツを作成して、ホスティングの設定を行ないます。

バケツの作成

画面左上の "Create Bucket" (バケツの作成) をクリックします。

ここでバケツ名を "wwwtest-keicode" としました。

"Create" をクリックするとバケツが作成されます。

スタティックウェブホスティングの有効化

作成したバケツを選択して、画面右上の "Properties" (プロパティ) ボタンをクリックします。

"Static Web Hosting" の設定グループがあります。デフォルトではスタティック・ウェブ・ホスティングは無効になっています。

"Enable web hosting" (ウェブホスティングを有効にする) を選択します。

ここで "Index Document" と "Error Document" を指定します。Index Document というのは、URL でファイル名を指定しない場合のデフォルトのドキュメントのことです。 Error Document はウェブサイトで何らかのエラーが発生した場合に表示するドキュメントです。エラーの中には単に 404 (File Not Found) のような場合も含まれます。

パーミッションの設定

次にバケツのパーミッションを設定します。

"Permissions" 設定グループで "Add bucket policy" (バケツポリシーの追加) をクリックします。

次の内容のポリシーを追加します。

以下の内容のバケツ名を変更してください。これによって、このバケツ内のファイルに対して全ユーザーに対する読取りアクセスが許可されます。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadForGetBucketObjects",
			"Effect": "Allow",
			"Principal": "*",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::<バケツ名>/*"
			]
		}
	]
}

ちなみにここの Verson はポリシーファイルのスキーマのバージョンのことであって、あなたが指定するポリシー自体のバージョンではありません。このまま使ってください。(2014年現在)

ファイルのアップロード

さて、HTML ファイル及び画像を、上で作成したバケツ内にアップロードしましょう。

ここでは index.html、error.html、img1.png という HTML ファイル2ファイルと画像ひとつ準備しました。

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>AWS テストページ</title>
</head>
<body>
<p><img src='img1.png' alt='*'></p>
<p>こんにちは。これは index.html です。</p>
</body>
</html>

error.html:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>エラーページ</title>
</head>
<body>
<p>これは error.html です。</p>
</body>
</html>

img1.png

上の3ファイルを準備したらバケツの "Action" → "Upload" からアップロードします。

"Add Files" ボタンからファイルを選択したら、"Start Upload" をクリックしてファイルをアップロードします。

ファイルが追加されました。

以上で S3 上でのスタティックコンテンツ・ウェブホスティングの設定は完了です。

ウェブホスティングの動作確認

上で設定した S3 スタティックウェブホスティングの動作確認をしましょう。

アクセスする URL はバケツのプロパティ内、Static Web Hosting グループ内に記載されています。

ブラウザからこの URL を要求すると、ウェブページ (index.html) が表示されるはずです。

index.html が表示されていることから、Index Document の設定が正しく機能していることが分かりますね。

続けて存在しないファイル (ここでは foo としました) を要求すると、次のように error.html が返されることがわかります。

Static Web Hosting の設定での Error Document の設定が正しく機能しています。

以上で、S3 を利用したスタティック・ウェブホスティングができました。