AWSのCloudFrontとLambda@Edgeでレスポンスを動的に制御する方法を完全ガイド！初心者でもわかるCDN入門

1. CloudFrontとは何か

1. CloudFrontとは何か

CloudFrontは、AWSが提供しているCDNサービスです。CDNとは、世界中に配置されたサーバーからコンテンツを配信する仕組みのことです。日本からアクセスした場合は日本に近い場所のサーバー、海外からなら海外のサーバーが使われます。

これにより、Webサイトの表示速度が速くなり、アクセスが集中しても安定した配信が可能になります。CloudFrontはHTMLファイル、画像、動画、APIレスポンスなど、さまざまなデータを配信できます。

AWSのCloudFrontは、S3やEC2、ALB、API Gatewayなどと簡単に連携できる点が特徴です。

2. Lambda@Edgeの基本的な仕組み

2. Lambda@Edgeの基本的な仕組み

Lambda@Edgeは、CloudFrontのエッジロケーションで実行されるLambda関数です。エッジロケーションとは、ユーザーの近くにあるCloudFrontの拠点のことです。

通常のLambdaはリージョン内で実行されますが、Lambda@Edgeは世界中のエッジで実行されます。そのため、レスポンスを変更しても速度が落ちにくいという特徴があります。

Lambda@Edgeは、リクエストが届いたタイミングやレスポンスを返す直前など、決められたタイミングで処理を差し込むことができます。

3. レスポンスを動的に制御できるタイミング

3. レスポンスを動的に制御できるタイミング

CloudFrontとLambda@Edgeでは、4つのイベントタイミングがあります。代表的なのは、Viewer RequestとViewer Responseです。

Viewer Requestは、ユーザーがCloudFrontにアクセスした直後のタイミングです。ここでは、URLの書き換えやアクセス制限を行えます。

Viewer Responseは、ユーザーにレスポンスを返す直前です。ここでは、HTMLやヘッダーを変更する処理がよく使われます。

4. ヘッダーを追加するLambda@Edgeの例

4. ヘッダーを追加するLambda@Edgeの例

ここでは、レスポンスヘッダーに独自の情報を追加する簡単な例を紹介します。初心者でも読めるシンプルな内容です。

'use strict';

exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response;
    const headers = response.headers;

    headers['x-sample-header'] = [{
        key: 'X-Sample-Header',
        value: 'CloudFront-LambdaEdge'
    }];

    callback(null, response);
};

このコードでは、CloudFrontが返すレスポンスに独自のヘッダーを追加しています。セキュリティ対策や動作確認でよく使われる方法です。

5. アクセス元によって表示内容を変える例

5. アクセス元によって表示内容を変える例

Lambda@Edgeを使うと、アクセス元の国や条件によってレスポンスを切り替えることもできます。ここでは国コードを使った例を紹介します。

'use strict';

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const country = request.headers['cloudfront-viewer-country'][0].value;

    if (country !== 'JP') {
        request.uri = '/global.html';
    }

    callback(null, request);
};

この処理では、日本以外からのアクセスの場合に、別のHTMLファイルを表示しています。海外向けページの出し分けなどで活用されます。

6. メンテナンス中のレスポンス制御

6. メンテナンス中のレスポンス制御

Webサイトをメンテナンスする場合、すべてのアクセスをメンテナンスページに切り替えたいことがあります。Lambda@Edgeを使うと簡単に実現できます。

'use strict';

exports.handler = (event, context, callback) => {
    const response = {
        status: '503',
        statusDescription: 'Service Unavailable',
        body: 'Maintenance in progress'
    };

    callback(null, response);
};

このコードでは、すべてのアクセスに対して503ステータスを返しています。CloudFront側で簡単に制御できるため、サーバーに負荷をかけません。

7. CloudFrontとLambda@Edgeの設定手順概要

7. CloudFrontとLambda@Edgeの設定手順概要

設定の流れは大きく分けて4つです。まずLambda関数を作成し、次にCloudFrontディストリビューションと関連付けます。

Lambda@Edge用の関数は、必ずバージョンを発行する必要があります。これは通常のLambdaと異なる点なので注意が必要です。

設定後は、CloudFrontの反映に少し時間がかかります。これはCDNの仕組み上、正常な動作です。

8. 初心者がつまずきやすいポイント

8. 初心者がつまずきやすいポイント

初心者がよくつまずくのは、Lambda@Edgeは東京リージョンではなく、米国リージョンで作成する必要がある点です。

また、ログの確認方法や、CloudFrontのキャッシュの影響も理解しておく必要があります。キャッシュが残っていると、変更がすぐに反映されない場合があります。

これらを理解しておくと、CloudFrontとLambda@Edgeを安心して使えるようになります。

まとめ

まとめ

本記事では、AWSのCloudFrontとLambda@Edgeを組み合わせて、レスポンスを動的に制御する仕組みについて、初心者にも理解できるように順番に解説してきました。CloudFrontは単にWebサイトを高速化するためのCDNサービスではなく、Lambda@Edgeと連携することで、ユーザーのアクセス条件や状況に応じて柔軟なレスポンス制御を実現できる点が大きな特徴です。CloudFrontは世界中のエッジロケーションからコンテンツを配信するため、表示速度の向上や安定した配信を実現できますが、そのエッジロケーション上でLambda関数を実行できるLambda@Edgeを利用することで、URLの書き換え、レスポンスヘッダーの追加、アクセス制御、メンテナンスページの表示など、より高度な制御が可能になります。

特に重要なのは、Lambda@Edgeが実行されるタイミングです。Viewer RequestやViewer Responseといったイベントを理解することで、どの段階で処理を差し込むべきかが明確になります。Viewer Requestではリクエスト内容を変更できるため、アクセス元によるページの出し分けやリダイレクト処理が行えます。一方、Viewer Responseではレスポンスヘッダーの追加やHTML内容の調整など、ユーザーに返す直前の制御が可能です。これらの仕組みを理解することで、CloudFrontとLambda@Edgeをより効果的に活用できるようになります。

また、Lambda@Edgeを利用する際の注意点として、関数は米国リージョンで作成し、必ずバージョンを発行してCloudFrontに関連付ける必要がある点も重要です。通常のLambda関数と同じ感覚で設定すると動作しないことがあるため、初心者は特につまずきやすいポイントです。さらに、CloudFrontのキャッシュの仕組みを理解していないと、修正内容がすぐに反映されない場合があります。キャッシュの影響を考慮しながら設定やテストを行うことで、トラブルを未然に防ぐことができます。

CloudFrontとLambda@Edgeを活用することで、サーバー側に負荷をかけずに、グローバル規模で柔軟なレスポンス制御が可能になります。セキュリティ対策としてのヘッダー追加や、国別コンテンツ配信、メンテナンス対応など、実務で役立つ場面は非常に多くあります。AWSのCDNサービスとしてCloudFrontを理解し、その拡張機能としてLambda@Edgeを組み合わせることで、より実践的で拡張性の高いWebシステムを構築できるようになるでしょう。

'use strict';

exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response;
    const headers = response.headers;

    headers['x-summary-sample'] = [{
        key: 'X-Summary-Sample',
        value: 'CloudFront-LambdaEdge-Summary'
    }];

    callback(null, response);
};

上記のサンプルは、まとめとして紹介した基本的な考え方を再確認するためのコード例です。レスポンスヘッダーを追加する処理は、CloudFrontとLambda@Edgeの連携を理解する上で非常に分かりやすい例となります。このようなシンプルなコードから始めて、少しずつ制御内容を拡張していくことで、初心者でも無理なく理解を深めることができます。