Cloudformation 模板 - 具有 cloudfront 分发的 S3 存储桶网站 - 分发无法访问源

我只是想在 S3 存储桶上获取一个静态站点，并且只能通过 CloudFront 发行版访问它，但是缺少一些东西，我不知道是什么。

目前我的堆栈有

• 用于站点托管的 S3 存储桶
• 用于为站点提供服务的云前端发行版
• 存储桶策略，仅允许分配访问该存储桶
• 分发的默认缓存策略

当尝试直接从存储桶网站 URL 访问该网站时，我收到 403（禁止、访问被拒绝），但没关系。
当尝试从分发域访问它时，我收到一个带有以下消息的通用错误页面Failed to contact the origin.
当尝试从我的注册域访问它时，我收到一个 403 错误页面，其中包含以下消息The request could not be satisfied.接下来是有关如何修复它的通用提示（稍后登录、联系网站所有者、检查文档等）

由于我使用 cli 中的 CloudFormation 模板，每个资源都位于同一区域，并且其他所有内容对我来说看起来都是正确的，但显然有些问题。

云形成模板

Resources:

  BucketPolicy:
    Type: 'AWS::S3::BucketPolicy'
    DependsOn:
      - AppBucket
      - CloudFrontDistribution
    Properties:
      Bucket: !Ref AppBucket
      PolicyDocument:
        Id: MyPolicy
        Version: '2012-10-17'
        Statement:
          - Sid: PolicyForCloudFrontPrivateContent
            Action: s3:GetObject
            Effect: Allow
            Principal:
              Service: cloudfront.amazonaws.com
            Condition:
              StringLike:
                aws:Referer: !Sub 'https://*.${CloudFrontDistribution}.cloudfront.net/*'
            Resource: !Sub arn:aws:s3:::${AppBucket}/*

  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    DependsOn:
      - AppBucket
      - DefaultCachePolicy
    Properties:
      DistributionConfig:
        Enabled: true
        Origins:
          - Id: AppBucket
            DomainName: !GetAtt AppBucket.DomainName
            OriginPath: /*
            S3OriginConfig: {}
        DefaultCacheBehavior:
          ViewerProtocolPolicy: redirect-to-https
          TargetOriginId: AppBucket
          CachePolicyId: !Ref DefaultCachePolicy

  AppBucket:
    Type: 'AWS::S3::Bucket'
    Properties:
      BucketName: 'test-spa-stack-bucket-app'
      PublicAccessBlockConfiguration:
        BlockPublicAcls : false
        BlockPublicPolicy : false
        IgnorePublicAcls : false
        RestrictPublicBuckets : false
      VersioningConfiguration:
        Status: Enabled
      BucketEncryption:
        ServerSideEncryptionConfiguration:
        - ServerSideEncryptionByDefault:
            SSEAlgorithm: 'AES256'
      WebsiteConfiguration:
        IndexDocument: index.html
              
  DefaultCachePolicy:
    Type: AWS::CloudFront::CachePolicy
    Properties: 
      CachePolicyConfig: 
        Name: test-cache-policy
        DefaultTTL: 10
        MaxTTL: 10
        MinTTL: 1
        ParametersInCacheKeyAndForwardedToOrigin: 
            CookiesConfig: 
              CookieBehavior: none
            EnableAcceptEncodingBrotli: true
            EnableAcceptEncodingGzip: true
            HeadersConfig: 
              HeaderBehavior: none
            QueryStringsConfig: 
              QueryStringBehavior: none

您的存储桶策略似乎是错误的。

您需要允许 CloudFront 分配的 Origin 访问控制才能访问 S3 存储桶。

{
    "Version": "2012-10-17",
    "Statement": {
        "Sid": "AllowCloudFrontServicePrincipalReadOnly",
        "Effect": "Allow",
        "Principal": {
            "Service": "cloudfront.amazonaws.com"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::DOC-EXAMPLE-BUCKET/*",
        "Condition": {
            "StringEquals": {
                "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/EDFDVBD6EXAMPLE"
            }
        }
    }
}

您还需要在 CloudFront 分配定义中提供相同的源访问控制 ID：

  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    DependsOn:
      - AppBucket
      - DefaultCachePolicy
    Properties:
      DistributionConfig:
        Enabled: true
        Origins:
          - Id: AppBucket
            DomainName: !GetAtt AppBucket.DomainName
            OriginPath: /*
            OriginAccessControlId: "EDFDVBD6EXAMPLE" <- PROVIDE ID HERE
        DefaultCacheBehavior:
          ViewerProtocolPolicy: redirect-to-https
          TargetOriginId: AppBucket
          CachePolicyId: !Ref DefaultCachePolicy

See 限制对 Amazon S3 源的访问 https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html#oac-permission-to-access-s3