![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
S3のWEBサイトをCloudFrontからだけアクセスできるようにしたいです
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
S3にCloudFrontからしかアクセスできなくする手順を説明します
S3でWEBサイトを作成する手順は以下の記事になります。
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-1-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-1-300x158.jpg)
S3のWEBサイトをCloudFrontとRoute53でSSLと独自ドメインに対応する手順は以下の記事になります。
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-2-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-2-300x158.jpg)
上の手順では、S3の静的ウェブサイトホスティング機能を使っているので、S3のURLからでもアクセスできます。
S3でバケットの上部メニューのプロパティを選択します
![](https://mik2062.jp/wp-content/uploads/2023/06/image-212.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-212.png)
静的ウェブサイトホスティングのリンクをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-213.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-213.png)
S3で作成したWEBサイトにアクセスできます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-214.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-214.png)
S3のURLからhttpでアクセスできても特に問題はありませんが、CloudFront経由のhttpsでのみアクセス可能にした方が、アクセスログも見やすくなるなどWEBサイトを管理しやすいです。
この記事では、S3の静的ウェブサイトにCloudFront経由でしかアクセスできないようにする手順を説明します。
- S3の静的WEBサイトをCloudFrontからアクセスできるようにする手順
S3の設定を変更する
S3でWEBサイトのバケットを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-262.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-262.png)
静的WEBサイトホスティングを無効にする
CloudFrontからのみS3にアクセス可能にする場合、S3のホスティング機能は不要なので無効にします。
S3のバケット画面の上部メニュープロパティ
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-280.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-280.png)
静的ウェブサイトホスティング
の編集
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-264.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-264.png)
無効にする
を選択して 変更の保存をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-266.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-266.png)
静的ウェブサイトホスティングが無効に設定されます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-267.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-267.png)
パブリックアクセスをすべてブロックする
CloudFrontからS3へのアクセスには影響しないため、パブリックアクセスはすべてブロックします。
バケットのアクセス許可
でブロックパブリックアクセス(バケット設定)
の編集
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-269.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-269.png)
パブリックアクセスをすべてブロック
のチェックをONにして 変更の保存をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-270.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-270.png)
確認画面が出るので確認
と入力して 確認をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-230.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-230.png)
パブリックアクセスのブロックの設定が完了します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-271.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-271.png)
バケットポリシーを削除する
バケットのアクセス許可
でバケットポリシー
のを削除します。 削除をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-272.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-272.png)
確認画面が出るので削除
と入力して 削除をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-252.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-252.png)
バケットポリシーの削除が完了します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-273.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-273.png)
ディストリビューションの設定を変更する
次に、ディストリビューションの設定を変更します。
CroudFrontでS3にアクセスするディストリビューションを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-282.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-282.png)
デフォルトルートオブジェクトの設定
CloudFrontでドメイン名でアクセスした時にindex.htmlファイルが表示される用に設定します。
ディストリビューションの一般
タブの 編集をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-274.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-274.png)
デフォルトルートオブジェクト
にindex.htmlと入力して 変更を保存をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-275.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-275.png)
オリジンの変更
CloudFrontがコンテンツを取得するオリジンをS3のWEBサイトエンドポイントからS3のエンドポイントに変更します。
ディストリビューションの画面でオリジン
を開いて、設定を変更するディストリビューションを選択して 編集をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-276.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-276.png)
オリジンの編集画面でオリジンドメイン
のリストから、WEBサイトのS3を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-224.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-224.png)
S3の静的WEBホスティングが有効の場合、リストからS3を選択後に以下のようにウェブサイトエンドポイントを選択するように促すメッセージが表示されますが、無視してそのままにします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-284.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-284.png)
オリジンアクセス
でOrigin access control settings
を選択します。
またOrigin access control
のリストからアクセスするS3を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-285.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-285.png)
この後の手順で使いますので、必ずコピーしておきます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-286.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-286.png)
変更を保存をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-236.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-236.png)
オリジンの設定が完了します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-258-1024x518.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-258-1024x518.png)
S3にディストリビューションの設定内容を反映
バケットポリシーの設定
ディストリビューションで設定した内容のバケットポリシーをS3で設定します。
S3のアクセス許可
を開いてブロックパブリックアクセス(バケット設定)
の 編集をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-277.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-277.png)
バケットポリシーの編集画面が開くのでポリシー
にディストリビューションの設定でコピーしたポリシーを貼り付けます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-278.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-278.png)
変更を保存をクリックするとポリシーの設定は完了です。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-287.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-287.png)
CroudFrontの代替ドメイン名 (CNAME)
で設定しているドメインでアクセスできることを確認します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-288.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-288.png)
WEBサイトにアクセスした時、ブラウザに以下のように表示される場合は設定が間違えている可能性があります。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-289.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-289.png)
以下の設定が合っているかを見直してみてください。
- ディストリビューションの
一般
のデフォルトルートオブジェクト
にindex.html
が設定されているか - S3の
アクセス許可
のバケットポリシー
が正しく設定されているか