この記事でやること

静的ウェブサイトホスティングを使用せずにCloudFrontからS3上に配置した静的ページをを表示する方法について。
ドメインの紐付けまではしない。

自己紹介

都内のDevOps系の企業でエンジニアをやっています。
主にAWSとTerraformを扱っております。
フルリモートで勤務しております。
大阪在住、年齢は27歳、趣味は古着屋巡りと映画鑑賞です。

静的ページの準備

静的サイトについては以下ページのサンプルページを使いたいと思います。
https://code-step.com/portfolio1-menu/

S3バケットの作成

まずは以下設定で作成します。

ごく普通のバケットの作成です。

次に作成した静的コンテンツをS3バケット上にアップロードします。

アップロードが完了しました。

※現段階において静的コンテンツは公開されていません。

CloudFrontの設定

引き続きCloudFrontの設定をやっていきます。

[ディストリビューション]の作成を押下します。

OAIを作成してCloudFrontからファイルアクセスできるようにします。

ディストリビューション作成後、

S3のバケットポリシーを変更してCloudFrontディストリビューションからのアクセスを許可する必要があります。

CloudFront側でポリシーステートメントが用意されているのでそちらを使用していきます。

[ディストリビューション]→[オリジン]→[編集]

編集画面の[ポリシーをコピー]を押下してください。

バケットポリシーの更新

コピーしたポリシーステートメントをバケットポリシーに貼り付けてバケットポリシーを更新します。
以下がバケットポリシーです。

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::static-sample-2023-0628/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::AccountID:distribution/DistributionID"
                }
            }
        }
    ]
}

CloudFrontからアクセス

ではCloudFrontのディストリビューションドメイン名からアクセスしてみましょう。

ドメイン名そのままアクセスしたらエラーがでました。

/index.htmlを付ける必要がありました。。

AWSではデフォルトルートパスを設定することが推奨されています。

[一般]→[編集]から

[デフォルトルートオブジェクト]に

index.htmlとします。

/index.htmlではないので要注意です。

設定できました。

再度ドメイン名から確認してみましょう。

ドメイン名だけでアクセスできることが確認できました。

以上がS3に格納した静的ファイルをCloudFront経由で閲覧する方法になります。