#author("2019-09-05T12:48:20+00:00","","") #mynavi(AWSメモ) #setlinebreak(on); * 目次 [#q9218622] #contents - 参考(AWSドキュメント) -- [[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]] -- [[Lambda@Edge 用の IAM アクセス権限とロールの設定:https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-permissions.html]] -- [[CloudFront ディストリビューションのオリジンとして S3 ウェブサイトのエンドポイントを使用しています。403 Access Denied (アクセス拒否) エラーが発生するのはなぜですか?:https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/]] -- [[オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する:https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html]] -- https://github.com/awslabs/serverless-application-model/tree/master/examples/2016-10-31/lambda_edge - 関連 -- [[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;">) 参考) https://github.com/awslabs/serverless-application-model/tree/master/examples/2016-10-31/lambda_edge 注意) 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 }} ** AutoPublishAlias: live について [#ybae1540] #html(<div style="padding-left:10px;">) AutoPublishAlias: live を指定すると Version という追加のプロパティが使用できるようになるらしい。 AWS::CloudFront::Distribution 側の LambdaFunctionAssociations 配下の LambdaFunctionARN では、これを使用する事ができるようになる。 https://github.com/awslabs/serverless-application-model/tree/master/examples/2016-10-31/lambda_edge 例) #mycode2(){{ LambdaEdgeFunctionSample: Type: AWS::Serverless::Function Properties: : CodeUri: ./src Handler: index.handler AutoPublishAlias: live SampleDistribution: Type: AWS::CloudFront::Distribution Properties: DistributionConfig: : LambdaFunctionAssociations: - EventType: origin-request LambdaFunctionARN: !Ref LambdaEdgeFunctionSample.Version }} #html(</div>) #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