1つのAWS LambdaでSPA(CloudFront編) のバックアップ(No.6) - 闘うITエンジニアの覚え書き

以前に 1つのAWS Lambda関数でSPAフレームワーク作成 という記事を書いたが、当記事では API Gateway ではなく CloudFront を利用して似たような事をやってみる。

• 静的コンテンツ(HTML、CSS、JS等) はS3に配置する。
• 動的コンテンツは Lambda で提供する。
• 動的コンテンツへのリクエストの場合は、Lambda@Edge を使用してレスポンスを返却する
• 作成する Lambda は1つのみとし、リクエスト情報から処理を判定する。(Lambda内部でルーティング)
• フロントエンドには Vue.js を利用する
• S3バケット内のフォルダ構成

• URI設計

イメージ †

この構成のメリット/デメリット †

参考)
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.」と怒られる。

#TODO

AutoPublishAlias: live について †

  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

Lambda@Edge では、Node.js Lambda 関数により返却するコンテンツをカスタマイズする事ができる。

Lambda 関数が実行出来るタイミングは以下の通り。

• CloudFront がビューワーからリクエストを受信したとき (ビューワーリクエスト)
• CloudFront がリクエストをオリジンに転送する前 (オリジンリクエスト)
• CloudFront がオリジンからレスポンスを受信したとき (オリジンレスポンス)
• CloudFront がビューワーにレスポンスを返す前 (ビューワーレスポンス)

当記事では、上記の「オリジンリクエスト」イベントによってLambdaをトリガーし、動的コンテンツか静的コンテンツかを判定する。
動的コンテンツへのリクエストだった場合はLambd 内でレスポンスデータを作成/返却する。
静的コンテンツへのリクエストだった場合は何もしない。(そのままオリジンに対してリクエストさせる)