メニュー

S3のWEBサイトをCloudFrontからのみアクセス可能にする

AWS
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

S3のWEBサイトをCloudFrontからだけアクセスできるようにしたいです

先生

S3にCloudFrontからしかアクセスできなくする手順を説明します

S3でWEBサイトを作成する手順は以下の記事になります。

あわせて読みたい
S3でのWEBサイトの作り方 WEBサイトの運用料金を安くしたいです AWSのS3なら静的なWEBサイトを低料金で運用できます この記事で分かること AWSのS3でWEBサーバーを作成するメリット AWSのS3でWEB…

S3のWEBサイトをCloudFrontとRoute53でSSLと独自ドメインに対応する手順は以下の記事になります。

あわせて読みたい
S3のWEBサイトを独自ドメインでhttps対応してSSL証明書を自動更新する S3で作ったWEBサイトでもhttps対応あできますか？ S3のWEBサイトをhttpsや独自ドメインで公開する方法を説明します  この記事でわかること S3で作成したWEBサイトをClou…

上の手順では、S3の静的ウェブサイトホスティング機能を使っているので、S3のURLからでもアクセスできます。

S3のURLでアクセスする

S3でバケットの上部メニューのプロパティを選択します

静的ウェブサイトホスティングのリンクをクリックします。

S3で作成したWEBサイトにアクセスできます。

S3のURLからhttpでアクセスできても特に問題はありませんが、CloudFront経由のhttpsでのみアクセス可能にした方が、アクセスログも見やすくなるなどWEBサイトを管理しやすいです。

この記事では、S3の静的ウェブサイトにCloudFront経由でしかアクセスできないようにする手順を説明します。

この記事で分かること
  • S3の静的WEBサイトをCloudFrontからアクセスできるようにする手順
目次

S3の設定を変更する

S3でWEBサイトのバケットを選択します。

静的WEBサイトホスティングを無効にする

CloudFrontからのみS3にアクセス可能にする場合、S3のホスティング機能は不要なので無効にします。

S3のバケット画面の上部メニュープロパティを選択します。

静的ウェブサイトホスティングの編集をクリックします。

無効にするを選択して 変更の保存をクリックします。

静的ウェブサイトホスティングが無効に設定されます。

パブリックアクセスをすべてブロックする

CloudFrontからS3へのアクセスには影響しないため、パブリックアクセスはすべてブロックします。

バケットのアクセス許可でブロックパブリックアクセス(バケット設定)の編集をクリックします。

パブリックアクセスをすべてブロックのチェックをONにして 変更の保存をクリックします。

確認画面が出るので確認と入力して 確認をクリックします。

パブリックアクセスのブロックの設定が完了します。

バケットポリシーを削除する

後で新しいバケットポリシーを設定する時に書き換えるのでも構わないのですが、分かりやすいようにここで削除しています。

バケットのアクセス許可でバケットポリシーのを削除します。 削除をクリックします。

確認画面が出るので削除と入力して 削除をクリックします。

バケットポリシーの削除が完了します。

ディストリビューションの設定を変更する

次に、ディストリビューションの設定を変更します。

CroudFrontでS3にアクセスするディストリビューションを選択します。

デフォルトルートオブジェクトの設定

CloudFrontでドメイン名でアクセスした時にindex.htmlファイルが表示される用に設定します。

ディストリビューションの一般タブの 編集をクリックします。

デフォルトルートオブジェクトにindex.htmlと入力して 変更を保存をクリックします。

オリジンの変更

CloudFrontがコンテンツを取得するオリジンをS3のWEBサイトエンドポイントからS3のエンドポイントに変更します。

S3のWEBサイトエンドポイントは、上の手順で無効に設定しているので使用できません。

ディストリビューションの画面でオリジンを開いて、設定を変更するディストリビューションを選択して 編集をクリックします。

オリジンの編集画面でオリジンドメインのリストから、WEBサイトのS3を選択します。

S3ウェブサイトポイントは選択しない

S3の静的WEBホスティングが有効の場合、リストからS3を選択後に以下のようにウェブサイトエンドポイントを選択するように促すメッセージが表示されますが、無視してそのままにします。

オリジンアクセスでOrigin access control settingsを選択します。

またOrigin access controlのリストからアクセスするS3を選択します。

バケットポリシーをコピーしておく
ポリシーをコピーをクリックすると設定した内容のバケットポリシーをクリップボードにコピーできます。

この後の手順で使いますので、必ずコピーしておきます。

変更を保存をクリックします。

オリジンの設定が完了します。

ここの ポリシーをコピーでも、この後で使うバケットポリシーをクリップボードにコピーできます。

S3にディストリビューションの設定内容を反映

バケットポリシーの設定

ディストリビューションで設定した内容のバケットポリシーをS3で設定します。

S3のアクセス許可を開いてブロックパブリックアクセス(バケット設定)の 編集をクリックします。

バケットポリシーの編集画面が開くのでポリシーにディストリビューションの設定でコピーしたポリシーを貼り付けます。

変更を保存をクリックするとポリシーの設定は完了です。

CroudFrontの代替ドメイン名 (CNAME)で設定しているドメインでアクセスできることを確認します。

アクセスできない場合

WEBサイトにアクセスした時、ブラウザに以下のように表示される場合は設定が間違えている可能性があります。

以下の設定が合っているかを見直してみてください。

  • ディストリビューションの一般のデフォルトルートオブジェクトにindex.htmlが設定されているか
  • S3のアクセス許可のバケットポリシーが正しく設定されているか
AWS
よかったらシェアしてね！
  • URLをコピーしました！
目次