How to resolve "specified origin access identity does not exist or is not valid"

Question

I have a problem with these lines in my serverless.yml file. I am using the Serverless plugin serverless-single-page-app-plugin.

# CustomOriginConfig:
              #  HTTPPort: 80
              #  HTTPSPort: 443
              # OriginProtocolPolicy: https-only
              ## In case you want to restrict the bucket access use S3OriginConfig and remove CustomOriginConfig
              S3OriginConfig:
                 OriginAccessIdentity: origin-access-identity/cloudfront/E127EXAMPLE51Z

I want use s3OriginConfig and disable access through the S3 bucket. I can do this manually. But I want to get the effect as in the picture below:

Answer 1

You might have solved it as you have asked your question long back but this might help if you didn't. I too faced the same issue and after some research through AWS documentation, I got to know how to use the required attributes. Below points to be considered regarding your question.

1. As your origin is Amazon S3 bucket, you should use S3OriginConfig in Distribution.
2. If new OAI is required then you have to create a CloudFrontOriginAccessIdentity resource and refer the OAI and S3CanonicalUserId attribute to the CloudFront Distribution and S3BucketPolicy resources respectively.

Please find the below snippet in response to your question.

WebAppDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: 'passport-front.s3.amazonaws.com'
            Id: 'WebApp'
            S3OriginConfig:
              OriginAccessIdentity: !Join ['', ['origin-access-identity/cloudfront/', !Ref CloudFrontOAI]]
CloudFrontOAI:
    Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: 'access-identity-passport-front.s3.amazonaws.com'
WebAppBucket:
    Type: AWS::S3::Bucket
    DeletionPolicy: "Retain"
    Properties:
      AccessControl: PublicRead
      BucketName: "passport-front"
WebAppBucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref WebAppBucket
      PolicyDocument:
        Statement:
        - Action: s3:GetObject
          Effect: Allow
          Principal:
            CanonicalUser: !GetAtt CloudFrontOAI.S3CanonicalUserId
          Resource: !Join ['', ['arn:aws:s3:::', !Ref 'WebAppBucket', /*]]

References: https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/quickref-cloudfront.html