尝试将 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 证书。请参阅在 CloudFront 中使用 SSL/TLS 证书的要求。

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

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

Answer 2

有一种简单的方法可以将证书和 Route53 连接到部署在 AWS CloudFront 上的静态站点。

SWS控制台快速云架构构建服务。

您可以通过简单的输入轻松控制AWS资源。请参阅以下文档：

如何使用SWS控制台轻松部署到AWS S3 + CloudFront架构

如何创建证书并使用SWS控制台连接Route53域

您可以随意使用SWS Console轻松部署到AWS S3 + CloudFront架构并创建证书和连接Route53域！

进入Sws控制台服务页面