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

4616 ワード
Hosting S3 website AWS AWS テキストリンク

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サイトホスティング