AWS
S3
website
Hosting

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

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

S3 Bucketを作成

バケット名がsample-web-site-001のバケットをまず作ります。
image1.png
バケットプロパティはそのままで次へ
image2.png
パーミッションもとりあえずいじらずCreate Bucketします。
image3.png
バケットにWebサイトの資材をデプロイ、ここでまずindex.htmlとエラー時のerror.htmlアップロードします。
image4.png

Bucketを公開

作成されたバケットを選択して、Propertiesタブを開きます。
image5.png
Static website hostingをクリックして、さきほどパップロードしたindex.htmlとerror.htmlをindexページとErrorページに設定して、Saveします。
image6.png
最後にPermissionsタブのBucket Policyで以下のパケットポリシーを入れて完了します。

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

image7.png

WebSiteを開く

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

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

http://sample-web-site-001.s3-website-ap-northeast-1.amazonaws.com

image8.png

Error発生時

バケットのPropertiesタブで、Static website hostingのindexページを存在しないものに変更しますと、
image9.png
今度はエラーページに遷移され、error.htmlの内容が表示されます。(いわゆるSorryページですね)
image10.png

参考資料

Amazon S3による静的Webサイトホスティング