以前、SPAの開発をする際にAWSのリソースをCloudFormationで書いていたのですが、CloudFrontはコンソールで設定していたので、ここもCloudFormationで書きたいと思ったので方法を調査しました。

コードは以下になります。説明用の切り出しなのでこのまま使えないので気をつけてください。

# bucket
AssetsBucket:
  Type: AWS::S3::Bucket
  Properties:
    BucketName: bucket-name
# bucket policy
AssetsBucketPolicy:
  Type: AWS::S3::BucketPolicy
  Properties:
    Bucket: !Ref AssetsBucket
    PolicyDocument:
      Statement:
        - Action: s3:GetObject
          Effect: Allow
          Resource: !Sub arn:aws:s3:::${AssetsBucket}/*
          Principal:
            AWS: !Sub arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ${CloudFrontOriginAccessIdentity}
# CloudFront
AssetsDistribution:
  Type: AWS::CloudFront::Distribution
  Properties:
    DistributionConfig:
      Origins:
      - Id: S3Origin
        DomainName: !Get AttAssetsBucket.DomainName
        S3OriginConfig:
          OriginAccessIdentity: !Sub origin-access-identity/cloudfront/${CloudFrontOriginAccessIdentity}
      ViewerCertificate:
        SslSupportMethod: sni-only
        AcmCertificateArn: !Sub arn:aws:acm:us-east-1:*****************:certificate/**********
      Enabled: true
      DefaultRootObject: index.html
      Comment: !Sub ${AWS::StackName} distribution
      Aliases:
      - <domain>
      DefaultCacheBehavior:
        TargetOriginId: S3Origin
        ForwardedValues:
          QueryString: false
        ViewerProtocolPolicy: redirect-to-https
CloudFrontOriginAccessIdentity:
  Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
  Properties:
    CloudFrontOriginAccessIdentityConfig:
      Comment: !Ref AWS::StackName

リソースの設定

まずはCloudFrontにアクセスした際に表示するS3のリソースですが、Originsの部分で設定します。

デフォルトで表示するファイルの設定はDefaultRootObjectで設定します。

CNAMEの設定

Route53でCloudFrontを設定する場合、CNAMEにドメイン名を設定する必要があります。

設定している部分はAssetsDistributionのAliasesです。

<domain>となっているところに設定するCNAMEを記載します。

証明書の設定

httpsにする際、証明書を設定する必要があります。

設定している部分はAssetsDistributionのViewerCertificateです。

AcmCertificateArnに発行済みの証明書のARNを指定します。

S3のアクセス設定

vueなりreactなりSPAのベースとなるhtmlはS3に配置しますが、S3にアクセスできるようだとまずいので、アクセス制限を設定します。

使用するリソースはAssetsBucketPolicyとCloudFrontOriginAccessIdentityです。

CloudFrontOriginAccessIdentityでアクセス権を作ってAssetsBucketPolicyでS3のPolicyに設定するって感じです。

カテゴリー: AWS

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。