はじめに

CloudFront に定額プランが登場したのはご存じでしょうか？

従来はリクエスト数やデータ転送量によって料金が変動する従量制でしたが
新たに毎月一定額でご利用いただける定額制プランも導入されました

定額料金プランでは以下の４つの中から選ぶことが出来ます

Free（$0/月）
Pro（$15/月）
Business（$200/月）
Premium（$1,000/月）

今回はProプランでの静的Webサイトの構築手順を紹介します！

前提条件

Route53でドメイン取得済み（例: example.com）
ACMで証明書発行済み

CloudFront Proプランに含まれるもの

WAF保護: Web ACL + 25ルール
DNS管理: Route53（レコード + 500万クエリ/月）
S3ストレージ 50GBクレジット（$1.25）※東京リージョンの場合

詳細はAWSドキュメントをご確認ください

CloudFrontの定額料金プラン - Amazon CloudFront

構成

これから作成するもの

S3バケット（コンテンツ格納用）
CloudFront ディストリビューション（CDN）

構築手順

Phase 1: S3バケットの作成

静的コンテンツを格納するS3バケットを作成します

1-1. S3コンソールへ移動

検索バーに「S3」と入力し、サービスを選択します
「バケットを作成」ボタンをクリックします

1-2. バケットの基本設定

バケット名: example-com-website（グローバルで一意な名前）
- ドメイン名をハイフン区切りにすると管理しやすい
AWSリージョン: 任意（例: ap-northeast-1 東京）

1-3. パブリックアクセス設定

オブジェクト所有者: 「ACL無効（推奨）」を選択します
パブリックアクセスをすべてブロック: ✅ チェックを付けたままにしてください

1-4. その他の設定

1-5. サンプルHTMLファイルの準備

最低限、以下のファイルを用意します

index.html（例）:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Example.com</title>
</head>
<body>
    <h1>CloudFront Pro プラン 静的Webサイト</h1>
    <p>正常に表示されています！</p>
</body>
</html>

error.html（例）:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>404 - ページが見つかりません</title>
</head>
<body>
    <h1>404 Error</h1>
    <p>お探しのページは見つかりませんでした。</p>
</body>
</html>

1-6. S3へのコンテンツアップロード

S3コンソールで作成したバケットを開きます
「アップロード」ボタンをクリックします
「ファイルを追加」または「フォルダを追加」をクリックします
index.html、error.html、その他のファイルを選択します
「アップロード」ボタンをクリックします

Phase 2: CloudFront ディストリビューションの作成

CloudFront Proプランでディストリビューションを作成します

2-1. CloudFrontコンソールへ移動

検索バーに「CloudFront」と入力し、サービスを選択します
「ディストリビューションを作成」ボタンをクリックします

2-2. プラン設定

定額プラン[Free] [Pro] [Business] [Premium]からProプランを選択します
「next」ボタンをクリックします

2-3. ディストリビューション設定

ディストリビューション名を入力します
事前準備したRoute53 ドメイン名を入力「Check domain」ボタンをクリックします
「next」ボタンをクリックします

2-4. オリジン設定

オリジンタイプ : AmazonS3を選択します
phase1で作成したS3バケットを入力します
オリジンパスを入力します

2-5. オリジン設定　キャッシュ設定

Allow private S3 bucket access to CloudFront にチェックが入っていることを確認
(和訳：CloudFrontへのプライベートなS3バケットアクセスを許可する)
チェックをすることでS3がCloudFrontアクセスのみを許可するバケットポリシーが
対象のS3に記載されます
オリジン設定推奨設定が選択されていることを確認します
※接続回数やタイムアウトの設定を行いたい場合はカスタムを選択してください
キャッシュ設定推奨設定が選択されていることを確認します
※ビューワーやプロトコルの設定を行いたい場合はカスタムを選択してください
「next」ボタンをクリックします

2-6. WAF設定

モニターモードを使用するか選択できます
レイヤー7のDDoS攻撃に対する保護　※Businessプランから有効にできます
CloudFront定額プランではウェブサイトやアプリケーションを標的とした
DDoS攻撃から常時保護されますが、より高度なDDoS防御を行いたい場合は
プランをBusinessプラン以上にする必要があります
※今回はProプランのためデフォルト設定（無効）のままで進めます
「next」ボタンをクリックします

WAFは自動的に設定されます、個別のWeb ACL作成は不要です

2-7. 証明書設定

証明書を発行済みの場合は自動的に証明書が選択されます
画面上で作成する場合は「Create a new certificate」を選択します
・「Create certificate」ボタンをクリックします
今回は発行済みなので「next」ボタンをクリックします

2-8. 最終確認

各項目をチェックします
問題がなければ「Create distribution」ボタンをクリックします

2-9. デプロイ完了待ち

CloudFrontコンソールに戻ります
ディストリビューションのステータスが「デプロイ中」→「有効」になるまで待機
有効になればOKです

Phase 3: S3バケットポリシー確認

3-1. S3コンソールへ移動

作成したS3バケットを選択します

2.タグの「アクセス許可」のバケットポリシーを確認します

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

Phase 4: CloudFront　OAC確認

4-1. CloudFrontコンソールへ移動

作成したCloudFrontを選択します
タグの「オリジン」作成されたオリジンを確認します
※CloudFrontのディストリビューション作成時のオリジン設定の際
CloudFrontへの「プライベートなS3バケットアクセスを許可する」に
チェックをすることでOACも構築されます

Phase 5: Route53 DNS設定

5-1. Route53コンソールへ移動

検索バーに「Route53」と入力し、サービスを選択します
左メニューから「ホストゾーン」を選択します
取得済みのドメイン（example.com）をクリックします

5-2. Aレコードの作成（メインドメイン）

「レコードを作成」ボタンをクリックします
レコード名: 空欄（example.com用）
レコードタイプ: A
エイリアス: ✅ オン
トラフィックのルーティング先:
- 「CloudFrontディストリビューションへのエイリアス」を選択します
- 作成したディストリビューションを選択します
「レコードを作成」ボタンをクリックします

Phase 6: 動作確認

6-1. CloudFront経由でのアクセスを確認します

ブラウザで https://example.com にアクセスします
index.htmlの内容が表示されることを確認します

6-2. HTTPS動作確認

URLバーの鍵マークをクリックします
証明書が有効であることを確認します

6-3. エラーページの確認

存在しないページにアクセスします（例: https://example.com/test）
error.htmlが表示されることを確認します

6-4. WAF動作確認（CloudFront Proプラン）

CloudFrontコンソールでディストリビューションを開きます
「Security」タブを選択します
WAF保護が有効になっていることを確認します

まとめ

今回紹介した構成により、CloudFront 定額プランを活用した静的Webサイトを、セキュアかつ安定したコストで実現できました

小規模〜中規模サイトでも本格的な運用基盤を手軽に構築できます

定額プランの大きな特徴でもある、使用量を超えた場合は超過料金は発生しません
※ですがパフォーマンス低下などの措置は取られます
(例：トラフィックを少ないエッジロケーションまたはより遠いエッジロケーションから提供する、スループットの削減、など)

本記事が、より堅牢でスケーラブルな静的Webサイト基盤を構築する際の参考になれば幸いです