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

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.