目次 †
概要 †
以前に 1つのAWS Lambda関数でSPAフレームワーク作成 という記事を書いたが、当記事はこれを API Gateway を利用せず CloudFront を利用した場合の一例として記載する。
- 静的コンテンツ(HTML、CSS、JS等) はS3に配置する。
- 動的コンテンツは Lambda で提供する。
- 動的コンテンツへのリクエストの場合は、Lambda@Edge を使用してレスポンスを返却する
- 作成する Lambda は1つのみとし、リクエスト情報から処理を判定する。(Lambda内部でルーティング)
- フロントエンドには Vue.js を利用する
- S3バケット内のフォルダ構成
・・・ CSS格納用
・・・ HTML格納用
・・・ JS格納用
・・・ Lambdaで処理
・・・ オリジン(S3)にリクエストさせる
・・・ 〃
・・・ 〃
イメージ †
この構成のメリット/デメリット †
TODO:
- メリット
- 1つのアプリケーションとしてデプロイする事ができる
- 静的コンテンツは CloudFront のキャッシュにより高速配信が期待できる
- デメリット
- 1 Lambdaの為、個別にメモリ調整等ができない
料金試算 †
静的コンテンツの準備 †
Lambdaの作成 †
CloudFormationテンプレート †
補足(Lambda@Edge) †
Lambda@Edge では、Node.js Lambda 関数により返却するコンテンツをカスタマイズする事ができる。
Lambda 関数が実行出来るタイミングは以下の通り。
- CloudFront がビューワーからリクエストを受信したとき (ビューワーリクエスト)
- CloudFront がリクエストをオリジンに転送する前 (オリジンリクエスト)
- CloudFront がオリジンからレスポンスを受信したとき (オリジンレスポンス)
- CloudFront がビューワーにレスポンスを返す前 (ビューワーレスポンス)
当記事では、上記の「オリジンリクエスト」イベントによってLambdaをトリガーし、動的コンテンツか静的コンテンツかを判定する。
動的コンテンツへのリクエストだった場合はLambd 内でレスポンスデータを作成/返却する。
静的コンテンツへのリクエストだった場合は何もしない。(そのままオリジンに対してリクエストさせる)
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
