チュートリアル: CloudFront Functions を使用した単純な関数の作成 - Amazon CloudFront

チュートリアル: CloudFront Functions を使用した単純な関数の作成

このチュートリアルでは、CloudFront Functions を開始する方法について説明します。シンプルな関数を作成して、ビューワーを別の URL にリダイレクトしたり、カスタムレスポンスヘッダーも返せるようになります。

Prerequisites

CloudFront Functions の使用には、CloudFront ディストリビューションが必要です。お持ちでない場合は、簡単な CloudFront ディストリビューションの開始方法 の手順に従います。

関数の作成

この手順では、CloudFront コンソールを使用して、ビューワーを別の URL にリダイレクトし、カスタムレスポンスヘッダーを返す単純な関数を作成する方法を示します。

CloudFront コンソールで関数を作成

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

  2. ナビゲーションペインで、[Functions] (関数) を選択します。次に、[Create function] を選択します。

  3. 関数名を入力し、[Continue] を選択します。

  4. (オプション) [Comment] に、関数の説明を入力します。たとえば、「Simple test function」と入力します。

  5. 次の関数コードをコピーし、コンソールのコードエディタに貼り付けて、エディタでデフォルトのコードを置き換えます。

    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; }
    
                        CloudFront Functions コードエディタのコード例。
  6. [Save] を選択して、貼り付けたサンプルコードを使用した関数を作成します。この関数コードは、ビューワーを別の URL にリダイレクトするほか、カスタムレスポンスヘッダーも返します。

    
                        CloudFront コンソールの関数ページの [Build] (構築) タブ。

    正常に完了すると、ページの上部に「関数名が正常に保存されました」というバナーが表示されます。

    ヒント

    関数は公開前にテストすることもできます。このチュートリアルでは、関数のテスト方法は説明しませんが、詳細については「関数のテスト」を参照してください 。

  7. [Publish] タブを選択し、[Publish] ボタンを選択して関数を公開します。関数は、CloudFront ディストリビューションに関連付ける前に公開する必要があります。

    
                        CloudFront コンソールの関数ページの [Publish] (公開) タブ。

    正常に完了すると、ページの上部に「関数名が正常に公開されました」というバナーが表示されます。

  8. [Associate] タブを選択します。次に、以下の操作を実行します。

    警告

    次の手順では、テスト用のディストリビューションまたはキャッシュ動作を選択します。このデモンストレーション関数は、本番環境で使用しているディストリビューションまたはキャッシュ動作には関連付けないでください。

    1. [Distribution] で、この関数を関連付けるディストリビューションを選択します。

    2. [Event Type] では、デフォルトの選択 (ビューワーリクエスト) のままにします。

    3. [Cache behavior] で、この関数を関連付けるキャッシュ動作を選択します。

    4. [Add association] を選択します。次に、[Associate function to cache behavior] ポップアップウィンドウで、[Associate] を選択します。

    
                        CloudFront コンソールの関数ページの [Associate] (関連付け) タブ。

正常に完了すると、ページの上部に関数名が正常に関連付けられましたというバナーが表示され、[Associated CloudFront distributions] テーブルには関連するディストリビューションが表示されます 。関数が機能していることを確認する前に、関連するディストリビューションのデプロイが完了するまで数分待ってください。ディストリビューションのステータスを確認するには、関連するディストリビューションを選択し、[View distribution] を選択します。

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

関数の検証

関数の動作が確認できたら、ウェブブラウザでディストリビューションのドメイン名 (例: https://d111111abcdef8.cloudfront.net) に移動します。関数はブラウザにリダイレクトを返すため、ブラウザは自動的に https://aws.amazon.com/cloudfront/ に移動します。

curl などのツールを使用してディストリビューションのドメイン名にリクエストを送信すると、次の例で強調されているように、関数によって追加されたリダイレクト応答 (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==