尝试将 A 记录添加到云端时禁止 AWS Route 53 消息

AWS Route 53 message forbidden while trying to add A record to cloud front

我正在云端部署使用无服务器框架的 React.js 应用程序。 架构非常简单,我有一个 S3 存储桶和一个 CloudFront CDN。 CloudFormation 结束时没有任何错误设置我的配置,我能够使用 CloudFront 分发域名使用 https 和默认证书访问我的反应页面。

现在我在 Route 53 中购买了一个域,我想 link 将它添加到我的 CloudFront。 我尝试了一切,但没有成功。谁能给我一些提示? 我已经尝试过的操作:

  1. 在我的 resources.CloudFrontDistribution.ViewerCertificate.AcmCertificateArn
  2. 上添加证书(创建后)
  3. 手动添加 A 记录以指向我的 CloudFront。这会在我的浏览器上生成以下 JSON 错误:{"message":"Forbidden"}
  4. 通过我的 CloudFront 上的 AWS 控制台手动添加证书

None 这些操作给了我关于如何解决甚至调试问题的任何提示。

这是我现在的 serverless.yml:

service: my-app-react

provider:
  name: aws
  runtime: nodejs12.x
  region: eu-south-1
  memorySize: 512
  timeout: 6
  logRetentionInDays: 7

plugins:
  - serverless-s3-sync

custom:
  bucketName: my-app-react-33333
  s3Sync:
    - bucketName: ${self:custom.bucketName}
      localDir: build/
  domains:
    dev:
      domainName: <my-domain>
      certificateName: <my-domain>

resources:
  Resources:
    ReactAppBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.bucketName}
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
          ErrorDocument: index.html
    S3AccessPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket:
          Ref: ReactAppBucket
        PolicyDocument:
          Statement:
            - Sid: PublicReadGetObject
              Effect: Allow
              Principal: "*"
              Action:
                - s3:GetObject
              Resource:
                - arn:aws:s3:::${self:custom.bucketName}/*
    CloudFrontDistribution:
      Type: AWS::CloudFront::Distribution
      Properties:
        DistributionConfig:
          Enabled: true
          Origins:
            - DomainName: ${self:custom.bucketName}.s3.eu-south-1.amazonaws.com
              Id: ReactApp
              CustomOriginConfig:
                HTTPPort: 80
                HTTPSPort: 443
                OriginProtocolPolicy: https-only 
          DefaultRootObject: index.html
          CustomErrorResponses:
            - ErrorCode: 404
              ResponseCode: 200
              ResponsePagePath: /index.html
          DefaultCacheBehavior:
            AllowedMethods:
              - HEAD
              - GET
              - DELETE
              - OPTIONS
              - PATCH
              - POST
              - PUT
            TargetOriginId: ReactApp
            ForwardedValues:
              QueryString: false
              Cookies:
                Forward: none
            ViewerProtocolPolicy: redirect-to-https
          ViewerCertificate:
            AcmCertificateArn: <my-certificate-arn>
            SslSupportMethod: sni-only
            MinimumProtocolVersion: TLSv1.2_2021

哦,现在我想我可能知道你的问题了。 Cluodfront 发行版只能使用在 us-east-1 中创建的 ACM 证书。参见 Requirements for using SSL/TLS certificates with CloudFront

我之前没有意识到这一点,但这可能是你的问题。您不必在那里拥有您的发行版或任何其他资源,只需证书。

当我使用 cloudformation 创建证书时,我在 us-east-1 中设置了证书处理程序模板,并在本地区域中设置了其余资源模板。使用 terraform,作为另一个例子,我有一个单独的提供程序来处理这些资源。