S3静态网站CloudFront访问报504错误，S3直连正常求助

我通过S3存储桶链接访问网站一切正常，但使用CloudFront链接时出现504 Error; Request could not be satisfied错误。

资源配置 #

S3存储桶（MyWebsite） #

MyWebsite:
  Type: AWS::S3::Bucket
  Properties:
    AccessControl: PublicRead
    WebsiteConfiguration:
      IndexDocument: index.html
    BucketName: mcderkaderkas-first-website

S3桶策略（BucketPolicy） #

BucketPolicy:
  Type: AWS::S3::BucketPolicy
  Properties:
    PolicyDocument:
      Id: MyPolicy
      Version: 2012-10-17
      Statement:
        - Sid: PublicReadForGetBucketObjects
          Effect: Allow
          Principal: "*"
          Action: "s3:GetObject"
          Resource: !Join
            - ""
            - - "arn:aws:s3:::"
              - !Ref MyWebsite
              - /*
    Bucket: !Ref MyWebsite

CloudFront分发（MyDistribution） #

MyDistribution:
  Type: "AWS::CloudFront::Distribution"
  Properties:
    DistributionConfig:
      DefaultCacheBehavior:
        ViewerProtocolPolicy: allow-all
        TargetOriginId: mcderkaderkas-first-website.s3.us-east-1.amazonaws.com
        DefaultTTL: 0
        MinTTL: 0
        MaxTTL: 0
        ForwardedValues:
          QueryString: false
        PathPattern: /*
      Origins:
        - DomainName: mcderkaderkas-first-website.s3.us-east-1.amazonaws.com
          Id: mcderkaderkas-first-website.s3.us-east-1.amazonaws.com
          CustomOriginConfig:
            OriginProtocolPolicy: match-viewer
      Enabled: "true"
      DefaultRootObject: index.html

问题原因及修复方案 #

你的CloudFront配置存在两个核心错误：

• 使用了错误的S3端点：当前配置的是S3 REST端点（mcderkaderkas-first-website.s3.us-east-1.amazonaws.com），但开启静态网站托管的S3需要使用专属的网站托管端点，格式为bucket-name.s3-website-region.amazonaws.com，即mcderkaderkas-first-website.s3-website-us-east-1.amazonaws.com。

• 错误配置了源类型：对于S3静态网站托管源，应该使用S3OriginConfig而非CustomOriginConfig，因为S3网站托管属于AWS原生的静态站点服务，不属于自定义源范畴。

修改后的CloudFront配置 #

MyDistribution:
  Type: "AWS::CloudFront::Distribution"
  Properties:
    DistributionConfig:
      DefaultCacheBehavior:
        ViewerProtocolPolicy: allow-all
        TargetOriginId: s3-website-origin
        DefaultTTL: 0
        MinTTL: 0
        MaxTTL: 0
        ForwardedValues:
          QueryString: false
      Origins:
        - DomainName: mcderkaderkas-first-website.s3-website-us-east-1.amazonaws.com
          Id: s3-website-origin
          S3OriginConfig: {}
      Enabled: "true"
      DefaultRootObject: index.html

后续验证步骤 #

1. 确认S3网站托管端点可以正常访问
2. 等待CloudFront配置部署完成（通常10-15分钟）
3. 重新测试CloudFront链接

内容的提问来源于stack exchange，提问作者Travis Salmon