S3で静的WEBサイトを立ち上げようとしたら４０３（４０４）エラーが出て困った話

さいちゃん

2022.01.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうもさいちゃんです。今回はCloudFrontのテストのためにS3の静的ウェブサイトホスティングを使ってテストサイトを立ち上げたっかったので久々に試してみたらさっそく403エラーが出てハマってしまったので、ハマった部分をまとめてみました。

S3の概要

S3はAWSの提供するストレージサービスです。あらゆるデータを安全に保存することができるのですが、機能の一つに静的ウェブサイトのホスティングというものがあります。

S3バケットにhtmlファイルなどをアップロードしてWEBサイトとして閲覧できるようにすることができる機能です。

今回はハマった部分だけをまとめてみたので、詳しいホスティングの方法はこちらをご覧ください。

ハマったところ

バケットを作ってファイルをアップロードして、静的WEBコンテンツの有効化をしてさぁOK！と思ってURLに飛んでみたら見事に403（404）エラーが出てきました。

403エラー（Forbidden）
何らかの原因でユーザーがサイトの閲覧を禁止されている際に出るエラー表示です。アクセス権がない場合などに表示されます。
404エラー（No Found）
ページが見つからない（存在しない）場合に出るエラーになります。

こうなってしまった原因がいくつかあったのでまとめてみました。

ブロックアクセスリストの設定

403エラーの原因はいろいろあったのですが、まずはブロックアクセスリストでした。

アクセス許可からブロックパブリックアクセス (バケット設定)の編集に進むと下記の画面が出てきます.

うっかりこのチェックボックスのチェックを外し忘れていたんですね。

チェックをつけたままだと、パブリックにアクセスすることができなくなってしまいますので、すべてのチェックリストからチェックが外れていることを確認して変更を保存します。

こちらのチェックを外すと警告のポップアップが出てきますが、今回はバケットの中身を公開したいので、確認と打ち込んで大丈夫です。

ただ、これでも引き続きエラーが出てます。

バケットポリシーの設定

次に変更したのは、バケットポリシーです。

引き続きアクセス許可の項目からバッケトポリシーを確認します.

AWSへのアクセスはデフォルトですべて拒否されているのでバケットポリシーを下記のように変更してあげます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

バッケト名の部分を自身が作成したS3バケット名に変更をして保存します。

バケットポリシーの変更が完了したので、再度ページにアクセスをしてみると、