3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tokaicom_matsuokain株式会社TOKAIコミュニケーションズ（クラウド）

CloudFront Proプランで静的Webサイトの構築

3
Last updated at Posted at 2026-02-17

はじめに

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

構成

構成図.png

これから作成するもの

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

構築手順

Phase 1: S3バケットの作成

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

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

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

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

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

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

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

1-4. その他の設定

  1. バケットのバージョニング: 無効（任意で有効化可能）
  2. デフォルト暗号化: 「Amazon S3マネージドキー（SSE-S3）」を選択します
  3. 「バケットを作成」ボタンをクリックします
    S3 1-4.png

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へのコンテンツアップロード

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

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

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

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

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

2-2. プラン設定

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

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

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

2-4. オリジン設定

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

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

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

2-6. WAF設定

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

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

2-7. 証明書設定

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

2-8. 最終確認

  1. 各項目をチェックします
  2. 問題がなければ「Create distribution」ボタンをクリックします
    07最終のチェック.png
    07最終のチェック-2.png

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

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

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

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

  1. 作成したS3バケットを選択します
    その他-1.png
    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コンソールへ移動

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

Phase 5: Route53 DNS設定

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

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

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

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

Phase 6: 動作確認

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

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

6-2. HTTPS動作確認

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

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

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

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

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

まとめ

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

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

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

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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?