#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 を使用したエッジでのコンテンツのカスタマイズ » リクエストとレスポンスを使用する 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 を利用して似たような事をやってみる。 - 静的コンテンツ(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