amazon-s3 - 使用 OAI 限制存储桶策略时，具有 S3 源的 Cloudfront 返回 AccessDenied

Question

我正在尝试将静态网站部署到 S3，并通过 Cloudfront 提供服务。我正在使用无服务器来生成 Cloudformation 资源。创建资源后，我的构建过程(在 CodeBuild 和 CodePipeline 中)将运行 npm install、npm run build 并将构建目录传输到 s3 以提供内容。对于上下文，我使用的是 React，特别是 create-react-app。部署后，所有资源均按预期创建，但 Cloudfront 端点返回以下“访问被拒绝”异常，这是我在 S3 中熟悉的:

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId><requestId></RequestId>
  <HostId><hostId> 
  </HostId>
</Error>

这让我相信它是 S3 存储桶策略，我已将其设置为具有附加到 CDN 的 Origin Access Identity 的主体值。所以我有点不确定这里缺少什么才能使其正常工作。任何帮助表示赞赏。以下是我的信息。

---

更新:index.html 可访问，但静态文件不可访问。我在下面添加了存储桶策略，这是存储桶的文件结构:

---

asset-manifest.json
manifest.json
index.html
static/

无服务器部署生成的 Cloudformation 模板:

{
  "AWSTemplateFormatVersion": "2010-09-09",
  "Description": "The AWS CloudFormation template for this Serverless application",
    "Website": {
      "Type": "AWS::S3::Bucket",
      "Properties": {
        "WebsiteConfiguration": {
          "ErrorDocument": "index.html",
          "IndexDocument": "index.html"
        }
      }
    },
    "CloudFrontOriginAccessIdentity": {
      "Type": "AWS::CloudFront::CloudFrontOriginAccessIdentity",
      "Properties": {
        "CloudFrontOriginAccessIdentityConfig": {
          "Comment": "Access Identity for cdn"
        }
      }
    },
    "ReadPolicy": {
      "Type": "AWS::S3::BucketPolicy",
      "Properties": {
        "Bucket": {
          "Ref": "Website"
        },
        "PolicyDocument": {
          "Statement": [
            {
              "Action": "s3:GetObject",
              "Effect": "Allow",
              "Resource": {
                "Fn::Join": [
                  "",
                  [
                    "arn:aws:s3:::",
                    {
                      "Ref": "Website"
                    },
                    "/*"
                  ]
                ]
              },
              "Principal": {
                "CanonicalUser": {
                  "Fn::GetAtt": [
                    "CloudFrontOriginAccessIdentity",
                    "S3CanonicalUserId"
                  ]
                }
              }
            }
          ]
        }
      }
    },
    "Distribution": {
      "Type": "AWS::CloudFront::Distribution",
      "Properties": {
        "DistributionConfig": {
          "Origins": [
            {
              "DomainName": {
                "Fn::GetAtt": [
                  "Website",
                  "DomainName"
                ]
              },
              "Id": {
                "Ref": "Website"
              },
              "S3OriginConfig": {
                "OriginAccessIdentity": {
                  "Fn::Join": [
                    "",
                    [
                      "origin-access-identity/cloudfront/",
                      {
                        "Ref": "CloudFrontOriginAccessIdentity"
                      }
                    ]
                  ]
                }
              }
            }
          ],
          "Enabled": true,
          "HttpVersion": "http2",
          "DefaultRootObject": "index.html",
          "CustomErrorResponses": [
            {
              "ErrorCode": 404,
              "ResponseCode": 200,
              "ResponsePagePath": "/index.html"
            }
          ],
          "DefaultCacheBehavior": {
            "AllowedMethods": [
              "DELETE",
              "GET",
              "HEAD",
              "OPTIONS",
              "PATCH",
              "POST",
              "PUT"
            ],
            "DefaultTTL": 3600,
            "ForwardedValues": {
              "QueryString": true,
              "Cookies": {
                "Forward": "none"
              }
            },
            "TargetOriginId": {
              "Ref": "Website"
            },
            "ViewerProtocolPolicy": "redirect-to-https"
          },
          "ViewerCertificate": {
            "CloudFrontDefaultCertificate": "true"
          }
        }
      }
    },
  },
  "Outputs": {
    "ServerlessDeploymentBucketName": {
      "Value": {
        "Ref": "ServerlessDeploymentBucket"
      }
    },
    "WebsiteUrl": {
      "Value": {
        "Fn::GetAtt": [
          "Website",
          "WebsiteURL"
        ]
      }
    },
    "WebSiteBucket": {
      "Value": {
        "Ref": "Website"
      }
    }
  }
}

生成的 S3 存储桶策略:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity {ID for the OAI}"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{BUCKETNAME}/*"
        }
    ]
}

已更新

S3 存储桶 YAML 文件:

Resources:
  Website:
    Type: AWS::S3::Bucket
    Properties:
      WebsiteConfiguration:
        ErrorDocument: index.html
        IndexDocument: index.html
Outputs:
  WebsiteUrl:
    Value: !GetAtt Website.WebsiteURL
  WebSiteBucket:
    Value: !Ref Website

Cloudfront YAML 文件:

Resources:
  CloudFrontOriginAccessIdentity:
    Type: 'AWS::CloudFront::CloudFrontOriginAccessIdentity'
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: Access Identity for cdn
  ReadPolicy:
    Type: 'AWS::S3::BucketPolicy'
    Properties:
      Bucket: !Ref Website
      PolicyDocument:
        Statement:
        - Action: 's3:GetObject'
          Effect: Allow
          Resource: 
            !Join [ '', [ 'arn:aws:s3:::', !Ref Website, '/*' ] ]
          Principal:
            CanonicalUser: !GetAtt CloudFrontOriginAccessIdentity.S3CanonicalUserId
  Distribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          -
            # Use the Website as the origin
            DomainName: !GetAtt 'Website.DomainName'
            Id: !Ref Website
            S3OriginConfig:
              OriginAccessIdentity: !Join [ '', [ 'origin-access-identity/cloudfront/', !Ref CloudFrontOriginAccessIdentity] ]
        Enabled: true
        HttpVersion: http2
        DefaultRootObject: index.html
        # Since React takes care of our routing, we need to make sure every path is served via index.html
        # Configure the CDN cache
        CustomErrorResponses:
          - ErrorCode: 404
            ResponseCode: 200
            ResponsePagePath: /index.html
        DefaultCacheBehavior:
          AllowedMethods:
            - DELETE
            - GET
            - HEAD
            - OPTIONS
            - PATCH
            - POST
            - PUT
          DefaultTTL: 3600
          ForwardedValues:
            QueryString: true
            Cookies:
              Forward: none
          # The origin id defined above
          TargetOriginId: !Ref Website
          ViewerProtocolPolicy: "redirect-to-https" # we want to force https
        # The certificate to use when using https
        ViewerCertificate:
          CloudFrontDefaultCertificate: 'true'

存储桶策略:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity {Id}"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{bucket-name}/*"
        }
    ]
}

Answer 1

根据评论更新答案。

我尝试复制该问题并将您的 YAML 模板部署到我的沙盒帐户中。我发现它们正确。我上传到创建的存储桶的示例 index.html 按预期工作，并且可以从使用以下形式的 url 创建的 CF 发行版进行访问:

https://d1237123arhp6.cloudfront.net/

未发现 CF 发行版、存储桶策略或 OAI 存在问题。 模板按原样工作，无需修改。

使用的模板:

Resources:

  Website:
    Type: AWS::S3::Bucket
    Properties:
      WebsiteConfiguration:
        ErrorDocument: index.html
        IndexDocument: index.html
        
  CloudFrontOriginAccessIdentity:
    Type: 'AWS::CloudFront::CloudFrontOriginAccessIdentity'
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: Access Identity for cdn

  ReadPolicy:
    Type: 'AWS::S3::BucketPolicy'
    Properties:
      Bucket: !Ref Website
      PolicyDocument:
        Statement:
        - Action: 's3:GetObject'
          Effect: Allow
          Resource: 
            !Join [ '', [ 'arn:aws:s3:::', !Ref Website, '/*' ] ]
          Principal:
            CanonicalUser: !GetAtt CloudFrontOriginAccessIdentity.S3CanonicalUserId

  Distribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          -
            # Use the Website as the origin
            DomainName: !GetAtt 'Website.DomainName'
            Id: !Ref Website
            S3OriginConfig:
              OriginAccessIdentity: !Join [ '', [ 'origin-access-identity/cloudfront/', !Ref CloudFrontOriginAccessIdentity] ]
        Enabled: true
        HttpVersion: http2
        DefaultRootObject: index.html
        # Since React takes care of our routing, we need to make sure every path is served via index.html
        # Configure the CDN cache
        CustomErrorResponses:
          - ErrorCode: 404
            ResponseCode: 200
            ResponsePagePath: /index.html
        DefaultCacheBehavior:
          AllowedMethods:
            - DELETE
            - GET
            - HEAD
            - OPTIONS
            - PATCH
            - POST
            - PUT
          DefaultTTL: 3600
          ForwardedValues:
            QueryString: true
            Cookies:
              Forward: none
          # The origin id defined above
          TargetOriginId: !Ref Website
          ViewerProtocolPolicy: "redirect-to-https" # we want to force https
        # The certificate to use when using https
        ViewerCertificate:
          CloudFrontDefaultCertificate: 'true'