チュートリアル: CloudFront Functions でシンプルな関数を作成する

AWS Management Consoleにサインインし、https://console.aws.amazon.com/cloudfront/v4/home で CloudFront コンソールを開きます。

ナビゲーションペインで、[関数]、[関数を作成] の順に選択します。

[関数を作成] ページの [名前] に関数名 (MyFunctionName など) を入力します。

(オプション) [説明] に、関数の説明 (Simple test function など) を入力します。

[ランタイム] は、デフォルトで選択されている JavaScript バージョンのままにします。

[Create function (関数の作成)] を選択します。

次の関数コードをコピーします。この関数コードは、ビューワーを別の URL にリダイレクトするほか、カスタムレスポンスヘッダーも返します。

function handler(event) {
    // NOTE: This example function is for a viewer request event trigger. 
    // Choose viewer request for event trigger when you associate this function with a distribution. 
    var response = {
        statusCode: 302,
        statusDescription: 'Found',
        headers: {
            'cloudfront-functions': { value: 'generated-by-CloudFront-Functions' },
            'location': { value: 'https://aws.amazon.com/cloudfront/' }
        }
    };
    return response;
}

[関数コード] で、コードをコードエディタに貼り付け、デフォルトコードを置き換えます。

[Save changes] (変更の保存) をクリックします。

(オプション) 関数は発行前にテストすることもできます。このチュートリアルでは、関数のテスト方法は説明していません。詳細については、「関数をテストする」を参照してください。

[発行] タブを選択し、[関数を発行] を選択します。関数は、CloudFront ディストリビューションと関連付ける前に発行する必要があります。

次に、関数をディストリビューションまたはキャッシュビヘイビアと関連付けることができます。[MyFunctionName] ページで、[発行] タブを選択します。

[Add association] を選択します。

[関連付け] ダイアログボックスで、ディストリビューションまたはキャッシュビヘイビアを選択します。[イベントタイプ] は、デフォルト値のままにします。

[Add association] を選択します。

関連付けられているディストリビューションは、[関連付けられているディストリビューション] テーブルに表示されます。

関連付けられたディストリビューションのデプロイが完了するまで数分待ちます。ディストリビューションのステータスを確認するには、[関連づけられているディストリビューション] テーブルでディストリビューションを選択し、[ディストリビューションを表示] を選択します。

ディストリビューションのステータスが [Deployed] になったら、関数の動作を確認できます。

ウェブブラウザで、ディストリビューションのドメイン名 (https://d111111abcdef8.cloudfront.net など) に移動します。

関数はブラウザにリダイレクトを返すため、ブラウザは自動的に https://aws.amazon.com/cloudfront/ に移動します。

コマンドラインウィンドウで、curl などのツールを使用してディストリビューションのドメイン名にリクエストを送信できます。

curl -v https://d111111abcdef8.cloudfront.net/

レスポンスに、リダイレクトレスポンス (302 Found) と、関数が追加したカスタムレスポンスヘッダーが表示されます。レスポンスは次の例のようになります。

curl -v https://d111111abcdef8.cloudfront.net/
> GET / HTTP/1.1
> Host: d111111abcdef8.cloudfront.net
> User-Agent: curl/7.64.1
> Accept: */*
>
< HTTP/1.1 302 Found
< Server: CloudFront
< Date: Tue, 16 Mar 2021 18:50:48 GMT
< Content-Length: 0
< Connection: keep-alive
< Location: https://aws.amazon.com/cloudfront/
< Cloudfront-Functions: generated-by-CloudFront-Functions
< X-Cache: FunctionGeneratedResponse from cloudfront
< Via: 1.1 3035b31bddaf14eded329f8d22cf188c.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: PHX50-C2
< X-Amz-Cf-Id: ULZdIz6j43uGBlXyob_JctF9x7CCbwpNniiMlmNbmwzH1YWP9FsEHg==