概要

本記事は AWSでWebアプリを構築してみるシリーズの3回目の記事です。
前回の記事はこちら。

本記事で作成する構成

本記事では静的ウェブサイトをCloudFront経由のアクセスしか許可しないようにしてみます。

ここでは図のようにCloudFrontを経由した間接的なアクセスのみ可能な状態で、S3でホスティングした静的ウェブサイトに直接アクセスすることができなくなります。

静的ウェブサイトをCloudFront経由のアクセスしか許可しないようにする

1. S3の設定を変更する

静的ウェブサイトホスティングでホスティングしてみるで作成したバケットを開き、プロパティタブから「静的ウェブサイトホスティング」の「編集」をクリックし、静的ウェブサイトホスティングを無効にする
静的ウェブサイトホスティングでホスティングしてみるで作成したバケットを開き、アクセス許可タブから「ブロックパブリックアクセス（バケット設定）」の「編集」をクリックし、パブリックアクセスをすべてブロックする

2. CloudFrontでOACを作成する

マネジメントコンソールからCloudFrontを開き、セキュリティのオリジンアクセスを開き、「コントロール設定を作成」をクリック
「名前」に例えば S3バケット名-oac のよう名前を入力してコントロール設定を作成する
静的ウェブサイトホスティングにCloudFrontを経由してアクセスしてみるで作成したCloudFrontのディストリビューションを開き、オリジンタブから作成したオリジンを選択して「編集」をクリック
「Origin domain」で静的ウェブサイトホスティングでホスティングしてみるで作成したバケットを選択し、「オリジンアクセス」を「Origin access control setting(recommended)」を選択し、「Origin access control」にさきほど作成したコントロール設定を選択して変更を保存します。
静的ウェブサイトホスティングにCloudFrontを経由してアクセスしてみるで作成したCloudFrontのディストリビューションを開き、一般タブから「設定」の「編集」をクリック
「デフォルトルートオブジェクト」に「index.html」を設定する

3. S3のバケットポリシーにOAIを設定する

静的ウェブサイトホスティングでホスティングしてみるで作成したバケットを開き、アクセス許可タブから「バケットポリシー」の「編集」をクリックし、静的ウェブサイトホスティングにCloudFrontを経由してアクセスしてみるで作成したCloudFrontのディストリビューションのIDをPrincipalにOAIにしてバケットポリシーを設定する

{
    "Version": "2012-10-17",
    "Statement": {
        "Sid": "AllowCloudFrontServicePrincipalReadOnly",
        "Effect": "Allow",
        "Principal": {
            "Service": "cloudfront.amazonaws.com"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::<S3 バケット名>/*",
        "Condition": {
            "StringEquals": {
                "AWS:SourceArn": "arn:aws:cloudfront::<AWS アカウント ID>:distribution/<CloudFront ディストリビューションID>"
            }
        }
    }
}

4. アクセスを確認する

静的ウェブサイトホスティングにCloudFrontを経由してアクセスしてみるで作成したディストリビューションの一般タブを開き、「ディストリビューションドメイン名」をコピーしてブラウザで開き、アクセスできることを確認する
静的ウェブサイトホスティングでホスティングしてみるで作成したバケットから「index.html」のオブジェクトを開きプロパティタブにあるオブジェクトURLを開いてもアクセスが拒否されることを確認する