1つのAWS LambdaでSPA(CloudFront編) のバックアップ差分(No.5)

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
1つのAWS LambdaでSPA(CloudFront編) へ行く。
- 1 (2019-08-22 (木) 04:58:19)
- 2 (2019-08-22 (木) 05:59:14)
- 3 (2019-09-02 (月) 06:50:46)
- 4 (2019-09-03 (火) 06:49:48)
- 5 (2019-09-05 (木) 06:45:27)
- 6 (2019-09-06 (金) 06:48:20)
- 7 (2019-09-17 (火) 03:24:00)
- 8 (2019-09-17 (火) 03:24:00)
- 9 (2019-10-01 (火) 04:06:21)
- 10 (2019-10-17 (木) 02:05:44)

追加された行はこの色です。
削除された行はこの色です。

#author("2019-09-02T12:49:48+00:00","","")
#author("2019-09-04T12:45:27+00:00","","")
#mynavi(AWSメモ)
#setlinebreak(on);

* 目次 [#q9218622]
#contents
- 参考
-- 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 を使用したエッジでのコンテンツのカスタマイズ &#187; リクエストとレスポンスを使用する
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-generating-http-responses.html
-- リクエストトリガーでの HTTP レスポンスの生成
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-generating-http-responses-in-requests.html
- 関連
-- [[AWSメモ]]
-- [[AWS CloudFrontメモ]]
-- [[1つのAWS Lambda関数でSPAフレームワーク作成]]
-- [[API Gateway＆Lambda で画像データを返却する]]

* 概要 [#mfdc32cf]
#html(<div style="padding-left: 10px;">)

以前に [[1つのAWS Lambda関数でSPAフレームワーク作成]] という記事を書いたが、当記事はこれを API Gateway を利用せず CloudFront を利用した場合の一例として記載する。
以前に [[1つのAWS Lambda関数でSPAフレームワーク作成]] という記事を書いたが、当記事では API Gateway ではなく CloudFront を利用して似たような事をやってみる。

- 静的コンテンツ(HTML、CSS、JS等) はS3に配置する。
- 動的コンテンツは Lambda で提供する。
- 動的コンテンツへのリクエストの場合は、Lambda@Edge を使用してレスポンスを返却する
- 作成する Lambda は1つのみとし、リクエスト情報から処理を判定する。(Lambda内部でルーティング)
- フロントエンドには Vue.js を利用する
- S3バケット内のフォルダ構成

#html(<div style="border:1px solid #333; padding:10px; display: inline-block; margin-left: 20px;">)
#html(<div style="display:inline-block;">)
/css
/html
/js
#html(</div>)
#html(<div style="display:inline-block; padding: 0 30px; vertical-align: top;">)
・・・　CSS格納用
・・・　HTML格納用
・・・　JS格納用
#html(</div>)
#html(</div>)

-URI設計

#html(<div style="border:1px solid #333; padding:10px; display: inline-block; margin-left: 20px;">)
#html(<div style="display:inline-block;">)
/api
/css
/html
/js
#html(</div>)
#html(<div style="display:inline-block; padding: 0 30px; vertical-align: top;">)
・・・　Lambdaで処理
・・・　オリジン(S3)にリクエストさせる
・・・　〃
・・・　〃
#html(</div>)
#html(</div>)

** イメージ [#w2df3fd7]
#html(<div style="padding-left: 10px;">)
#TODO

#html(</div>)
// イメージ END

** この構成のメリット/デメリット [#s7004326]
#html(<div style="padding-left: 10px;">)
#TODO
- メリット
-- 1つのアプリケーションとしてデプロイする事ができる
-- 静的コンテンツは CloudFront のキャッシュにより高速配信が期待できる
- デメリット
-- 1 Lambdaの為、個別にメモリ調整等ができない
#html(</div>)
// メリット/デメリット END


#html(</div>)
// 概要 END

* 料金試算 [#p28e9660]
#html(<div style="padding-left: 10px;">)
#TODO
#html(</div>)
// 料金試算 END

* 静的コンテンツの準備 [#z3a8db84]
#html(<div style="padding-left: 10px;">)
#TODO
#html(</div>)
// 静的コンテンツの準備 END

* Lambdaの作成 [#jfe1e94e]
#html(<div style="padding-left: 10px;">)
#TODO
#html(</div>)
// Lambdaの作成 END

* CloudFormationテンプレート [#abbf7329]
#html(<div style="padding-left: 10px;">)

注意)
edgelambda.amazonaws.com を assumable role しないと、
「The function execution role must be assumable with edgelambda.amazonaws.com as well as lambda.amazonaws.com principals.」と怒られる。

#mycode2(){{
#TODO
}}

#html(</div>)
// CloudFormationテンプレート END

* 補足(Lambda@Edge) [#r1e51760]
#html(<div style="padding-left: 10px;">)

Lambda@Edge では、Node.js Lambda 関数により返却するコンテンツをカスタマイズする事ができる。

Lambda 関数が実行出来るタイミングは以下の通り。

- CloudFront がビューワーからリクエストを受信したとき (ビューワーリクエスト)
- CloudFront がリクエストをオリジンに転送する前 (オリジンリクエスト)
- CloudFront がオリジンからレスポンスを受信したとき (オリジンレスポンス)
- CloudFront がビューワーにレスポンスを返す前 (ビューワーレスポンス)

当記事では、上記の「オリジンリクエスト」イベントによってLambdaをトリガーし、動的コンテンツか静的コンテンツかを判定する。
動的コンテンツへのリクエストだった場合はLambd 内でレスポンスデータを作成/返却する。
静的コンテンツへのリクエストだった場合は何もしない。(そのままオリジンに対してリクエストさせる)

#html(</div>)
// 説明 END

1つのAWS LambdaでSPA(CloudFront編) のバックアップ差分(No.5) - 闘うITエンジニアの覚え書き