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

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
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-04T12:45:27+00:00","","")
#author("2019-09-05T12:48:20+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ドキュメント)
-- [[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]]
-- [[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
1つのAWS LambdaでSPA(CloudFront編) のバックアップ差分(No.6) - 闘うITエンジニアの覚え書き
