以前、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に設定するって感じです。
0件のコメント