VueアプリケーションをS3にデプロイしてCloudFront経由でアクセスできるように設定したのですが、ClourFrontのディストリビューションを作成する時に設定したRestrict Bucket Access: Yesの項目が反映されておらず、S3内のオブジェクトタブ内に表示されているindex.htmlのオブジェクトURLにアクセスするとページが表示されてしまします。
CloudFrontからしかアクセスしないため静的ウェブサイトホスティングは使用しないのですが、静的ウェブサイトホスティングを有効にしてそちらのURLにアクセスするとページが表示されてしまいます。
現在のS3のアクセス許可設定はブロックパブリックアクセスの4つの項目が全てオフ(GitHub Actionsで自動デプロイの設定をしているのですが、全てオフにしないとアップロードができませんでした。)、バケットポリシーは以下のような状態です。
{ "Version": "2008-10-17", "Id": "PolicyForCloudFrontPrivateContent", "Statement": [ { "Sid": "2", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <ディストリビューションのOrigin Access Identity>" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<バケット名>/*" } ] }
アクセスコントロールリストは以下のような状態です。
被付与者 | オブジェクト | オブジェクトACL |
---|---|---|
オブジェクト所有者(AWSアカウント) | 読み込み | 読み取り、書き込み |
全員(パブリックアクセス) | - | - |
Authenticated Users グループ(AWSアカウントを持つ全てのユーザー) | - | - |
S3に保存されているindex.htmlのアクセス許可設定は以下のようになっています(GitHub ActionsでS3にアップロードする時に、アップロードするオブジェクトに対して読み取り権限を与える設定になっています)。
被付与者 | オブジェクト | オブジェクトACL |
---|---|---|
オブジェクト所有者(AWSアカウント) | 読み込み | 読み取り、書き込み |
全員(パブリックアクセス) | 読み込み | - |
Authenticated Users グループ(AWSアカウントを持つ全てのユーザー) | - | - |
Restrict Bucket Access: Yesに設定しているにも関わらずオブジェクトURLにアクセスした時にページが表示されてしまう原因なのですが、バケット内に保存されているオブジェクトにパブリックアクセスの読み取り権限が付与されているからでしょうか?他に考えられる原因がありましたら教えて頂きたいです。
よろしくお願い致します。
追記
GitHub ActionsでS3にアップロードする時に、オブジェクトに対してパブリックの読み取り権限を与えない設定にしたところ、静的ウェブサイトホスティングからはアクセスできなくなりました。
しかし、依然オブジェクトURLからアクセスした場合にページが表示されてしまいます。オブジェクトURLからアクセスした場合でもページを表示されないようにするにはどうすればいいか、アドバイスを頂きたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。