0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yoshi-sa

【初心者・CloudFront入門】第6回：エッジでコードを実行！CloudFront Functionsでセキュリティヘッダを追加しよう

0
Posted at

※本記事は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種類あります。用途によって使い分けます。

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

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

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

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

ステップ1：関数の作成

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

ステップ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には、実際に配信する前にテストできる便利な機能が備わっています。

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

0
2
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
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?