AWS S3に静的ウェブサイトのホスティング

S3はAWSの中核となるストレージサービスとしてよく使われますが、静的なWebサイトをホストすることもできます。
S3の静的ホスティングは、サーバサイトのプログラム言語が使えないですが、html、javascript、css等クライアントサイドのスクリプトのみ、それなりのWebSiteが作れます。

##S3 Bucketを作成
バケット名がsample-web-site-001のバケットをまず作ります。

バケットプロパティはそのままで次へ

パーミッションもとりあえずいじらずCreate Bucketします。

バケットにWebサイトの資材をデプロイ、ここでまずindex.htmlとエラー時のerror.htmlアップロードします。

##Bucketを公開
作成されたバケットを選択して、Propertiesタブを開きます。

Static website hostingをクリックして、さきほどパップロードしたindex.htmlとerror.htmlをindexページとErrorページに設定して、Saveします。

最後にPermissionsタブのBucket Policyで以下のパケットポリシーを入れて完了します。

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "samplesite",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::sample-web-site-001/*"
        }
    ]
}

##WebSiteを開く
ウェブサイトを開くには、バケットの AWS リージョン固有のウェブサイトエンドポイントで使用できます。

<bucket-name>.s3-website-<AWS-region>.amazonaws.com

##Error発生時
バケットのPropertiesタブで、Static website hostingのindexページを存在しないものに変更しますと、

今度はエラーページに遷移され、error.htmlの内容が表示されます。（いわゆるSorryページですね）

##参考資料
Amazon S3による静的Webサイトホスティング