amazon-web-services - 尝试将 A 记录添加到云前端时，AWS Route 53 消息被禁止

Question

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

现在我在 Route 53 中购买了一个域，我想将其链接到我的 CloudFront。我尝试了一切，但没有成功。谁能给我一些提示吗？我已经尝试过的操作:

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

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

这是我当前的 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

Answer 1

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

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

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