Cloudfront does not redirect properly to https and subdomain

Question

According to this post and this article, one should create a second cloudfront distribution in front of an S3 bucket which redirects to another bucket, which contains the static files.

Asuuming the frontend bucket name is www.example.com and the redirect bucket is example.com. I have set up my AWS resources according to the following cloudformation template.

However, some problems occur: If I hit example.com it does not redirect to www.example.com, only when I have clicked another link on the site. In addition, it does not load the favicon for example. http://example.com is redirect to https://example.com. http://www.example.com it does not redirect to https, the webiste is not found.

What am I missing in my AWS settings?

This mentions to not set the Default Root Object property, which I did not. But maybe it is related somehow?

FrontendBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.frontendBucketName}
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
          ErrorDocument: 404.html
    RedirectdBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.redirectBucketName}
        AccessControl: PublicRead
        WebsiteConfiguration:
          RedirectAllRequestsTo:
            HostName: ${self:custom.frontendBucketName}
            Protocol: https

WebAppCloudFrontDistribution:
  Type: AWS::CloudFront::Distribution
  Properties:
    DistributionConfig:
      Origins:
      - DomainName: ${self:custom.frontendBucketName}.s3-website.${self:provider.region}.amazonaws.com
        Id: Frontend
        CustomOriginConfig:
          HTTPPort: 80
          HTTPSPort: 443
          OriginProtocolPolicy: http-only
      Enabled: 'true'
      Aliases:
      - ${self:custom.frontendBucketName}
      CustomErrorResponses:
      - ErrorCode: 404
        ResponseCode: 200
        ResponsePagePath: /index.html
      DefaultCacheBehavior:
        DefaultTTL: 31536000
        MaxTTL: 31536000
        MinTTL: 31536000
        AllowedMethods:
        - DELETE
        - GET
        - HEAD
        - OPTIONS
        - PATCH
        - POST
        - PUT
        TargetOriginId: Frontend
        ForwardedValues:
          QueryString: 'false'
          Cookies:
            Forward: none
        ViewerProtocolPolicy: redirect-to-https
        AcmCertificateArn: 'arn:aws:acm:us-east-1:xxxx:certificate/xxxx'
        SslSupportMethod: 'sni-only'

RedirectCloudFrontDistribution:
  Type: AWS::CloudFront::Distribution
  Properties:
    DistributionConfig:
      Origins:
        - DomainName: ${self:custom.redirectBucketName}.s3-website.${self:provider.region}.amazonaws.com
          Id: Redirect
          CustomOriginConfig:
            HTTPPort: 80
            HTTPSPort: 443
            OriginProtocolPolicy: http-only
      Enabled: 'true'
      Aliases:
      - {self:custom.redirectBucketName}
      DefaultCacheBehavior:
        DefaultTTL: 31536000
        MaxTTL: 31536000
        MinTTL: 31536000
        AllowedMethods:
        - DELETE
        - GET
        - HEAD
        - OPTIONS
        - PATCH
        - POST
        - PUT
        TargetOriginId: Redirect
        ForwardedValues:
          QueryString: 'false'
          Cookies:
            Forward: none
        ViewerProtocolPolicy: redirect-to-https
      ViewerCertificate:
        AcmCertificateArn: 'arn:aws:acm:us-east-1:xxxx:certificate/xxxx'
        SslSupportMethod: 'sni-only'


DnsRecord:
  Type: "AWS::Route53::RecordSet"
  Properties:
    AliasTarget:
      DNSName:
        Fn::GetAtt:
          - WebAppCloudFrontDistribution
          - DomainName
      HostedZoneId: XXXXX
    HostedZoneId: XXXX
    Name: ${self:custom.frontendBucketName}
    Type: 'A'

RedirectDnsRecord:
  Type: "AWS::Route53::RecordSet"
  Properties:
    AliasTarget:
      DNSName:
        Fn::GetAtt:
          - RedirectCloudFrontDistribution
          - DomainName
      HostedZoneId: XXXX
    HostedZoneId: XXXX
    Name: ${self:custom.redirectBucketName}
    Type: 'A'

Answer 1

Currently, you have a DNS problem, you haven't published DNS record for "www.example.com".

You have DNS for example.com --> CloudFront but not for www.example.com , even though you have added www.example.com to a CloudFront CNMAE/Alternative filed, when client gets a 301/302 with a new location and see the change in host, it resolves it again.

curl -I --resolve www.example.com:443:13.249.210.66 https://www.example.com/index.html HTTP/1.1 200 OK Content-Type: text/html Content-Length: 80232 Connection: keep-alive Date: Sun, 23 Jun 2019 10:07:43 GMT Last-Modified: Fri, 21 Jun 2019 07:21:38 GMT ETag: "8d536768b2173a7f3869f4178f75b331" Server: AmazonS3 X-Cache: Miss from cloudfront Via: 1.1 7db8064d915149cac923df11147875f9.cloudfront.net (CloudFront) X-Amz-Cf-Pop: BLR50-C3 X-Amz-Cf-Id: wOpVoz1gVlxYDBORSfGr9fmt8L-Q6vhWyEm1XPgJVQy-sbes9HTuuQ==

You just need to create a alias record in Route53 for www.example.com as well.