Cloudfront can not serve s3 website via custom origin deployed via Serverless Framework

Question

Hi, I am setting up CI/CD pipeline for the frontend of an application developed in REACT, everything is working as expected.

- Build is built
- build is being pushed to s3
- site can be visited via s3 static site url
 
What's not working is when the s3 site is set up via CloudFront as the custom origin. I'm attaching my code for creating a bucket and cloudfront distribution.

Note: the custom domain works fine as well (it to redirects to the error that cloudfront distribution domain returns, i.e. 504 ERROR)
Error message is in the end of the question

```
Type: AWS::CloudFront::Distribution
Properties:
  DistributionConfig:
    Aliases:
      - ${param:deploymentUrl}
    CustomErrorResponses:
      - ErrorCode: 404
        ResponseCode: 200
        ResponsePagePath: /index.html
        ErrorCachingMinTTL: 10
    DefaultCacheBehavior:
      AllowedMethods:
        - GET
        - HEAD
      TargetOriginId: ${self:custom.cloudfrontOriginId}
      ForwardedValues:
        QueryString: 'false'
        Cookies:
          Forward: none
      ViewerProtocolPolicy: redirect-to-https
      CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 # CachingOptimized
    DefaultRootObject: index.html
    Enabled: 'true'
    HttpVersion: 'http2'
    Origins:
      - DomainName: ${param:s3BucketName}.s3-website-${self:provider.region}.amazonaws.com
        CustomOriginConfig:
          HTTPPort: 80
          HTTPSPort: 443
          OriginProtocolPolicy: https-only
        Id: ${self:custom.cloudfrontOriginId}
    ViewerCertificate:
      AcmCertificateArn: ${param:certificateArn}
      MinimumProtocolVersion: 'TLSv1.2_2021'
      SslSupportMethod: 'sni-only'
```

```
Type: AWS::S3::Bucket
Properties:
  BucketName: ${param:s3BucketName}
  AccessControl: PublicRead
  WebsiteConfiguration:
    IndexDocument: index.html
    ErrorDocument: index.html

Type: AWS::S3::BucketPolicy
Properties:
  Bucket:
    Ref: Bucket
  PolicyDocument:
    Statement:
      - Sid: PublicReadGetObject
        Action:
          - s3:GetObject
        Effect: Allow
        Principal: '*'
        Resource: arn:aws:s3:::${param:s3BucketName}/*
```

The request could not be satisfied.

CloudFront attempted to establish a connection with the origin, but either the attempt failed or the origin closed the connection. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. 
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation. 
Generated by cloudfront (CloudFront)
Request ID: ...

Answer

The static website server provided by the S3 service for a bucket is http only, no support for https.  Your custom origin config says https-only, so it won't be able to contact the origin.

The best way to do this is disable the bucket's website and public access and instead of using a custom origin, use an S3 origin secured by an Origin Access Identity.  That's a special CloudFront principal that you grant permissions to in your bucket policy.

Then for best practice enable all the Block Public Access settings on the bucket.  Bonus points for doing that at the account level too and never making any of your buckets public!

Cloudfront can not serve s3 website via custom origin deployed via Serverless Framework

Relevant content