説明

S3の静的ウェブサイトホスティング、AWS公式のチュートリアルを参考にして設定してみたんですが、ハマったところがいくつかあり、なおかつネット上で解決策を見つけられなかったので、ハマりどころとその解決策を共有します。
同じところでハマった方の助けになればと思います。

ハマりどころ

下記のスクリーンショットの通り、バケットポリシーが作成できない。

原因は、「S3ブロックパブリックアクセス」でパブリックなバケットポリシーの作成を制限していたこと。問題の箇所についてAWSの開発者ガイドから引用すると・・・

BlockPublicPolicy
このオプションを TRUE 設定すると、指定されたバケットポリシーでパブリックアクセスが許可されている場合、Amazon S3 は PUT Bucket ポリシーへの呼び出しを拒否します。

と言うことで、以下のスクリーンショットの通り、「Block new public bucket policies」をFalseに設定することで、パブリックなバケットポリシーが作成できました。

バケットポリシーの作成、S3の静的ウェブサイトホスティングの設定を済ませた上でエンドポイントにアクセスしたところ、アクセスが拒否された。

ハマりどころ1と同様、S3ブロックパブリックアクセスが原因だった。
また開発者ガイドから引用すると・・・

RestrictPublicBuckets
このオプションを TRUE に設定すると、パブリックポリシーを持つバケットへのアクセスは、AWS サービスとバケット所有者のアカウント内の承認されたユーザーのみに制限されます。

今度は「Block public and cross-account access if bucket has public policies」をFalseに設定することで、無事ページが閲覧できるようになった。

ハマりどころ1, 2を乗り越え、S3のエンドポイントへの直アクセスではページが閲覧できるようになったが、ドメイン名を指定してアクセスすると404 Not Foundになる、と言う現象。

原因はS3のバケット名がドメインと異なったこと。今回の場合、

バケット：example-qiita
ドメイン：example-qiita.com

のように別の名前にしていたため、404のエラーになってしまっていた。

どうやらRoute53はドメイン名のままS3にルーティングするみたいなので、バケットを「example-qiita.com」の名前で作り直すことで、無事サイトが公開できた。

「書いてある通りやっても上手く行かない」ことって多いですね！
（英語のチュートリアルを読みながらやったので、書いてある通りできてないかも）