S3で静的ウェブサイトホスティングする

2023年1月15日

S3のファイルをそのままウェブサイトとして公開することができます。この手順では、独自ドメイン化・SSL化は行われませんので、CloudFrontと組み合わせていく必要があります。その手前のhttpサイトとして公開するところまでになります。

ウェブサイトホスティングでできるようになること

ウェブサイトホスティングの設定を行うと、index.html などのフルパスを指定しなくても、フォルダのパスのみで index.html などのファイルを開く事が可能になります。

ウェブサイトホスティングではhttpとなります

S3にファイルをアップロードした後に、ファイルの詳細を確認すると https のアドレスが表示されます。ウェブサイトホスティングの場合は、http のアドレスになります。独自ドメイン・SSL化する場合は、追ってCloudFront も利用します。（後日、別記事でアップ予定）
（上がウェブサイトホスティングのURL、下が直接開く場合のURL）
http://apiless-public-01.s3-website-ap-northeast-1.amazonaws.com
https://apiless-public-01.s3.ap-northeast-1.amazonaws.com/index.html

手順

バケットを作成をクリックします。

バケット名を入力します。
「パブリックアクセスを全てブロック」に付いているチェックを外します。
公開する可能性がある注意事項についてチェックします（まだ、この段階では公開はされません）。
バケットを作成をクリックします。

作成したバケット名をクリックして開きます。

プロパティをクリックします。

静的ウェブサイトホスティングの項目までスクロールさせ、編集をクリックします。

静的ウェブサイトホスティング「有効にする」をチェックします。
インデックスドキュメントには、フォルダのURLだけを指定されたときに開きたいファイル名を指定します（index.html 以外でも大丈夫です）。
エラードキュメントも必要に応じて指定します。
変更の保存をクリックします。

アクセス許可のタブをクリックします。
バケットポリシーの編集ボタンをクリックします。

ポリシーの部分に、下記のJSONを貼り付けます。
CHANGE_PUBLIC_BUCKET_NAME の部分は実際のバケット名に置き換えて下さい。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::CHANGE_PUBLIC_BUCKET_NAME/*"
        }
    ]
}

変更の保存をクリックします（このタイミングで公開の状態になります）。