AWSコンソールだけでS3 + CloudFront静的サイトホスティングを構築する手順【SAM版との比較付き / 新UI対応】

はじめに

この記事は、SAM版ハンズオン記事の比較版です。

SAM版ではコマンド数本でS3・OAC・CloudFront・バケットポリシーが一括デプロイできましたが、実際にコンソールで操作してみると思わぬハマりポイントがいくつかあります。

特に CloudFront コンソールは 2026年に大きくUIが刷新 され、6ステップのウィザード形式に変わりました。ネット上の古い手順書と画面が全く違って戸惑う人が多いはずです。この記事では 2026年の新UI に対応した手順を詳しく解説します。

この記事を読むとわかること：

• CloudFront 新UI（6ステップウィザード）の各ステップで何を設定するか
• 「Allow private S3 bucket access to CloudFront」チェックボックスで何が自動化されるのか
• 削除時に新登場した「Pricing plan キャンセル」手順（これを知らないと削除できない）
• キャッシュ削除（旧: 「無効化」）の操作と注意点

CloudFront 新UI で戸惑いやすいポイント（先読み）

操作を始める前に、旧UIとの違いを把握しておきましょう。

「Pricing plan キャンセル」が最大のハマりポイント：
新UIで作成したディストリビューションは「Pricing plan（プライシングプラン）」に加入しています。
削除する前にプランをキャンセルする操作が必要で、しかもキャンセルは月末（翌月1日）に有効になるため、すぐに削除できません。
知らないと「subscribed to a pricing plan」エラーで詰まります（後述）。

Amazon検索[本 AWS 開発]

SAM vs コンソール：どれだけ違うか

構築するもの

SAM版と全く同じ構成・機能の静的サイトホスティング環境を構築します。

ブラウザ
  ↓ HTTPS（HTTPは自動リダイレクト）
CloudFront（CDN・エッジキャッシュ）
  ↓ OAC（署名付きリクエスト）
S3 バケット（非公開・パブリックアクセスブロック）
  └── index.html / error.html

全体の作業順序

① S3 バケット作成（非公開）
      ↓
② CloudFront ディストリビューション作成（6ステップウィザード）
      ↓（自動でOAC設定・バケットポリシー更新）
③ S3 バケットポリシーの確認（自動設定を確認）
      ↓
④ HTML ファイルをアップロード
      ↓
⑤ CloudFront URL でアクセス確認
      ↓
⑥ キャッシュの動作確認（任意）
⑦ リソースの削除（要注意: 月末まで待機が必要）

順序の理由：
② でCloudFrontディストリビューションを作成する際に「どのS3バケットをオリジンにするか」を指定するため、① でバケットを先に作成しておく必要があります。

① S3 バケット作成

AWSコンソール → S3 → 「バケットを作成」

「バケットを作成」をクリックします。

パブリックアクセスをブロックしたまま使う理由：
従来の静的サイトホスティングではS3バケットを公開する方法もありましたが、現在の推奨は S3を非公開にしてCloudFront OAC経由でのみアクセスさせる構成です。直接S3 URLからのアクセスを防ぎ、CloudFrontのHTTPS・キャッシュ・WAFの恩恵を受けられます。

バケット名のルール：

• グローバルで一意（AWS全体で重複不可・削除後しばらく再利用不可）
• my-cloudfront-website-自分のAWSアカウントID のように末尾にアカウントIDを付けると一意にしやすい
• SAMでは !Sub "${AWS::StackName}-website-${AWS::AccountId}" で自動的に一意化しています

控えておく情報：

• バケット名（例: my-cloudfront-website）

② CloudFront ディストリビューション作成（新UI・6ステップウィザード）

AWSコンソール → CloudFront → 「ディストリビューションを作成」

CloudFrontはグローバルサービスのため、コンソール右上のリージョン表示は「グローバル」になります。
S3バケットのリージョンは東京（ap-northeast-1）のままで問題ありません。

ステップ1: Choose a plan（プランを選択）

「Next」をクリックします。

無料プランの内容（1ヶ月あたり）：

• リクエスト数: 100万（1M）
• データ転送: 100GB
• DDoS保護・グローバルCDN・デフォルトキャッシュルールが含まれる

ハンズオン目的では無料枠で十分です。有料プランは本番サービスで大量トラフィックが想定される場合に選択します。

SAMとの差分： SAM（CloudFormation）で作成したディストリビューションにはPricing planの概念がありません。「月額$0」のプランでも加入状態になるため、削除時にキャンセル手続きが必要になります（後述）。

ステップ2: Get started（基本設定）

「Next」をクリックします。

ステップ3: Specify origin（オリジンの指定）

このステップが最も重要です。S3バケットをオリジンとして設定し、OACを自動構成します。

Origin type セクション：

Origin セクション：

Settings セクション：

「Next」をクリックします。

「Allow private S3 bucket access to CloudFront」チェックボックスの重要性：

これが新UIの最大の改善点です。チェックを入れると：

1. CloudFrontが S3 に安全にアクセスするための OAC（Origin Access Control）を自動作成
2. ディストリビューション作成後に S3バケットポリシーを自動で更新

旧UIでの手順（参考）：

1. CloudFront → OAC を手動で作成
2. ディストリビューション作成時にOACを選択・ARNをコピー
3. S3 → バケットポリシーを手動で編集・貼り付け

新UIではこのすべてがチェック1つで完結します。

SAMとの差分： SAMでは Type: AWS::CloudFront::OriginAccessControl リソースと WebsiteBucketPolicy リソースで同じことを明示的に定義しています。

ステップ4: Enable security（セキュリティ設定）

「Security protections from WAF are included in your plan at no additional charge.」と表示されます。無料プランにWAF保護が含まれており、追加料金は発生しません。

「Next」をクリックします。

「Use monitor mode」について：
チェックを入れると「何がブロックされるかを記録するだけ」のモードになります（実際にはブロックしない）。ハンズオンでは不要なのでチェックせずに進みます。

ステップ5: Review and create（確認と作成）

設定内容を確認して「ディストリビューションを作成」をクリックします。

控えておく情報：

• CloudFront ドメイン名（例: xxxxxxxxxxxx.cloudfront.net）
• ディストリビューション ID（例: EXXXXXXXXXXXXXXXXX）

CloudFrontのデプロイには 5〜15分かかります。
ステータスが「有効」になるまで待ってから次のステップに進んでください。

③ S3 バケットポリシーの確認

新UIでは、ステップ3で「Allow private S3 bucket access to CloudFront」にチェックを入れると、ディストリビューション作成時に S3バケットポリシーが自動で更新されます。

自動設定されたポリシーを確認します。

S3 → my-cloudfront-website → 「アクセス許可」タブ → 「バケットポリシー」

以下のようなポリシーが自動で設定されていることを確認します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-cloudfront-website/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/EXXXXXXXXXXXXXXXXX"
                }
            }
        }
    ]
}

このポリシーのポイント：

• Principal.Service: cloudfront.amazonaws.com — CloudFrontサービスからのアクセスのみ許可
• Condition.AWS:SourceArn — 特定のディストリビューションからのアクセスのみ許可（他のCloudFrontからはアクセスできない）
• Action: s3:GetObject のみ — 読み取り専用。書き込み・削除は不可

SAMとの差分： SAMでは WebsiteBucketPolicy リソースに上記と同じポリシーを明示的に記述しています。コンソールでは自動設定されますが、SAMを読むとその中身が可視化されます。

④ HTML ファイルをアップロード

アップロードするHTMLファイルの内容を確認しておきます。自分で用意した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>S3 + CloudFront ハンズオン</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 640px;
      margin: 60px auto;
      padding: 20px;
      color: #333;
    }
    h1 { color: #232f3e; }
    .badge {
      background: #ff9900;
      color: white;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 0.85em;
      font-weight: bold;
    }
    .info {
      background: #f4f6f8;
      border-left: 4px solid #ff9900;
      padding: 12px 16px;
      margin: 20px 0;
      border-radius: 0 4px 4px 0;
    }
  </style>
</head>
<body>
  <h1>デプロイ成功！</h1>
  <p>
    <span class="badge">CloudFront CDN</span> 経由でこのページが配信されています。
  </p>
  <div class="info">
    <strong>このページの配信構成:</strong><br>
    S3 バケット（オリジン） → CloudFront（CDN）→ あなたのブラウザ
  </div>
  <p>S3 + CloudFront による静的サイトホスティングのハンズオンです。</p>
</body>
</html>

error.html（カスタム404ページ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>404 - ページが見つかりません</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 640px;
      margin: 60px auto;
      padding: 20px;
      color: #333;
      text-align: center;
    }
    h1 { color: #cc0000; }
    a { color: #ff9900; }
  </style>
</head>
<body>
  <h1>404 - ページが見つかりません</h1>
  <p>お探しのページは存在しないか、移動・削除された可能性があります。</p>
  <p><a href="/">トップページへ戻る</a></p>
</body>
</html>

上記2ファイルをS3にアップロードします。

方法A: S3 コンソールからアップロード

S3 → my-cloudfront-website → 「アップロード」

index.html と error.html を選択してアップロードします。

方法B: AWS CLI でアップロード

aws s3 sync C:\my-aws\aws-learning-projects\s3-cloudfront-hosting\website\ ^
  s3://my-cloudfront-website/ ^
  --region ap-northeast-1

⑤ CloudFront URL でアクセス確認

CloudFrontのステータスが「有効」になったらブラウザでアクセスします。

https://xxxxxxxxxxxx.cloudfront.net

期待する表示: index.html の内容が表示される。

HTTP → HTTPS リダイレクトの確認：

http://xxxxxxxxxxxx.cloudfront.net

HTTPでアクセスすると自動的にHTTPSにリダイレクトされることを確認します。

カスタム404ページの確認：

https://xxxxxxxxxxxx.cloudfront.net/notfound

存在しないページにアクセスすると error.html の内容が表示されることを確認します。

⑥ キャッシュの動作確認（任意）

CloudFront CDNの重要な概念「キャッシュ」と「キャッシュ削除（旧: 無効化）」を体験します。

6-1. index.html を更新してアップロード

index.html のテキストを変更して再度アップロードします。

aws s3 cp C:\my-aws\aws-learning-projects\s3-cloudfront-hosting\website\index.html ^
  s3://my-cloudfront-website/index.html ^
  --region ap-northeast-1

ブラウザでCloudFront URLにアクセスしても古いキャッシュが表示される場合があります（TTLが切れるまで）。

6-2. キャッシュを削除する（新UI: 「キャッシュ削除」タブ）

CloudFront → ディストリビューション → 「キャッシュ削除」タブ → 「キャッシュ削除を作成」

「キャッシュ削除を作成」をクリックします。ステータスが「完了」になったら（1〜3分）ブラウザを強制リロード（Ctrl+Shift+R）して確認します。

旧UIとの名称変更：
旧UIでは「無効化（Invalidation）」タブでしたが、新UIでは「キャッシュ削除」に名称変更されました。機能は同じです。

無効化の料金：
毎月最初の1,000パスは無料。それ以降は $0.005/パス。
/* は1パスとしてカウントされるため、ハンズオン程度なら無料枠内です。

⑦ リソースの削除

課金を止めるために、ハンズオン完了後は必ずリソースを削除してください。

重要: 新UIで作成したディストリビューションの削除手順（旧UIとは異なります）

旧UIでは「無効化 → 削除」の2ステップでしたが、新UIでは以下の手順が必要です：
無効化 → Pricing plan キャンセル → 月末（翌月1日）まで待機 → 削除

月末まで削除できないのは想定外でハマる人が多いポイントです。

1. CloudFront ディストリビューションを無効化する

CloudFront → ディストリビューション → 対象を選択 → 「無効化」ボタン → 確認 → 「無効化」

ステータスが「有効」→「無効」に変わるまで待ちます（5〜15分）。

無効化が完了しないとディストリビューションを削除できません。（削除ボタンがグレーアウトしたまま）

2. Pricing plan（プライシングプラン）をキャンセルする

ステータスが「無効」になったら、プランをキャンセルします。

無効化したディストリビューションをクリック → 「Billing」セクション → 「Manage plan」→「Cancel plan」（プランをキャンセル）→「Cancel plan」ボタン

キャンセルが受け付けられると「無料プランのキャンセルがスケジュールされています。このプランは [月末日] に終了します。」と表示されます。

「この日を過ぎると、すべての使用は従量制料金で課金されます」という警告について：
これは「もし使い続けた場合」の説明です。ディストリビューションは「無効」状態のためリクエストを受け付けず、使用量ゼロ = 課金ゼロです。無効化済みであれば課金されません。

3. 月末を待ってから削除する

プランキャンセルは月末（翌月1日）に有効になります。それまでディストリビューションは削除できません。

月末以降：

ディストリビューションを選択 → 「削除」→ 確認 → 「削除」

キャンセル前に削除しようとすると：
You can't delete this distribution while it's subscribed to a pricing plan.
というエラーが表示されます。その場合は手順2のプランキャンセルを行ってください。

4. S3 バケット内のファイルをすべて削除する

方法A: AWS CLI で一括削除（推奨）

aws s3 rm s3://my-cloudfront-website --recursive --region ap-northeast-1

方法B: S3 コンソールから

S3 → my-cloudfront-website → ファイルをすべて選択 → 「削除」→ 確認テキストを入力 → 「オブジェクトを削除」

5. S3 バケットを削除する

S3 → my-cloudfront-website を選択 → 「削除」→ バケット名を入力 → 「バケットを削除」

6. CloudFront OAC を削除する（任意）

ステップ3で自動作成された OAC は、ディストリビューション削除後も残ります。不要なら手動で削除します。

CloudFront → 左サイドバー「オリジンアクセスコントロール」→ 作成した OAC を選択 → 「削除」

注意： ディストリビューションの「オリジン」タブではなく、左サイドバーの「オリジンアクセスコントロール」から削除します。ディストリビューションが削除済みでないと削除できません。

SAMとの対比まとめ

削除の大きな違い：
コンソール新UIで作成したディストリビューションはPricing planに加入するため、プランキャンセル後に月末まで削除できない制約があります。
SAMで作成したディストリビューションにはPricing planの概念がないため、sam delete で即座に削除手続きが完了します。
これがSAM版の大きなメリットのひとつです。

トラブルシューティング

まとめ

コンソール操作で確認できたこと

今回のコンソール操作で、SAMが自動化していることと、新UI特有のハマりポイントが明確になりました：

どちらを使うべきか

関連記事

• SAM版ハンズオン — コマンド数本でS3 + CloudFront環境を構築

AWSハンズオン - S3 + CloudFrontで静的サイトをCDN配信しよう【SAM版 / Windows対応】

はじめに「ウェブサイトを公開したいけど、サーバーは持ちたくない」「静的なHTMLサイトを世界中から速く見せたい」という要件に、S3 + CloudFront の組み合わせはベストな選択肢のひとつです。この記事では、AWS SAM（Serve...

caymezon.com

2026.02.23

Amazon検索[本 AWS 開発]