NRIネットコム Blog

NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

読者です 読者をやめる 読者になる 読者になる
トップ > Technology > AWS Amplify Hosting(AWS Amplify Console)にAmazon CloudFrontとAWS WAFを追加してIP制限を設定してみた － カスタムオリジンにIP制限、基本認証、SSL/TLS証明書を追加するAWS CloudFormationテンプレート

AWS Amplify Hosting(AWS Amplify Console)にAmazon CloudFrontとAWS WAFを追加してIP制限を設定してみた － カスタムオリジンにIP制限、基本認証、SSL/TLS証明書を追加するAWS CloudFormationテンプレート

Technology AWS Amplify コーディング・実装

小西秀和です。
以前、次の記事でAWS Amplify Hosting(AWS Amplify Console)の構築方法について紹介しました。

AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 構築編(Amplify Console)

しかし、AWS Amplify Hosting(AWS Amplify Console)では基本認証や証明書追加の機能はありますが、IP制限の機能がサポートされていません。

そのため、今回は内部がAmazon S3とAmazon CloudFrontで構成されていると推測されるAWS Amplify Hostingをカスタムオリジンと見なし、Amazon CloudFront、AWS WAF、Lambda@Edgeを使用してIP制限機能の追加と基本認証機能のオーバーライドを試してみたいと思います。

補足ですが、AWS Amplifyのコンポーネントは最近ではAWS Amplify CLI、AWS Amplify Libraries、AWS Amplify Hosting、AWS Amplify Studioに分類され、AWS Amplify HostingにはAWS Amplify CLIによるホスティングとAWS Amplify Consoleによるホスティングを含むような概念になっているようです。

参考：Web アプリケーション開発のいろはと AWS Amplify

ここでは以前の記事と同様にAWS Amplify Consoleの機能について言及しますが、AWS Amplifyによるホスティング機能をまとめてAWS Amplify Hostingと呼ぶようになっている傾向が強いため、用語としては「AWS Amplify Hosting」を使用しています。

※本記事および当執筆者のその他の記事で掲載されているソースコードは自主研究活動の一貫として作成したものであり、動作を保証するものではありません。使用する場合は自己責任でお願い致します。また、予告なく修正することもありますのでご了承ください。

今回の記事の内容は次のような構成になっています。

本記事で試す構成図

今回の構成ではAmazon S3とAmazon CloudFrontで構成されていると推測されるAWS Amplify Hostingをカスタムオリジンと見なし、Amazon CloudFront、AWS WAF、Lambda@Edgeと関連付けるので、Amazon CloudFrontが2段の構成になります。

また、AWS Amplify HostingのURLに直接アクセスされる可能性があるため、AWS Amplify Hostingで設定した基本認証のID・パスワードをBase64エンコードした文字列を追加するAmazon CloudFront側からカスタムヘッダーで送信することで、AWS Amplify Hostingへの直接アクセスを基本認証でブロックして、AWS CloudFormationで追加するAmazon CloudFrontからの通信を許可します。

一方でAmazon CloudFront側の基本認証はLambda@Edgeで実装し、AWS Amplify Hostingの基本認証情報とは別にID・パスワードを設定します。

Amazon CloudFront側のIP制限はAWS WAF Web ACLに入力したIPアドレスを許可するルールを作成して実現します。

今回の構成ではさらにAWS Certificate Manager(ACM)でSSL/TLS証明書も追加するAmazon CloudFrontに関連付けています。

AWS Amplify HostingにAmazon CloudFront、AWS WAF、Lambda@Edge、ACMを追加する構成例
AWS Amplify HostingにAmazon CloudFront、AWS WAF、Lambda@Edge、ACMを追加する構成例

AWS CloudFormationテンプレートとパラメータの例

AWS CloudFormationテンプレート(Amazon CloudFront、AWS WAF、Lambda@Edge、ACMをカスタムオリジンに関連付け)

このAWS CloudFormationテンプレートは、us-east-1リージョンにデプロイすることでAmazon CloudFront、AWS WAF、Lambda@Edge、ACMをカスタムオリジン(AWS Amplify Hosting、Amazon EC2など)に関連付けるものです。

CloudFrontOriginCustomHeaderNameにAuthorization、CloudFrontOriginCustomHeaderValueにBasic ＜基本認証用Base64文字列＞を入力することでカスタムヘッダーを使用してAmazon CloudFrontの背後にあるカスタムオリジン(AWS Amplify Hosting、Amazon EC2など)で設定してある基本認証を通過します。

CloudFrontOriginCustomHeaderNameとCloudFrontOriginCustomHeaderValueを変更すれば、基本認証以外のカスタムヘッダーを使用したカスタムオリジンの認証にも幅広く使用できるようにしています。

一方でAmazon CloudFront側のLambda@Edgeを使用した基本認証は、LambdaEdgeBasicAuthIDにID、LambdaEdgeBasicAuthPWにパスワードを入力して設定します。

Amazon CloudFront側のIP制限は、WAFWebACLAllowIPListへプレフィックス表記の許可IPアドレスをカンマ区切りで入力します。

入力パラメータ例

  1. CloudFrontCustomOriginDomain: "demo.xxxxxxxxxxxxxx.amplifyapp.com"
  2. CloudFrontOriginCustomHeaderName: "Authorization"
  3. CloudFrontOriginCustomHeaderValue: "Basic SWFtOkltbWVyc2VkSW5BV1M="  # ID: Iam, Password: ImmersedInAWSの場合
  4. CloudFrontDistributionID: ""
  5. CloudFrontCachePolicyName: "CachingDisabled"
  6. CloudFrontOriginRequestPolicyName: "NONE"
  7. CloudFrontResponseHeaderPolicyName: "CORS-with-preflight-and-SecurityHeadersPolicy"
  8. WAFWebACLResourcePrefix: "WebHostIPRestrictionsForCustomOrigin"
  9. WAFWebACLAllowIPList: "XXX.XXX.XXX.XXX/16,YYY.YYY.YYY.YYY/24,ZZZ.ZZZ.ZZZ.ZZZ/32"
  10. LambdaEdgeBasicAuthFuncName: "WebHostBasicAuthLambdaEdgeForCustomOrigin"
  11. LambdaEdgeBasicAuthID: "Iam"
  12. LambdaEdgeBasicAuthPW: "Nobody"
  13. ACMCustomDomainName: "cfn-acm-edge-waf-cfnt-custom-origin.h-o2k.com"
  14. ACMHostedZoneId: "ZZZZZZZZZZZZZZZZZZZZZ"

※CloudFrontOriginCustomHeaderValueに入力する基本認証用のBase64文字列は次のUnix系コマンドで＜ID＞、＜パスワード＞にそれぞれ値を入れて実行すると取得できます。

  1. $ echo -n '＜ID＞:＜パスワード＞' | base64

テンプレート本体

ファイル名：WebHostCFnAddCloudfrontWafEdgeAndAcmToCustomOrigin.yml

  1. AWSTemplateFormatVersion: '2010-09-09'
  2. Description: 'CFn Template for a stack that creates ACM, Lambda@Edge, WAF, and Custom Origin+CloudFront Hosting.'
  3. Parameters:
  4.   CloudFrontCustomOriginDomain: #【CloudFront用】Amazon CloudFrontに設定するCustomOriginのURL
  5.     Type: String
  6.     Default: "demo.xxxxxxxxxxxxxx.amplifyapp.com"
  7.   CloudFrontOriginCustomHeaderName: #【CloudFront用】Amazon CloudFrontのオリジンカスタムヘッダーに設定するヘッダー名
  8.     Type: String
  9.     Default: "Authorization" # 基本認証を想定してデフォルトはAuthorization
  10.   CloudFrontOriginCustomHeaderValue: #【CloudFront用】Amazon CloudFrontのオリジンカスタムヘッダーに設定するヘッダー値
  11.     Type: String
  12.     Default: "Basic SWFtOkltbWVyc2VkSW5BV1M=" # 基本認証を想定して「Basic ＜Base64文字列＞」。例は「echo -n "Iam:ImmersedInAWS" | base64」を実行した場合のBase64文字列。
  13.     Description: 'The following command creates a base64 string: echo -n "ID:Password" | base64'
  14.   CloudFrontCachePolicyName: #【CloudFront用】Amazon CloudFrontのキャッシュポリシーの指定。マネージドポリシーからの選択式。  
  15.     Type: String
  16.     Default: CachingDisabled
  17.     AllowedValues:
  18.       - NONE
  19.       - Amplify
  20.       - CachingDisabled
  21.       - CachingOptimized
  22.       - CachingOptimizedForUncompressedObjects
  23.       - Elemental-MediaPackage
  24.   CloudFrontOriginRequestPolicyName: #【CloudFront用】Amazon CloudFrontのオリジンリクエストポリシー。マネージドポリシーからの選択式。  
  25.     Type: String
  26.     Default: NONE
  27.     AllowedValues:
  28.       - NONE
  29.       - AllViewer
  30.       - AllViewerAndCloudFrontHeaders-2022-06
  31.       - AllViewerExceptHostHeader
  32.       - CORS-CustomOrigin
  33.       - CORS-S3Origin
  34.       - Elemental-MediaTailor-PersonalizedManifests
  35.       - UserAgentRefererHeaders
  36.   CloudFrontResponseHeaderPolicyName: #【CloudFront用】Amazon CloudFrontのレスポンスヘッダーポリシー。マネージドポリシーからの選択式。  
  37.     Type: String
  38.     Default: CORS-with-preflight-and-SecurityHeadersPolicy
  39.     AllowedValues:
  40.       - NONE
  41.       - SimpleCORS
  42.       - CORS-With-Preflight
  43.       - SecurityHeadersPolicy
  44.       - CORS-and-SecurityHeadersPolicy
  45.       - CORS-with-preflight-and-SecurityHeadersPolicy
  46.   ACMCustomDomainName: #【ACM用】ACM証明書を発行する対象ドメイン名
  47.     Type: String
  48.     Default: cfn-acm-edge-waf-cfnt-custom-origin.h-o2k.com
  49.   ACMHostedZoneId: #【ACM用】ACM証明書を発行する対象ドメイン名を管理するRoute53のホストゾーンID
  50.     Type: String
  51.     Default: ZZZZZZZZZZZZZZZZZZZZZ
  52.   WAFWebACLResourcePrefix: #【WAFWebACL用】AWS WAF WebACLのリソースにつけるPrefix  
  53.     Type: String
  54.     Default: WebHostIPRestrictionsForCustomOrigin
  55.   WAFWebACLAllowIPList: #【WAFWebACL用】AWS WAF WebACLのルールでIP制限をするCIDR
  56.     #Type: CommaDelimitedList
  57.     Type: String
  58.     Default: "XXX.XXX.XXX.XXX/16,YYY.YYY.YYY.YYY/24,ZZZ.ZZZ.ZZZ.ZZZ/32"
  59.   LambdaEdgeBasicAuthFuncName: #【Lambda@Edge用】基本認証をするLambda@Edgeの関数名
  60.     Type: String
  61.     Default: WebHostBasicAuthLambdaEdgeForCustomOrigin
  62.   LambdaEdgeBasicAuthID: #【Lambda@Edge用】基本認証をするLambda@Edgeで認証するID。AWS Secrets Managerシークレットとして保管する。
  63.     Type: String
  64.     Default: Iam
  65.   LambdaEdgeBasicAuthPW: #【Lambda@Edge用】基本認証をするLambda@Edgeで認証するパスワード。AWS Secrets Managerシークレットとして保管する。
  66.     Type: String
  67.     Default: Nobody
  68.   CloudFrontDistributionID: #【共通】各リソースの関連付けに使用するAmazon CloudFrontのDistribution ID。
  69.     #ALambda@Edgeで使用するAWS Secrets Managerシークレットの一意識別で使用する。
  70.     Type: String #※スタックの初回Create処理でAmazon CloudFrontを作成してから、2回目のUpdate処理で入力する。
  71.     Default: ""
  72. Mappings: 
  73.   CloudFrontCachePolicyIds:
  74.     NONE:
  75.       Id: ""
  76.     Amplify:
  77.       Id: 2e54312d-136d-493c-8eb9-b001f22f67d2
  78.     CachingDisabled:
  79.       Id: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad
  80.     CachingOptimized:
  81.       Id: 658327ea-f89d-4fab-a63d-7e88639e58f6
  82.     CachingOptimizedForUncompressedObjects:
  83.       Id: b2884449-e4de-46a7-ac36-70bc7f1ddd6d
  84.     Elemental-MediaPackage:
  85.       Id: 08627262-05a9-4f76-9ded-b50ca2e3a84f
  86.   CloudFrontOriginRequestPolicyIds:
  87.     NONE:
  88.       Id: ""
  89.     AllViewer:
  90.       Id: 216adef6-5c7f-47e4-b989-5492eafa07d3
  91.     AllViewerAndCloudFrontHeaders-2022-06:
  92.       Id: 33f36d7e-f396-46d9-90e0-52428a34d9dc
  93.     AllViewerExceptHostHeader:
  94.       Id: b689b0a8-53d0-40ab-baf2-68738e2966ac
  95.     CORS-CustomOrigin:
  96.       Id: 59781a5b-3903-41f3-afcb-af62929ccde1
  97.     CORS-S3Origin:
  98.       Id: 88a5eaf4-2fd4-4709-b370-b4c650ea3fcf
  99.     Elemental-MediaTailor-PersonalizedManifests:
  100.       Id: 775133bc-15f2-49f9-abea-afb2e0bf67d2
  101.     UserAgentRefererHeaders:
  102.       Id: acba4595-bd28-49b8-b9fe-13317c0390fa
  103.   CloudFrontResponseHeaderPolicyIds:
  104.     NONE:
  105.       Id: ""
  106.     CORS-and-SecurityHeadersPolicy:
  107.       Id: e61eb60c-9c35-4d20-a928-2b84e02af89c
  108.     CORS-With-Preflight:
  109.       Id: 5cc3b908-e619-4b99-88e5-2cf7f45965bd
  110.     CORS-with-preflight-and-SecurityHeadersPolicy:
  111.       Id: eaab4381-ed33-4a86-88ca-d9558dc6cd63
  112.     SecurityHeadersPolicy:
  113.       Id: 67f7725c-6f97-4210-82d7-5512b31e9d03
  114.     SimpleCORS:
  115.       Id: 60669652-455b-4ae9-85a4-c4c02393f86c
  116. Conditions:
  117.   IsAllowIPList:
  118.     !Not [!Equals [!Ref WAFWebACLAllowIPList, ""]]
  119.   IsCloudFrontDistributionID: #入力パラメータにAmazon CloudFrontのDistribution IDがある場合はTrueでLambda@Edgeを作成、ない場合はFalseでLambda@Edge作成をスキップ。
  120.     !Not [!Equals [!Ref CloudFrontDistributionID, ""]]
  121. Resources:
  122.   #CloudFrontをエイリアスレコードとしてRoute53ホストゾーンに登録するRoute53レコードセット
  123.   Route53RecordSetGroup:
  124.     Type: AWS::Route53::RecordSetGroup
  125.     DependsOn:
  126.       - CloudFrontDistribution
  127.     Properties:
  128.       HostedZoneId:
  129.         !Ref ACMHostedZoneId
  130.       RecordSets:
  131.         - Name: !Ref ACMCustomDomainName
  132.           Type: A
  133.           #CloudFrontをエイリアスレコードとして登録する場合はエイリアスターゲットのHostedZoneIdが次の固定値となる
  134.           #参考：https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/quickref-route53.html
  135.           AliasTarget:
  136.             HostedZoneId: Z2FDTNDATAQYW2
  137.             DNSName: !GetAtt CloudFrontDistribution.DomainName
  139.   #ACM証明書の発行  
  140.   CertificateManagerCertificate:
  141.     Type: AWS::CertificateManager::Certificate
  142.     Properties:
  143.       DomainName: !Ref ACMCustomDomainName
  144.       DomainValidationOptions:
  145.         - DomainName: !Ref ACMCustomDomainName
  146.           HostedZoneId: !Ref ACMHostedZoneId
  147.       ValidationMethod: DNS #カスタムドメインの検証はRoute53のDNSを使用する方法で実施する
  149.   #AWS WAF WebACLの作成
  150.   WAFv2WebACL:
  151.     Type: AWS::WAFv2::WebACL
  152.     Properties:
  153.       Name: !Sub "${WAFWebACLResourcePrefix}-WebACL"
  154.       Scope: CLOUDFRONT
  155.       DefaultAction:
  156.         Block: {}
  157.       VisibilityConfig:
  158.         SampledRequestsEnabled: true
  159.         CloudWatchMetricsEnabled: true
  160.         MetricName: !Sub "${WAFWebACLResourcePrefix}-WebACL-Metric"
  161.       Rules:
  162.         - Name: !Sub "${WAFWebACLResourcePrefix}-WebACL-Rule"
  163.           Action:
  164.             Allow: {}
  165.           Priority: 0
  166.           Statement:
  167.             IPSetReferenceStatement:
  168.               Arn: !GetAtt WAFv2IPSet.Arn
  169.           VisibilityConfig:
  170.             SampledRequestsEnabled: true
  171.             CloudWatchMetricsEnabled: true
  172.             MetricName: !Sub "${WAFWebACLResourcePrefix}-WebACL-Rule-Metric"
  173.   WAFv2IPSet:
  174.     Type: AWS::WAFv2::IPSet
  175.     Properties:
  176.       Name: !Sub "${WAFWebACLResourcePrefix}-IPSet"
  177.       Scope: CLOUDFRONT
  178.       IPAddressVersion: IPV4
  179.       Addresses: !If [IsAllowIPList, !Split [ ",", !Ref WAFWebACLAllowIPList ], []]
  181.   #Lambda@Edgeの作成
  182.   LambdaEdgeBasicAuth:
  183.     Type: AWS::Lambda::Function
  184.     DependsOn: 
  185.       - SecretsManagerSecret
  186.       - LambdaEdgeBasicAuthRole
  187.     Properties:
  188.       FunctionName: !Ref LambdaEdgeBasicAuthFuncName
  189.       Runtime: python3.8
  190.       MemorySize: 128 #Lambda@Edgeのクォータ最大値を設定
  191.       Timeout: 5 #Lambda@Edgeのクォータ最大値を設定
  192.       Role: !GetAtt LambdaEdgeBasicAuthRole.Arn
  193.       Handler: index.lambda_handler
  194.       Code:
  195.         ZipFile: |
  196.           # 基本認証を実施するLambda@Edgeの関数
  197.           import json
  198.           import boto3
  199.           import base64
  200.           # ID、パスワードを保管し、認証に使用するAWS Secrets Managerを扱うクライアントを作成
  201.           asm_client = boto3.client('secretsmanager', region_name='us-east-1')
  202.           # エラーの場合のレスポンスを定義
  203.           err_response = {
  204.               'status': '401',
  205.               'statusDescription': 'Unauthorized',
  206.               'body': 'Authentication Failed.',
  207.               'headers': {
  208.                   'www-authenticate': [
  209.                       {
  210.                         'key': 'WWW-Authenticate',
  211.                         'value': 'Basic realm="Basic Authentication"'
  212.                       }
  213.                   ]
  214.               }
  215.           }
  216.           
  217.           def lambda_handler(event, context):
  218.               try:
  219.                   print('event:')
  220.                   print(event)
  221.                   # イベントからCloudFrontのリクエストを取得
  222.                   request = event['Records'][0]['cf']['request']
  223.                   # イベントからCloudFrontのDistribution IDを取得
  224.                   cf_dist_id = event['Records'][0]['cf']['config']['distributionId']
  225.                   # リクエストからヘッダーを取得
  226.                   headers = request['headers']
  227.                   if (headers.get('authorization') != None):
  228.                       # ヘッダーにauthorizationがあれば認証を試行する
  229.                       # headers['authorization'][0]['value']の中身は「Basic ＜base64でエンコードされた[ID:Password]の文字列＞」
  230.                       # authorizationの内容を分解してID、パスワードを取り出す
  231.                       target_credentials_str = headers['authorization'][0]['value'].split(
  232.                           " ")
  233.                       target_credentials = base64.b64decode(
  234.                           target_credentials_str[1]).decode().split(":")
  235.                       target_id = target_credentials[0]
  236.                       target_pw = target_credentials[1]
  237.           
  238.                       # 取得したCloudFrontのDistribution IDおよび基本認証で入力されたIDでシークレットを取得する
  239.                       response = asm_client.get_secret_value(
  240.                           SecretId='CloudFrontBasicAuth/' +
  241.                           cf_dist_id + '/' + str(target_id)
  242.                       )
  243.                       # シークレットが取得でき、格納されている文字列が基本認証で入力されたパスワードと一致すれば認証成功としてリクエストを返却する。
  244.                       # それ以外の場合はエラーレスポンスを返す。
  245.                       if (response.get('SecretString') != None):
  246.                           secret_string = json.loads(response['SecretString'])
  247.                           if (secret_string.get('Password') == target_pw):
  248.                               return request
  249.                           else:
  250.                               return err_response
  251.                       else:
  252.                           return err_response
  253.           
  254.                   else:
  255.                       return err_response
  256.           
  257.               except Exception as e:
  258.                   print("Exception:")
  259.                   print(e)
  260.           
  261.                   return err_response
  262.           
  263.   LambdaEdgeBasicAuthVersion: #呼出元スタックでAmazon CloudFrontと関連付けるためのLambdaEdgeバージョンを作成する
  264.     Type: AWS::Lambda::Version
  265.     DependsOn: 
  266.       - LambdaEdgeBasicAuth
  267.     Properties:
  268.       FunctionName: !Ref LambdaEdgeBasicAuth
  269.       Description: 'Basic Auth Lambda Edge for Amazon CloudFront'
  270.   LambdaEdgeBasicAuthRole: #基本認証用Lambda@Edgeに適用するIAMロールとIAMポリシーの設定
  271.     Type: AWS::IAM::Role
  272.     Properties:
  273.       RoleName: !Sub 'IAMRole-${LambdaEdgeBasicAuthFuncName}'
  274.       Path: /
  275.       AssumeRolePolicyDocument:
  276.         Version: 2012-10-17
  277.         Statement:
  278.           - Effect: Allow
  279.             Principal:
  280.               Service:
  281.                 - edgelambda.amazonaws.com
  282.                 - lambda.amazonaws.com
  283.             Action:
  284.               - sts:AssumeRole
  285.       ManagedPolicyArns:
  286.         - arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole
  287.       Policies:
  288.       - PolicyName: !Sub 'IAMPolicy-${LambdaEdgeBasicAuthFuncName}'
  289.         PolicyDocument:
  290.           Version: '2012-10-17'
  291.           Statement:
  292.           - Effect: Allow
  293.             Action:
  294.             - iam:CreateServiceLinkedRole
  295.             Resource:
  296.             - '*'
  297.           - Effect: Allow
  298.             Action:
  299.             - lambda:GetFunction
  300.             - lambda:EnableReplication
  301.             Resource:
  302.             - !Sub 'arn:aws:lambda:us-east-1:${AWS::AccountId}:function:${LambdaEdgeBasicAuthFuncName}'
  303.           - Effect: Allow
  304.             Action:
  305.             - cloudfront:UpdateDistribution
  306.             Resource:
  307.               !If
  308.                 - IsCloudFrontDistributionID
  309.                 - !Sub 'arn:aws:cloudfront::${AWS::AccountId}:distribution/${CloudFrontDistributionID}'
  310.                 - !Sub 'arn:aws:cloudfront::${AWS::AccountId}:distribution/*'
  311.       - PolicyName: SecretsManagerGetSecretValue
  312.         PolicyDocument:
  313.           Version: '2012-10-17'
  314.           Statement:
  315.           - Effect: Allow
  316.             Action:
  317.             - secretsmanager:GetSecretValue
  318.             Resource: 
  319.               !If
  320.                 - IsCloudFrontDistributionID
  321.                 - !Sub 'arn:aws:secretsmanager:us-east-1:${AWS::AccountId}:secret:CloudFrontBasicAuth/${CloudFrontDistributionID}/*'
  322.                 - !Sub 'arn:aws:secretsmanager:us-east-1:${AWS::AccountId}:secret:CloudFrontBasicAuth/DUMMY/*'
  323.   SecretsManagerSecret: #基本認証に使用するID、パスワードを格納するAWS Secrets Managerシークレットの作成
  324.     Type: 'AWS::SecretsManager::Secret'
  325.     Properties:
  326.       Name: 
  327.         !If
  328.           - IsCloudFrontDistributionID
  329.           - !Sub CloudFrontBasicAuth/${CloudFrontDistributionID}/${LambdaEdgeBasicAuthID}
  330.           - !Sub CloudFrontBasicAuth/DUMMY/${LambdaEdgeBasicAuthID}
  331.       SecretString: !Sub '{"Password":"${LambdaEdgeBasicAuthPW}"}'
  332.       Description: "SecretsManagerSecret of LambdaEdgeBasicAuth"
  334.   CloudFrontDistribution:
  335.     Type: AWS::CloudFront::Distribution
  336.     DependsOn:
  337.       #ACM証明書が発行されてからCloudFrontに関連付けるためDependsOnを設定
  338.       - CertificateManagerCertificate
  339.       #AWS WAF WebACLが作成されてからCloudFrontに関連付けるためDependsOnを設定
  340.       - WAFv2WebACL
  341.       #基本認証用Lambda@Edgeバージョンが作成されてからCloudFrontに関連付けるためDependsOnを設定
  342.       - LambdaEdgeBasicAuth
  343.     Properties:
  344.       DistributionConfig:
  345.         #CloudFrontのエイリアスにACM証明書を発行したドメイン名を設定する
  346.         Aliases:
  347.           - !Ref ACMCustomDomainName
  348.         #CloudFrontにACM証明書を設定する
  349.         ViewerCertificate:
  350.           SslSupportMethod: sni-only
  351.           MinimumProtocolVersion: TLSv1.2_2021
  352.           AcmCertificateArn: !Ref CertificateManagerCertificate #返却値はACM証明書のARN
  353.         WebACLId: !GetAtt WAFv2WebACL.Arn
  354.         HttpVersion: http2
  355.         Origins:
  356.           - DomainName: !Ref CloudFrontCustomOriginDomain
  357.             Id: StaticWebsiteHostingCustomOrigin
  358.             CustomOriginConfig:
  359.               OriginProtocolPolicy: "https-only"
  360.             OriginCustomHeaders:
  361.               - HeaderName: !Ref CloudFrontOriginCustomHeaderName
  362.                 HeaderValue: !Ref CloudFrontOriginCustomHeaderValue
  363.         Enabled: true
  364.         DefaultCacheBehavior:
  365.           AllowedMethods: [GET, HEAD, OPTIONS]
  366.           TargetOriginId: StaticWebsiteHostingCustomOrigin #オリジンをターゲットに指定する
  367.           ForwardedValues:
  368.             QueryString: false
  369.           ViewerProtocolPolicy: redirect-to-https
  370.           CachePolicyId: !FindInMap [ CloudFrontCachePolicyIds, !Ref CloudFrontCachePolicyName , Id ]
  371.           OriginRequestPolicyId: !FindInMap [ CloudFrontOriginRequestPolicyIds, !Ref CloudFrontOriginRequestPolicyName , Id ]
  372.           ResponseHeadersPolicyId: !FindInMap [ CloudFrontResponseHeaderPolicyIds, !Ref CloudFrontResponseHeaderPolicyName , Id ]
  373.           #DefaultTTL: 86400
  374.           #MaxTTL: 31536000
  375.           #MinTTL: 60
  376.           #Compress: true
  377.           LambdaFunctionAssociations:
  378.             !If
  379.               - IsCloudFrontDistributionID
  380.               - [
  381.                   {
  382.                     EventType: viewer-request,
  383.                     IncludeBody: "true",
  384.                     LambdaFunctionARN: !Ref LambdaEdgeBasicAuthVersion
  385.                   }
  386.                 ]
  387.               - !Ref AWS::NoValue
  388.         DefaultRootObject: index.html
  389.         CustomErrorResponses:
  390.           - {
  391.               ErrorCachingMinTTL: 10,
  392.               ErrorCode: 400,
  393.               ResponseCode: 200,
  394.               ResponsePagePath: /,
  395.             }
  396.           - {
  397.               ErrorCachingMinTTL: 10,
  398.               ErrorCode: 404,
  399.               ResponseCode: 200,
  400.               ResponsePagePath: /,
  401.             }
  402. Outputs:
  403.   Region:
  404.     Value:
  405.       !Ref AWS::Region
  406.   ACMCustomDomainURL:
  407.     Value:
  408.       !Join ["", ["https://", !Ref ACMCustomDomainName]]
  409.     Description: "Web hosting URL with Certificate"
  410.   CloudFrontDistributionID:
  411.     Value:
  412.       !Ref CloudFrontDistribution
  413.   CloudFrontDomainName:
  414.     Value:
  415.       !GetAtt CloudFrontDistribution.DomainName
  416.   CloudFrontSecureURL:
  417.     Value:
  418.       !Join ["", ["https://", !GetAtt CloudFrontDistribution.DomainName]]
  419.   LambdaEdgeCompleteSetupSkiped:
  420.     Value:
  421.       !If [IsCloudFrontDistributionID, "false", "true"]

構築手順

  1. 次の記事で説明してある手順を参考にAWS Amplify Hostingによる静的ウェブサイトを作成し、基本認証のID、パスワードを設定する。
    AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 構築編(Amplify Console)
    以下の情報はAWS CloudFormationテンプレートのパラメータとして使用するのでメモしておく。
    ・作成したAWS Amplify Hostingのドメイン(例：＜App Name＞.xxxxxxxxxxxxxx.amplifyapp.com)
    ・Unix系OSで次のコマンドを実行して出力されるBase64文字列(＜ID＞、＜パスワード＞にはAWS Amplify Hostingに設定した基本認証のID、パスワードを入力する)
    　echo -n '＜ID＞:＜パスワード＞' | base64

  2. us-east-1リージョンで「Amazon CloudFront、AWS WAF、Lambda@Edgeをカスタムオリジンに関連付け」のAWS CloudFormationテンプレートにカスタムオリジン(AWS Amplify Hosting)のドメインや基本認証用Base64文字列などをパラメータに入力した上で作成(初回実行)のデプロイをする。
    ※初回実行ではCloudFrontDistributionIDは入力しない。
    初回作成後にOutputフィールドへCloudFrontDistributionIDが出力されるのでメモしておく。

  3. us-east-1リージョンで「Amazon CloudFront、AWS WAF、Lambda@Edgeをカスタムオリジンに関連付け」のAWS CloudFormationテンプレートにCloudFrontDistributionIDのパラメータを入力した上で更新(2回目実行)のデプロイをする。
    入力されたCloudFrontDistributionIDに基づいてLambda@Edgeで使用するAWS Secrets Managerシークレットや権限が変更されてAmazon CloudFront側の基本認証が設定される。

  4. 結果確認
    正しく実行されていればパラメータで指定した許可IPアドレスからACM証明書を発行する対象ドメインにhttpsでアクセスすると基本認証のダイアログが表示され、Amazon CloudFront側の基本認証としてパラメータで指定したIDとパスワードで認証を通過します。
    CloudFrontOriginCustomHeaderNameへAuthorization、CloudFrontOriginCustomHeaderValueへBasic ＜基本認証用Base64文字列＞を入力していれば、Amazon CloudFront側からカスタムオリジン(AWS Amplify Hosting)には前述した基本認証用Base64文字列がAuthorizationのカスタムヘッダーで送信され、カスタムオリジン側の基本認証を通過します。
    WAFWebACLAllowIPListパラメータで指定した許可IPアドレス以外からアクセスすると「403 ERROR」でアクセス拒否されます。
    正しく動作しない場合は呼出元AWS CloudFormationスタックのイベント内容、AWS CloudTrailのログから原因を特定して不具合を修正します。

削除手順

AWS CloudFormationではLambda@EdgeバージョンとAmazon CloudFrontの相互関係のある関連付け解除を順序制御することはしないので一度にすべてのスタックを削除することはできません。
そのため、削除する場合は次の手順のようにAmazon CloudFrontとLambda@Edgeバージョンの関連付けを解除した後、AWS CloudFormationスタックを削除する必要があります。

  1. AWS CloudFormationスタックのパラメータでAmazon CloudFrontのDistribution IDを空にしてUpdate処理をする。
    呼出元AWS CloudFormationスタックのパラメータ「CloudFrontDistributionID」を空にしてスタックを更新する。
  2. AWS CloudFormationスタックを削除する
  3. AWS CloudFormationスタックの削除が失敗するようであれば、Lambda@Edgeを残してAWS CloudFormationスタックを削除し、後からLambda@Edgeバージョンを個別に削除する。


参考：
Web アプリケーション開発のいろはと AWS Amplify
Route 53 template snippets - AWS CloudFormation
Tech Blog with related articles referenced

まとめ

今回はus-east-1リージョンへ作成したAmazon CloudFront、AWS WAF、Lambda@EdgeへAWS Amplify Hostingをカスタムオリジンとして関連付けてIP制限機能の追加と基本認証機能のオーバーライドを試しました。

結果として今回の構成で追加したAmazon CloudFront側のSSL/TLS証明書(AWS Certificate Manager)・基本認証(Lambda@Edge)・IP制限(AWS WAF)が機能し、Authorizationカスタムヘッダーで設定した基本認証用Base64文字列によってカスタムオリジン(AWS Amplify Hosting)の基本認証を通過してHTMLコンテンツが表示されることを確認できました。

また、今回の構成はAWS Amplify Hosting(AWS Amplify Console)の内部にあると想定されるAmazon CloudFrontとAWS CloudFormationによって追加したAmazon CloudFrontで2段のAmazon CloudFront構成のため、レスポンスは遅くなりましたが、特に不具合はなくHTMLコンテンツが表示されました(※動作保証ではありません。特にJavaScriptやバックエンドとのAPI通信などが絡んでくると不具合が出る可能性はあります。)。

ただ、本来であればAWS Amplify Hosting側でAWS WAFのIP制限などの機能がサポートされることが理想的です。
今後もAWS Amplify Hostingの改善を楽しみにしながら、AWS CloudFormation、AWS Amplify、AWS CDKなどのデプロイ関連サービスや静的ウェブホスティングに関するアップデートについて様々なパターンを試してみたいと考えています。

Written by Hidekazu Konishi
Hidekazu Konishi (小西秀和), a Japan AWS Top Engineer and a Japan AWS All Certifications Engineer

執筆者小西秀和

Japan AWS Top Engineer, Japan AWS All Certifications Engineer(AWS認定全冠)として、知識と実践的な経験を活かし、AWSの活用に取り組んでいます。
NRIネットコムBlog: 小西 秀和: 記事一覧
Amazon.co.jp: 小西 秀和: books, biography, latest update
Personal Tech Blog | [B! Bookmark]