- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-08-21T10:58:19+00:00","","")
#author("2019-08-21T11:59:14+00:00","","")
#mynavi(AWSメモ)
#setlinebreak(on);
* 目次 [#q9218622]
#contents
- 関連
-- [[CloudFrontメモ]]
-- [[AWSメモ]]
-- [[AWS CloudFrontメモ]]
-- [[1つのAWS Lambda関数でSPAフレームワーク作成]]
-- [[AWS Lambda で画像データを返却する]]
* 概要 [#mfdc32cf]
#html(<div style="padding-left: 10px;">)
以前に [[1つのAWS Lambda関数でSPAフレームワーク作成]] という記事を書いたが、当記事はこれを API Gateway を利用せず CloudFront を利用した場合の一例として記載する。
** 説明 [#j8256984]
#html(<div style="padding-left: 10px;">)
- 静的コンテンツ(HTML、CSS、JS等) はS3に配置する。
- 動的コンテンツは Lambda で提供する。
- 動的コンテンツへのリクエストの場合は、Lambda@Edge を使用してレスポンスを返却する
- 作成する Lambda は1つのみとし、リクエスト情報から処理を判定する。(Lambda内部でルーティング)
#html(</div>)
// 説明 END
** 補足 [#j52371ac]
#html(<div style="padding-left: 10px;">)
Lambda@Edge では、Node.js Lambda 関数により返却するコンテンツをカスタマイズする事ができる。
Lambda 関数が実行出来るタイミングは以下の通り。
- CloudFront がビューワーからリクエストを受信したとき (ビューワーリクエスト)
- CloudFront がリクエストをオリジンに転送する前 (オリジンリクエスト)
- CloudFront がオリジンからレスポンスを受信したとき (オリジンレスポンス)
- CloudFront がビューワーにレスポンスを返す前 (ビューワーレスポンス)
当記事では、上記の「オリジンリクエスト」イベントによってLambdaをトリガーし、動的コンテンツか静的コンテンツかを判定する。
動的コンテンツへのリクエストだった場合はLambd 内でレスポンスデータを作成/返却する。
静的コンテンツへのリクエストだった場合は何もしない。(そのままオリジンに対してリクエストさせる)
[参考]
CloudFront Lambda@Edge での AWS Lambda の使用
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/lambda-edge.html
Lambda@Edge を使用したエッジでのコンテンツのカスタマイズ
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-at-the-edge.html
Lambda@Edge を使用したエッジでのコンテンツのカスタマイズ » リクエストとレスポンスを使用する
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-generating-http-responses.html
#html(</div>)
// 説明 END
** イメージ [#w2df3fd7]
#html(<div style="padding-left: 10px;">)
#TODO
#html(</div>)
// イメージ END
#html(</div>)
// 概要 END
* 料金試算 [#p28e9660]
#html(<div style="padding-left: 10px;">)
#TODO
#html(</div>)
// 料金試算 END
* 準備 [#k8db72f6]
#html(<div style="padding-left: 10px;">)
#TODO
#html(</div>)
// 準備 END
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
