CloudFront to S3 OAC not working in CloudFormation

Question

I am trying to write the most basic of static website servers possible with AWS in CloudFormation. But for some reason my OAC is not working and I am getting AccessDenied errors when I access CloudFront. Even more frustratingly after clicking around the aws console ui (changing s3 bucket to not block all public access) in the aws console, the site magically started serving the assets and the error was gone - this I couldn't repeat. Then after another deploy, the error was back again.

UPDATE: **2 hours** after deployment CloudFront gained access to s3 (I have caching disabled so it is exact). So the question now is, why is that time so large?

template.yaml: 
```
Resources:
  FrontendBucket:
    Type: AWS::S3::Bucket
  FrontendOAC:
    Type: AWS::CloudFront::OriginAccessControl
    Properties:
      OriginAccessControlConfig:
        Name: FrontendOAC
        OriginAccessControlOriginType: s3
        SigningBehavior: always
        SigningProtocol: sigv4
  FrontendBucketOACPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref FrontendBucket
      PolicyDocument:
        Statement:
          - Action: s3:GetObject
            Effect: Allow
            Resource: !Sub ${FrontendBucket.Arn}/*
            Principal:
              Service: cloudfront.amazonaws.com
            Condition:
              StringEquals:
                AWS:SourceArn: !Sub arn:aws:cloudfront::${AWS::AccountId}:distribution/${FrontendDistribution}
  FrontendDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Enabled: True
        DefaultCacheBehavior:
          # CachingDisabled policy
          #CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad
          CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6
          TargetOriginId: BucketOrigin
          #TODO: change this to redirect-to-https
          ViewerProtocolPolicy: allow-all
        DefaultRootObject: index.html
        Origins:
          - Id: BucketOrigin
            DomainName: !GetAtt FrontendBucket.DomainName
            S3OriginConfig:
              # AWS docs instruct to leave this field empty if using OAC instead of OAI
              OriginAccessIdentity: ''
            OriginAccessControlId: !GetAtt FrontendOAC.Id
Outputs:
  FrontendBucketURI:
    Value: !Sub s3://${FrontendBucket}
  FrontendDomain:
    Value: !GetAtt FrontendDistribution.DomainName
  FrontendURL:
    Value: !Sub http://${FrontendDistribution.DomainName}
```

Leo K · Accepted Answer

Your setup is nearly the same that I've used for a long time. One difference I noticed is that you've specified `!GetAtt FrontendBucket.DomainName` for the origin's `DomainName`. I use `!GetAtt FrontendBucket.RegionalDomainName` instead, to match the regional hostname syntax in documentation: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesDomainName. I'm not sure if that's the problem, but it does differ from documentation and my working setups.

A very tentative guess about what might be happening is that the global name syntax might otherwise work, but it would require the `s3:GetBucketLocation` permission for CloudFront to determine the bucket's region, and that permission definitely isn't granted. It might not be granted on the CloudFront service account's side, either, though, so adding the permission in the bucket policy wouldn't necessarily fix it.

Deepak Gupta · Answer

If your origin is an Amazon S3 bucket configured as a website endpoint, you must set it up with CloudFront as a custom origin. That means you can't use OAC (or OAI). OAC doesn't support origin redirect by using Lambda@Edge.

I think you have configured cloudfront distribution as S3 origin while you should configure it as custom origin for website

Please see this https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

CloudFront to S3 OAC not working in CloudFormation

Relevant content