#author("2019-08-21T11:59:14+00:00","","") #mynavi(AWSメモ) #setlinebreak(on); * 目次 [#q9218622] #contents - 関連 -- [[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