# チュートリアル: CloudFront Functions でシンプルな関数を作成する
<a name="functions-tutorial"></a>

このチュートリアルでは、CloudFront Functions の使用を開始する方法を示します。ビューワーを別の URL にリダイレクトし、さらにカスタムレスポンスヘッダーを返すシンプルな関数を作成できます。

**Contents**
+ [前提条件](#functions-tutorial-prerequisites)
+ [関数を作成する](#functions-tutorial-create)
+ [関数を検証する](#functions-tutorial-verify)

## 前提条件
<a name="functions-tutorial-prerequisites"></a>

CloudFront Functions の使用には、CloudFront ディストリビューションが必要です。アカウントをお持ちでない場合は、「[CloudFront 標準ディストリビューションの開始方法](GettingStarted.SimpleDistribution.md)」を参照してください。

## 関数を作成する
<a name="functions-tutorial-create"></a>

CloudFront コンソールを使用して、ビューワーを別の URL にリダイレクトし、さらにカスタムレスポンスヘッダーを返すシンプルな関数を作成できます。

**CloudFront 関数を作成するには**

1. AWS マネジメントコンソールにサインインし、[https://console.aws.amazon.com/cloudfront/v4/home](https://console.aws.amazon.com/cloudfront/v4/home) で CloudFront コンソールを開きます。

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

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

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

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

1. [**関数の作成**] を選択してください。

1. 次の関数コードをコピーします。この関数コードは、ビューワーを別の 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;
   }
   ```

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

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

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

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

1. 次に、関数をディストリビューションまたはキャッシュ動作と関連付けることができます。*[MyFunctionName]* ページで、**[発行]** タブを選択します。
**警告**  
次の手順では、テストに使用するディストリビューションまたはキャッシュ動作を選択します。このテスト関数は、本番環境で使用するディストリビューションやキャッシュ動作には関連付けないでください。

1. [**Add association**] を選択します。

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

1. [**Add association**] を選択します。

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

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

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

## 関数を検証する
<a name="functions-tutorial-verify"></a>

関数をデプロイしたら、ディストリビューションで機能することを検証できます。

**関数を検証するには**

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

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

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

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

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

   ```
   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==
   ```