How to reference CloudFront domain name when creating a AWS::S3::RecordSet in CloudFormation/Serverless? - aws-cloudformation

Question

I have a project which has a cloudfront distribution to serve some data out of a bucket. I am using Serverless framework, but I think this is mainly a CloudFormation question.
I would like to create the A record in a Route53 hosted domain (third level domain if that matters, ie: dashboard.domain.com is pointed to Route53, and I'm trying to add .dashboard.domain.com).
I just cannot figure out how to reference the output from the CloudFront resource?
This is what I have right now, and it works because it's all static. However, I need to automatically put in the correct cloud front domain which will be created by another resource. I figure these is some type of GetAttr I can do, but I just cannot get it to work.
DNSRecords:
Type: AWS::Route53::RecordSetGroup
Properties:
HostedZoneId: Z09193931V4YGJEPVMLG1
RecordSets:
- Name: prod.dashboard.domain.com
Type: A
AliasTarget:
HostedZoneId: Z2FDTNDATAQYW2
DNSName: someid.cloudfront.net
WebAppCloudFrontDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
- DomainName:
Fn::Join: [
"", [
{ "Ref": "WebAppS3Bucket" },
".s3.amazonaws.com"
]
]
## An identifier for the origin which must be unique within the distribution
Id: WebApp
CustomOriginConfig:
HTTPPort: 80
HTTPSPort: 443
OriginProtocolPolicy: https-only
Enabled: 'true'
## Uncomment the following section in case you are using a custom domain
Aliases:
- ${self:provider.stage}.dashboard.domain.com
DefaultRootObject: index.html
## Since the Single Page App is taking care of the routing we need to make sure ever path is served with index.html
## The only exception are files that actually exist e.h. app.js, reset.css
CustomErrorResponses:
- ErrorCode: 404
ResponseCode: 200
ResponsePagePath: /index.html
DefaultCacheBehavior:
AllowedMethods:
- DELETE
- GET
- HEAD
- OPTIONS
- PATCH
- POST
- PUT
## The origin id defined above
TargetOriginId: WebApp
## Defining if and how the QueryString and Cookies are forwarded to the origin which in this case is S3
ForwardedValues:
QueryString: 'false'
Cookies:
Forward: none
## The protocol that users can use to access the files in the origin. To allow HTTP use `allow-all`
ViewerProtocolPolicy: redirect-to-https
## The certificate to use when viewers use HTTPS to request objects.
ViewerCertificate:
AcmCertificateArn:
Ref: SSLCertificate
SslSupportMethod: sni-only
MinimumProtocolVersion: TLSv1
EDIT: Updated to include the WebAppCloudFrontDistribution

Answer 1

You haven't provided your AWS::CloudFront::Distribution resource definition, so I only can based it on an example.
MyCloudFrontDistro:
Type: AWS::CloudFront::Distribution
Properties:
# some properties
Then you can modify your DNSRecords
DNSRecords:
Type: AWS::Route53::RecordSetGroup
Properties:
HostedZoneId: Z09193931V4YGJEPVMLG1
RecordSets:
- Name: prod.dashboard.domain.com
Type: A
AliasTarget:
HostedZoneId: !Ref MyCloudFrontDistro
DNSName: !GetAtt MyCloudFrontDistro.DomainName

Answer 2

WebAppCloudFrontDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
- DomainName:
Fn::Join: [
"", [
{ "Ref": "WebAppS3Bucket" },
".s3.amazonaws.com"
]
]
## An identifier for the origin which must be unique within the distribution
Id: WebApp
CustomOriginConfig:
HTTPPort: 80
HTTPSPort: 443
OriginProtocolPolicy: https-only
Enabled: 'true'
Aliases:
- ${self:provider.stage}.dashboard.domain.com
DefaultRootObject: index.html
CustomErrorResponses:
- ErrorCode: 404
ResponseCode: 200
ResponsePagePath: /index.html
DefaultCacheBehavior:
AllowedMethods:
- DELETE
- GET
- HEAD
- OPTIONS
- PATCH
- POST
- PUT
TargetOriginId: WebApp
ForwardedValues:
QueryString: 'false'
Cookies:
Forward: none
## The protocol that users can use to access the files in the origin. To allow HTTP use `allow-all`
ViewerProtocolPolicy: redirect-to-https
## The certificate to use when viewers use HTTPS to request objects.
ViewerCertificate:
AcmCertificateArn:
Ref: SSLCertificate
SslSupportMethod: sni-only
MinimumProtocolVersion: TLSv1
## Uncomment the following section in case you want to enable logging for CloudFront requests
# Logging:
# IncludeCookies: 'false'
# Bucket: mylogs.s3.amazonaws.com
# Prefix: myprefix
Resources:
DNSRecords:
Type: AWS::Route53::RecordSetGroup
Properties:
HostedZoneName: dashboard.domain.com.
RecordSets:
- Name: ${self:provider.stage}.dashboard.domain.com
Type: A
AliasTarget:
HostedZoneId: Z2FDTNDATAQYW2
DNSName: !GetAtt WebAppCloudFrontDistribution.DomainName
Here is the working solution for me, take note of some points.
The HostedZoneId of Z2FDTNDATAQYW2 is special for the cloudfront domain. It needs to be used when referencing a cloud front resource.
The trailing space needs to be included on the HostedZoneName (if you use that compared to the HostedZoneId). In my case, I have the domain setup prior to the Cloud Formation.