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入門】第5回：CloudFrontでパスごとに振り分け！複数オリジンのルーティング（Behaviors）

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完全マスター」の第5回です。
これまでは、CloudFrontの後ろ（オリジン）にはAmazon S3だけを配置して、静的なウェブサイトを配信してきました。

しかし、実際のWebアプリケーションでは「HTMLや画像はS3から返しつつ、APIのリクエストはバックエンドのサーバー（EC2やLambdaなど）で処理したい」というケースがほとんどです。
今回は、URLのパス（例：/api/*）に応じて、リクエストをS3とLambdaに振り分ける 「複数オリジンのルーティング」 に挑戦します！

本日のゴール

  • ビヘイビア（Behaviors）の概念を理解する
  • 動的コンテンツ用のバックエンドとしてLambda関数（関数URL）を作成する
  • CloudFrontのパスパターンを使って、S3とLambdaへのルーティングを振り分ける

所要時間とコスト

  • 所要時間：約45分
  • コスト：無料枠内（Lambdaの実行回数も数回程度のため実質無料です）

1. 座学：ビヘイビア（Behaviors）による振り分け（約5分）

CloudFrontには 「ビヘイビア（Behaviors）」 という設定項目があります。これは「どのようなリクエストが来たときに、どのオリジンに流し、どうキャッシュするか」を決めるルールのことです。交通整理をする警察官のような役割を果たします。

例えば、以下のようにルールを複数設定し、優先順位をつけることができます。

  1. パスパターン /api/* 優先度1 👉 API用サーバーへ（キャッシュしない）
  2. パスパターン /images/* 優先度2 👉 画像用S3へ（長期間キャッシュする）
  3. デフォルト Default (*) 優先度 最下位 👉 メインのS3へ

今回は、/api/* というパスでアクセスされた時だけ、動的な処理を行うLambdaへリクエストを流す設定を作ってみましょう。

2. ハンズオン：動的バックエンド（Lambda関数）の準備（約15分）

まずは、APIの代わりとなる簡単なプログラム（Lambda関数）を用意します。最も手軽にWebから呼び出せる「Lambda関数URL」機能を使います。

ステップ1：Lambda関数の作成

  1. AWSマネジメントコンソールでLambdaを開き、「関数の作成」をクリックします。
  2. 一から作成 を選択し、以下を入力します。
    • 関数名: CloudFront-Handson-API
    • ランタイム: Node.js 20.x （最新のNode.jsでOKです）
  3. 画面右下の「関数の作成」をクリックします。

ステップ2：関数URLの有効化

  1. 作成した関数の画面で、「設定」 タブ ＞ 左メニューの 「関数 URL」 を開きます。
  2. 「関数 URL の作成」をクリックします。
  3. 認証タイプ: NONE （誰でもアクセスできるようにします）を選択し、「保存」をクリックします。
  4. 発行された 関数 URL（例: https://xxxxxx.lambda-url.ap-northeast-1.on.aws/）をメモしておきます。これが新しい「オリジン」になります。

ステップ3：コードの修正

APIらしいJSONを返すように、少しだけコードを書き換えます。

  1. **「コード」**タブを開き、index.mjs の内容を以下に置き換えます。
export const handler = async (event) => {
    const path = event.rawPath; // アクセスされたパスを取得
    return {
        statusCode: 200,
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            message: "Hello from Lambda Backend!",
            requestedPath: path
        }),
    };
};
  1. 「Deploy」ボタンをクリックして保存します。

【💡 Tips: Lambda単体でテストしてみよう】
CloudFrontと繋ぐ前に、先ほどメモした「関数URL」の末尾に /test などを付けてブラウザで直接アクセスしてみてください。JSONデータが表示されれば、Lambdaの準備は完璧です！

3. ハンズオン：CloudFrontの振り分け設定（約20分）

いよいよ、CloudFrontでルーティングの設定を行います。

ステップ1：オリジンの追加

CloudFrontに「Lambda」という2つ目の宛先を教えます。

  1. マネジメントコンソールでCloudFrontを開き、第1回から使っているディストリビューションを選択します。
  2. **「オリジン」**タブを開き、「オリジンを作成」をクリックします。
  3. オリジンドメイン: 先ほどメモしたLambdaの関数URLを入力します。
    (※注意: https:// と末尾の / は除いて入力してください。例: xxxxxx.lambda-url.ap-northeast-1.on.aws)
  4. プロトコル: HTTPS のみ を選択します。
  5. 画面下部の「オリジンを作成」をクリックします。

ステップ2：ビヘイビアの作成（パスパターンの設定）

/api/* にアクセスが来た時のルールを作ります。

  1. 「ビヘイビア」 タブを開き、「ビヘイビアを作成」をクリックします。
  2. パスパターン: /api/* と入力します。
  3. オリジンとオリジングループ: プルダウンから、先ほど追加したLambdaのオリジンを選択します。
  4. キャッシュキーとオリジンリクエスト:
    • APIのレスポンスは毎回変わる可能性があるため、キャッシュさせないようにします。
    • キャッシュポリシー: プルダウンから、AWS管理ポリシーの CachingDisabled を選択します。
  5. その他の設定はデフォルトのまま、画面最下部の「ビヘイビアを作成」をクリックします。
    (※ディストリビューションのデプロイが完了するまで数分待ちます)

【💡 Tips: 優先順位について】
ビヘイビアを作成すると、Default (*) よりも今回作成した /api/* の方が自動的に優先順位（Priority 0）が高く設定されます。より具体的なパスが優先される仕組みになっています。

4. 動作確認（約5分）

設定が反映されたら、ブラウザでアクセスして振り分けが成功しているか確認しましょう！

  1. 静的コンテンツ（S3）へのアクセス確認

    • URL: https://あなたのドメイン/index.html にアクセスします。
    • 👉 第1回で作った「CloudFrontからの配信に成功しました！」というHTMLページが表示されればOKです。

  2. 動的コンテンツ（Lambda）へのアクセス確認

    • URL: https://あなたのドメイン/api/test にアクセスします。
    • 👉 画面が切り替わり、以下のようなJSONデータが表示されれば大成功です！ 
      {"message":"Hello from Lambda Backend!","requestedPath":"/api/test"}

見事に1つのドメイン（URL）で、S3とLambdaを使い分けることができました！

5. お片付け（リソースの削除）

無駄な課金を防ぎ、環境をクリーンに保つためにリソースを削除します。

  1. CloudFrontの設定を戻す:
    • ディストリビューションの「ビヘイビア」タブから、作成した /api/* のビヘイビアを選択し、削除します。
    • 「オリジン」タブから、Lambdaのオリジンを選択し、削除します。
  2. Lambda関数の削除:
    • Lambdaのコンソールを開き、作成した CloudFront-Handson-API 関数を削除します。

おわりに

今回は、ビヘイビア機能を使って複数オリジンのルーティングを行いました。
この仕組みを使えば、「ブログ記事の画像はS3から高速配信し、ユーザーのログイン処理や検索処理はバックエンドのAPIサーバーへ流す」といった、モダンなWebアプリケーションの構成が簡単に作れます。

次回（第6回）は、今回のようなバックエンドサーバー（Lambda等）をわざわざ立てなくても、CloudFrontのエッジ（一番ユーザーに近い場所）でちょっとしたプログラムを実行できる 「CloudFront Functions」 を体験します。セキュリティヘッダの付与など、実務で役立つ小技をご紹介しますのでお楽しみに！

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?