Cloudformation template: Cloudfront DomainName WebsiteURL returns Error

Question

i have created a Cloudformation template for a S3 static site deployment.

In the cloudfront part the domain name must be specified. First I created the template like this and tried it out:

...
"DomainName": {
  "Fn::GetAtt": [
    "S3BucketRoot",
    "DomainName"
  ]
},
...

So everything was put on so far correctly. Only the one the Origin domain was not taken correctly. The Amazon S3 bucket Origin domain name was returned and not the Amazon S3 bucket configured as a website. This caused requests to the domain to not load correctly.

I then manually entered the Amazon S3 bucket configured as a website Origin domain name in cloudfront. After this worked correctly I wanted to change it in the template and so I adjusted it:

...
"DomainName": {
  "Fn::GetAtt": [
    "S3BucketRoot",
    "WebsiteURL"
  ]
},
...

When updating the stack I now get the error that there must not be a colon in the domain name. This comes from the http://...

So my question now is, how can i either get the right DomainName or how can i remove the http:// from the WebsiteURL?

My S3 configuration looks like this:

"S3BucketRoot": {
      "Type": "AWS::S3::Bucket",
      "DeletionPolicy": "Delete",
      "Properties": {
        "AccessControl": "PublicRead",
        "BucketName": {
          "Fn::Sub": "${AWS::StackName}-root"
        },
        "WebsiteConfiguration": {
          "ErrorDocument": "404.html",
          "IndexDocument": "index.html"
        }
      }
    },

Edit: Origin Domain Name Documentation

Answer 1

I solved it with a little hack

...
"DomainName": {
  "Fn::Select": [
    "1",
    {
      "Fn::Split": [
        "http://",
        {
          "Fn::GetAtt": [
            "S3BucketRoot",
            "WebsiteURL"
          ]
        }
      ]
    }
  ]
},
...

If someone finds a better way, pleas let me know. For now, this works.

Resource