# チュートリアル: 基本的な Lambda@Edge 関数 (コンソール) を作成する
このチュートリアルでは、CloudFront で実行される Node.js 関数の例を作成および設定することで、Lambda@Edge の使用を開始する方法を示します。この例では、CloudFront がファイルを取得するときに、セキュリティヘッダーがレスポンスに追加されます。(これにより、ウェブサイトのセキュリティとプライバシーが向上します)。
このチュートリアルでは、独自のウェブサイトは必要ありません。しかしながら、独自の Lambda@Edge ソリューションを作成するときは、同様のステップに従って同じオプションから選択できます。
**Topics**
+ [ステップ 1: AWS アカウント にサインアップする](#lambda-edge-how-it-works-tutorial-AWS)
+ [ステップ 2: CloudFront ディストリビューションを作成する](#lambda-edge-how-it-works-tutorial-cloudfront)
+ [ステップ 3: 関数を作成する](#lambda-edge-how-it-works-tutorial-create-function)
+ [ステップ 4: 関数を実行する CloudFront トリガーを追加する](#lambda-edge-how-it-works-tutorial-add-trigger)
+ [ステップ 5: 関数の実行を確認する](#lambda-edge-how-it-works-tutorial-verify)
+ [ステップ 6: 問題のトラブルシューティングを行う](#lambda-edge-how-it-works-tutorial-troubleshoot)
+ [ステップ 7: リソース例をクリーンアップする](#lambda-edge-how-it-works-tutorial-cleanup-resources)
+ [関連情報](#lambda-edge-how-it-works-tutorial-resources)
## ステップ 1: AWS アカウント にサインアップする
まだサインアップしていない場合は、AWS アカウントにサインアップします。詳細については、「[AWS アカウントへのサインアップ](setting-up-cloudfront.md#sign-up-for-aws)」を参照してください。
## ステップ 2: CloudFront ディストリビューションを作成する
Lambda@Edge 関数の例を作成する前に、コンテンツの提供元のオリジンを含む、操作対象の CloudFront 環境が必要です。
この例では、Amazon S3 バケットをディストリビューションのオリジンとして使用する CloudFront ディストリビューションを作成します。使用する環境が既にある場合、このステップは省略できます。
**Amazon S3 オリジンを使用して CloudFront ディストリビューションを作成するには**
1. サンプルコンテンツ用に、イメージファイルなど 1～2 つのファイルで Amazon S3 バケットを作成します。そのためには、[コンテンツを Amazon S3 にアップロード](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html#GettingStartedUploadContent)するステップに従います。必ず、バケットのオブジェクトへのパブリック読み取りアクセス権を付与するアクセス許可を設定します。
1. CloudFront ウェブディストリビューションを作成するステップに従って、[CloudFront ディストリビューションを作成](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html#GettingStartedCreateDistribution)し、オリジンとして S3 バケットを追加します。ディストリビューションが既にある場合は、代わりにそのディストリビューションのオリジンとしてバケットを追加できます。
**ヒント**
ディストリビューション ID をメモします。このチュートリアルで後ほど関数の CloudFront トリガーを追加する場合は、ドロップダウンリストでディストリビューションの ID (`E653W22221KDDL` など) を選択する必要があります。
## ステップ 3: 関数を作成する
このステップでは、Lambda コンソールでブループリントテンプレートから Lambda 関数を作成します。関数コードは、CloudFront ディストリビューションでセキュリティヘッダーを更新するコードを追加します。
**Lambda 関数を作成するには**
1. AWS マネジメントコンソール にサインインして、AWS Lambda で [https://console.aws.amazon.com/lambda/](https://console.aws.amazon.com/lambda/) コンソールを開きます。
**重要**
**US-East-1 (バージニア北部)** AWS リージョン (**us-east-1**) にいることを確認します。Lambda@Edge 関数を作成するには、このリージョンに設定されている必要があります。
1. **[関数を作成]** を選択します。
1. [**関数の作成**] ページで、[**設計図の使用**] を選択し、各フィールドに「**cloudfront**」と入力して CloudFront の設計図をフィルタリングします。
**注記**
CloudFront の設計図は、**US-East-1 (バージニア北部)** リージョン (**us-east-1**) でのみ使用できます。
1. 関数のテンプレートとして **[HTTP レスポンスヘッダーを変更する]** ブループリントを選択します。
1. 関数に関する次の情報を入力します。
+ **関数名** – 関数の名前を入力します。
+ **実行ロール** – 関数のアクセス許可を設定する方法を選択します。推奨される基本 Lambda@Edge アクセス許可ポリシーテンプレートを使用するには、[**AWS ポリシーテンプレートから新しいロールを作成する**] を選択します。
+ **ロール名** – ポリシーテンプレートで作成するロールの名前を入力します。
+ **ポリシーテンプレート** – 関数の基盤として CloudFront ブループリントを選択したことにより、Lambda は、ポリシーテンプレート **[基本的な Lambda@Edge アクセス許可]** を自動的に追加します。このポリシーテンプレートでは、世界中の CloudFront の場所で、Lambda 関数の実行を CloudFront に許可する実行ロールアクセス許可を追加します。詳細については、「[Lambda@Edge 用の IAM アクセス許可とロールのセットアップ](lambda-edge-permissions.md)」を参照してください。
1. ページの下部で、**[関数を作成]** を選択します。
1. 表示される **[Lambda@Edge へのデプロイ]** ペインで、**[キャンセル]** を選択します (このチュートリアルでは、関数を Lambda@Edge にデプロイする前に関数コードを変更する必要があります)。
1. ページの **[コードソース]** セクションまで下にスクロールします。
1. テンプレートコードを、オリジンが返すセキュリティヘッダーを変更する関数に置き換えます。たとえば、以下のようなコードを実行できます。
```
'use strict';
export const handler = (event, context, callback) => {
//Get contents of response
const response = event.Records[0].cf.response;
const headers = response.headers;
//Set new headers
headers['strict-transport-security'] = [{key: 'Strict-Transport-Security', value: 'max-age= 63072000; includeSubdomains; preload'}];
headers['content-security-policy'] = [{key: 'Content-Security-Policy', value: "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'"}];
headers['x-content-type-options'] = [{key: 'X-Content-Type-Options', value: 'nosniff'}];
headers['x-frame-options'] = [{key: 'X-Frame-Options', value: 'DENY'}];
headers['x-xss-protection'] = [{key: 'X-XSS-Protection', value: '1; mode=block'}];
headers['referrer-policy'] = [{key: 'Referrer-Policy', value: 'same-origin'}];
//Return modified response
callback(null, response);
};
```
1. **[ファイル]**、**[保存]** の順に選択して、更新したコードを保存します。
1. **[デプロイ]** をクリックします。
次のセクションに進み、関数を実行する CloudFront トリガーを追加します。
## ステップ 4: 関数を実行する CloudFront トリガーを追加する
これでセキュリティヘッダーを更新する Lambda 関数ができたので、CloudFront がディストリビューションのオリジンから受け取ったヘッダーをレスポンスに追加するように、関数を実行する CloudFront トリガーを設定します。
**関数の CloudFront トリガーを設定するには**
1. Lambda コンソールで、関数の **[関数の概要]** ページの **[トリガーを追加]** を選択します。
1. **[トリガー設定]** で、**[CloudFront]** を選択します。
1. **[Lambda@Edge へのデプロイ]** を選択します。
1. **[Lambda@Edge へのデプロイ]** ペインの **[CloudFront トリガーの設定]** で、次の情報を入力します。
+ **ディストリビューション** – 関数に関連付ける CloudFront ディストリビューション ID。ドロップダウンリストで、ディストリビューション ID を選択します。
+ **キャッシュ動作** – トリガーで使用するキャッシュ動作。この例では、値を **\$1** に設定したままにします。これは、ディストリビューションのデフォルトのキャッシュ動作を意味します。詳細については、「[すべてのディストリビューション設定リファレンス](distribution-web-values-specify.md)」トピックの「[キャッシュ動作の設定](DownloadDistValuesCacheBehavior.md)」を参照してください。
+ **CloudFront イベント** – 関数をいつ実行するか指定するトリガー。CloudFront がオリジンからレスポンスを返すたびに、セキュリティヘッダー関数を実行したいと思います。ドロップダウンリストで **[オリジンレスポンス]** を選択します。詳細については、「[Lambda@Edge 関数のトリガーを追加する](lambda-edge-add-triggers.md)」を参照してください。
1. **[Lambda@Edge へのデプロイを確認]** チェックボックスをオンにします。
1. [**デプロイ**] を選択して、トリガーを追加し、世界中の AWS の場所に関数をレプリケートします。
1. 関数がレプリケートするまで待ちます。これには通常数分かかります。
レプリケーションが終了したかどうかを確認するには、[CloudFront コンソールに移動](https://console.aws.amazon.com/cloudfront/v4/home)し、ディストリビューションを表示します。ディストリビューションのステータスが **[デプロイ中]** から日時に変わるまで待ち、関数がレプリケートされたことを確認します。関数が機能することを確認するには、次のセクションのステップに従います。
## ステップ 5: 関数の実行を確認する
Lambda 関数を作成し、CloudFront ディストリビューションに対してその関数を実行するトリガーが設定されたため、関数が正常に動作することを確認します。この例では、CloudFront が返す HTTP ヘッダーで、セキュリティヘッダーが追加されることを確認します。
**Lambda@Edge 関数でセキュリティヘッダーが追加されることを確認するには**
1. ブラウザで、S3 バケット内のファイルの URL を入力します。たとえば、`https://d111111abcdef8.cloudfront.net/image.jpg` のような URL を使用できます。
ファイル URL で使用する CloudFront ドメイン名の詳細については、「[CloudFront でファイルの URL 形式をカスタマイズする](LinkFormat.md)」を参照してください。
1. ブラウザのウェブデベロッパーツールバーを開きます。たとえば、Chrome のブラウザウィンドウで、コンテキスト（右クリック）メニューを開き、[**Inspect (調査)**] を選択します。
1. [**Network (ネットワーク)**] タブを選択します。
1. ページを再ロードしてイメージを表示し、左側のペインの HTTP リクエストを選択します。HTTP ヘッダーが別のペインに表示されます。
1. HTTP ヘッダーのリストを確認し、予期されるセキュリティヘッダーがリストに含まれていることを確認します。たとえば、次のスクリーンショットに示すようなヘッダーが表示されます。
![\[予想されるセキュリティヘッダーがハイライト表示された HTTP ヘッダーのリスト。\]](http://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/images/lambda-at-edge-security-headers-list.png)
セキュリティヘッダーがヘッダーのリストに含まれていれば、成功です。最初の Lambda@Edge 関数を正常に作成しました。CloudFront がエラーを返す場合や、その他の問題がある場合は、次のステップに進んで問題のトラブルシューティングを行います。
## ステップ 6: 問題のトラブルシューティングを行う
CloudFront がエラーを返すか、予期どおりにセキュリティヘッダーを追加しない場合は、CloudWatch Logs を参照して関数の実行を調査できます。必ず、関数が実行された場所に最も近い AWS ロケーションで保存されたログを使用します。
例えば、ロンドンからファイルを表示する場合は、CloudWatch コンソールでリージョンを欧州 (ロンドン) に変更してみてください。
**Lambda@Edge 関数の CloudWatch Logs を調べるには**
1. AWS マネジメントコンソール にサインインして、CloudWatch コンソール ([https://console.aws.amazon.com/cloudwatch/](https://console.aws.amazon.com/cloudwatch/)) を開きます。
1. [**リージョン**] を、ブラウザでファイルを表示したときに表示されるロケーションに変更します。これは、関数が実行されている場所です。
1. 左側のペインで、[**ログ**] を選択して、ディストリビューションのログを表示します。
詳細については、「[Amazon CloudWatch で CloudFront メトリクスをモニタリングする](monitoring-using-cloudwatch.md)」を参照してください。
## ステップ 7: リソース例をクリーンアップする
このチュートリアルのためだけに Amazon S3 バケットと CloudFront ディストリビューションを作成した場合は、割り当てた AWS リソースを削除して、今後料金が発生しないようにしてください。AWS リソースを削除すると、追加したコンテンツは使用できなくなります。
**タスク**
+ [S3 バケットの削除](#lambda-edge-how-it-works-tutorial-delete-bucket)
+ [Lambda 関数を削除する](#lambda-edge-how-it-works-tutorial-delete-function)
+ [CloudFront ディストリビューションの削除](#lambda-edge-how-it-works-tutorial-delete-distribution)
### S3 バケットの削除
Amazon S3 バケットを削除する前に、バケットのログ記録が無効であることを確認します。それ以外の場合、削除するバケットへのログの書き込みが AWS によって継続されます。
**バケットのログ記録を無効にするには**
1. [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/) で Amazon S3 コンソールを開きます。
1. バケットを選択し、[**プロパティ**] を選択します。
1. [**プロパティ**] から [**ログ記録**] を選択します。
1. [**有効**] チェックボックスをオフにします。
1. [**Save**] を選択します。
これで、バケットを削除できます。詳細については、*Amazon Simple Storage Service コンソールユーザーガイド*の「[バケットの削除](https://docs.aws.amazon.com/AmazonS3/latest/userguide/delete-bucket.html)」を参照してください。
### Lambda 関数を削除する
Lambda 関数の関連付けを削除する手順と、関数自体を削除する手順 (オプション) については、「[Lambda@Edge 関数とレプリカを削除する](lambda-edge-delete-replicas.md)」を参照してください。
### CloudFront ディストリビューションの削除
CloudFront ディストリビューションを削除する前に、ディストリビューションを無効にする必要があります。無効になったディストリビューションは機能しなくなり、料金も発生しません。無効にしたディストリビューションはいつでも有効にすることができます。無効にしたディストリビューションを削除すると、使用できなくなります。
**CloudFront ディストリビューションを無効にして削除するには**
1. で CloudFront コンソールを開きます[https://console.aws.amazon.com/cloudfront/v4/home](https://console.aws.amazon.com/cloudfront/v4/home)
1. 無効にするディストリビューションを選択してから [**Disable (無効化)**] を選択します。
1. 確認を求められたら、[**Yes, Disable (はい、無効化する)**] を選択します。
1. 無効にしたディストリビューションを選択してから [**削除**] を選択します。
1. 確認を求めるメッセージが表示されたら、[**Yes, Delete (はい、削除します)**] を選択します。
## 関連情報
Lambda@Edge 関数の動作について基本的な理解を得たので、以下を参照してさらに詳しく学習します。
+ [Lambda@Edge 関数の例](lambda-examples.md)
+ [Lambda@Edge 設計のベストプラクティス](https://aws.amazon.com/blogs/networking-and-content-delivery/lambdaedge-design-best-practices/)
+ [Lambda@Edge を使用したレイテンシーの軽減とエッジへのコンピューティングの移行](https://aws.amazon.com/blogs/networking-and-content-delivery/reducing-latency-and-shifting-compute-to-the-edge-with-lambdaedge/)