※本記事はAIが書いて、人間がファクトチェック中です。
不備があったらコメントでご指摘いただけると幸いです。

連載構成案「手を動かして学ぶ！Amazon CloudFront完全マスター」

【第1回】CloudFrontの基本と、安全な静的ウェブサイトホスティング

学習内容: CDN（コンテンツ配信ネットワーク）の仕組みとメリット、CloudFrontの基本用語（ディストリビューション、オリジン、エッジロケーション）。OAC（Origin Access Control）を用いたセキュアなS3連携のベストプラクティス。
ハンズオン (約45分):
1. Amazon S3バケットを作成し、簡単なHTMLファイルをアップロードする。
2. CloudFrontディストリビューションを作成する。
3. OACを設定し、「S3バケットへの直接アクセスを禁止し、CloudFront経由でのみアクセス可能」にする設定を行う。
4. ブラウザからCloudFrontのURLにアクセスして表示を確認する。

【第2回】独自ドメインとHTTPS化（SSL/TLS通信）

学習内容: カスタムドメインの重要性、AWS Certificate Manager (ACM) の役割、Route 53との連携。
ハンズオン (約45分):
(※事前準備としてRoute 53で管理されたドメインがあることを前提とします)
1. ACM (バージニア北部リージョン) で無料のSSL/TLS証明書を発行する。
2. 発行した証明書を第1回で作成したCloudFrontにアタッチする。
3. Route 53でエイリアスレコードを作成し、独自ドメインとCloudFrontを紐づける。
4. 独自ドメインでHTTPSアクセスできることを確認する。

【第3回】キャッシュコントロールとキャッシュの無効化（Invalidation）

学習内容: CloudFrontのキャッシュ戦略。「Cache Policy」と「Origin Request Policy」の違い、TTL（Time To Live）の概念、キャッシュヒット率向上の考え方。
ハンズオン (約30分):
1. S3のHTMLファイルを更新し、ブラウザで古いキャッシュが残っていることを確認する。
2. マネジメントコンソールからキャッシュの無効化（Invalidation）を実行し、最新ファイルが反映されることを確認する。
3. カスタムのCache Policyを作成し、「特定のクエリ文字列のみキャッシュキーに含める」設定を試す。

【第4回】CloudFrontのセキュリティ強化（AWS WAFと地理的制限）

学習内容: エッジでのセキュリティ対策。AWS WAFの基本機能、DDoS対策（AWS Shield Standard）、Geo-Restriction（地理的制限）。
ハンズオン (約45分):
1. CloudFrontの標準機能である「地理的制限」機能を使い、日本以外からのアクセスをブロックする設定を行う（VPN等があれば動作確認）。
2. AWS WAF Web ACLを作成し、CloudFrontにアタッチする。
3. マネージドルール（例：IPレピュテーションリストやSQLi対策）を適用し、テスト的に自身のIPアドレスをブロックしてみて、403エラーが出ることを確認する。

【第5回】複数オリジンのルーティング（動的コンテンツと静的コンテンツの振り分け）

学習内容: ビヘイビア（Behaviors）の概念。パスパターンに応じたオリジンの振り分け（例：画像はS3、APIはALB/API Gatewayなど）。
ハンズオン (約60分):
1. ダミーの動的レスポンスを返すAPI Gateway（または簡易なLambda関数URL）を作成する。
2. CloudFrontに2つ目のオリジンとしてAPIを追加する。
3. ビヘイビアを設定し、/api/* へのリクエストはAPI側へ、それ以外（Default (*)）はS3へルーティングされるように設定する。
4. Postmanやブラウザで、パスによって異なるバックエンドが応答することを確認する。

【第6回】エッジコンピューティング入門（CloudFront Functions）（今回はここ！！）

学習内容: エッジでコードを実行するメリット。CloudFront FunctionsとLambda@Edgeの違いと使い分け。
ハンズオン (約45分):
1. CloudFront Functionsを作成する。
2. ハンズオン課題：レスポンスヘッダにセキュリティヘッダ（Strict-Transport-SecurityやX-Frame-Optionsなど）を動的に追加するコード（JavaScript）を記述する。
3. テスト機能を使って動作確認を行い、ディストリビューションにPublishする。
4. ブラウザの開発者ツールで、ヘッダが追加されていることを確認する。

【第7回】最新機能キャッチアップと運用監視

学習内容: 最近のCloudFrontのアップデート（Continuous DeploymentやVPC Originsなど）の紹介。CloudFrontのメトリクス監視とログ出力設定。
ハンズオン (約45分):
1. VPC Originsの体験 (※最新機能): VPC内のプライベートなALBにCloudFrontから直接ルーティングする「VPC Origins」の設定を確認・構築する。
2. CloudFrontの標準モニタリングダッシュボードで、キャッシュヒット率やエラー率を確認する方法を学ぶ。

はじめに

「手を動かして学ぶ！Amazon CloudFront完全マスター」の第6回です。
前回は、CloudFrontのパスベースのルーティングを使って、S3とLambda（API）への通信を振り分けました。

今回は、わざわざバックエンドのサーバー（EC2やLambda）を用意しなくても、CloudFront自体（エッジロケーション）で直接軽量なプログラムを実行できる「エッジコンピューティング」 を体験します。実務で非常によく使われる「セキュリティヘッダの付与」をハンズオンで実装して、エッジでコードが動く感覚を掴みましょう！

本日のゴール

エッジコンピューティングの概念を理解する
CloudFront FunctionsとLambda@Edgeの違いを知る
CloudFront Functionsを記述し、HTTPレスポンスに動的にセキュリティヘッダを付与する

所要時間とコスト

所要時間：約30〜45分
コスト：無料枠内（CloudFront Functionsは毎月200万リクエストまで無料です）

1. 座学：エッジコンピューティングとは？（約5分）

なぜエッジでコードを動かすの？

通常、プログラムはオリジン（バックエンドサーバー）で実行されますが、ユーザーから物理的に遠いため、通信の遅延（レイテンシ）が発生します。
世界中にあるCloudFrontのエッジロケーションでプログラムを実行すれば、ユーザーの最も近くで処理が行われるため、超高速（数ミリ秒）でレスポンスを返すことができます。

CloudFront Functions と Lambda@Edge の違い

CloudFrontにはエッジでコードを動かす機能が2種類あります。用途によって使い分けます。

CloudFront Functions:
- 特徴: 超軽量・超高速・低コスト。JavaScriptのみ対応。
- 得意なこと: URLの書き換え、簡単なリダイレクト、HTTPヘッダの追加・削除など。ネットワーク通信（外部API呼び出しなど）はできません。
Lambda@Edge:
- 特徴: より複雑で重い処理が可能。Node.jsやPythonに対応。
- 得意なこと: 外部APIへの通信、画像の動的リサイズ、高度な認証処理など。実行時間は少し長くなります。

今回は、超高速で動作するCloudFront Functionsを使用します。

2. ハンズオン：CloudFront Functionsの作成（約15分）

さっそく、レスポンスにセキュリティヘッダ（ブラウザに「安全に通信してね」と指示する情報）を追加する関数を作成します。

ステップ1：関数の作成

AWSマネジメントコンソールの左側メニューから、CloudFront > 「関数（Functions）」 を選択します。
「関数を作成」をクリックします。
名前: AddSecurityHeaders と入力します。
ランタイム: cloudfront-js-2.0 （最新版）を選択します。
「関数を作成」をクリックします。

ステップ2：コードの記述

画面の中央にあるエディタに、以下のJavaScriptコードをコピー＆ペーストして上書きします。

function handler(event) {
    var response = event.response;
    var headers = response.headers;

    // Strict-Transport-Security (HSTS): HTTPSでの接続を強制する
    headers['strict-transport-security'] = { value: 'max-age=63072000; includeSubdomains; preload'}; 
    // X-Content-Type-Options: MIMEタイプのスニッフィングを防ぐ
    headers['x-content-type-options'] = { value: 'nosniff'}; 
    // X-Frame-Options: クリックジャッキング対策（iframeでの埋め込みを禁止）
    headers['x-frame-options'] = { value: 'DENY'}; 
    // X-XSS-Protection: クロスサイトスクリプティング（XSS）フィルタを有効化
    headers['x-xss-protection'] = { value: '1; mode=block'}; 

    return response;
}

書き換えたら、エディタ上部の**「変更を保存」**をクリックします。

【💡 プロのTips: 実務でのベストプラクティス】
今回は「エッジでコードを動かす体験」のためにFunctionsを使いましたが、現在のAWSでは、固定のセキュリティヘッダを付与するだけであれば、CloudFront標準の**「レスポンスヘッダーポリシー（Response Headers Policies）」**を使うのがベストプラクティスです（ノーコードで無料で設定できます）。実務では「動的に値を計算してヘッダを変えたい場合はFunctions」「固定の場合はポリシー」と使い分けるのが一流のエンジニアです！

3. ハンズオン：テストとデプロイ（約15分）

ステップ1：コンソール上でのテスト

CloudFront Functionsには、実際に配信する前にテストできる便利な機能が備わっています。

エディタ画面の上部にある 「テスト」 タブを開きます。
イベントタイプ: ビューワーレスポンス (Viewer Response) を選択します。（※今回は「ユーザーに返すレスポンス」を書き換えるためです）
画面を下へスクロールし、「テストを実行」をクリックします。
テスト結果の「出力」タブを確認し、JSONの中に設定したセキュリティヘッダ（strict-transport-securityなど）が含まれていれば成功です！

ステップ2：関数のパブリッシュ（公開）

テストが成功したら、この関数を使える状態にします。

上部の 「発行（Publish）」 タブを開きます。
「関数を発行」をクリックします。これで関数が利用可能になりました。

ステップ3：CloudFrontディストリビューションへの関連付け

最後に、この関数を第1回から使っているディストリビューションに紐づけます。

同じ画面の少し下にある**「関連付けられたディストリビューション」**セクションで、「関連付けを追加」をクリックします。
ディストリビューション: 今回使用しているディストリビューションを選択します。
イベントタイプ: ビューワーレスポンス (Viewer Response) を選択します。
キャッシュビヘイビア: Default (*) を選択します。
「関連付けを追加」をクリックします。（※デプロイ完了まで数分待ちます）

4. 動作確認（ブラウザの開発者ツールを活用！）（約5分）

実際にブラウザからアクセスして、ヘッダが付与されているか確認しましょう。

Google Chromeなどのブラウザで、あなたのCloudFrontのURL（例: https://あなたのドメイン/index.html）を開きます。
キーボードの F12 キー（Macの場合は Option + Command + I）を押し、開発者ツール（Developer Tools） を開きます。
「Network（ネットワーク）」 タブを開き、もう一度画面をリロードします。
読み込まれた index.html（またはURLのドメイン名の行）をクリックし、右側の 「Headers（ヘッダー）」 > 「Response Headers（レスポンスヘッダー）」 を確認します。
👉 【結果】strict-transport-security や x-frame-options などの項目が追加されていれば大成功です！

5. お片付け（リソースの関連付け解除）

今後のハンズオンや運用に影響が出ないよう、設定を元に戻します。

CloudFrontの 「ディストリビューション」 から対象のディストリビューションを開き、「ビヘイビア」 タブを選択します。
Default (*) を選択し「編集」をクリックします。
画面の一番下にある 「関数の関連付け」 セクションまでスクロールします。
ビューワーレスポンスに設定されている「CloudFront Functions」のプルダウンを「関連付けなし」に変更し、保存します。
（任意）左メニューの「関数」から AddSecurityHeaders を選択し、削除します。

おわりに

今回は、CloudFront Functionsを使って、エッジ環境でJavaScriptを実行する体験をしました。
わざわざサーバーを立ててプログラムを改修しなくても、CDN側でサクッとヘッダを追加したりURLを書き換えたりできるのは、運用において非常に便利です。

さて、いよいよ次回（第7回）は連載の最終回です！
CloudFrontの運用監視（メトリクスやログ）の基本を押さえつつ、「VPC Origins」 といった最新機能のキャッチアップを行います。最後までお見逃しなく！