AWS deploy Cloudfront with api gateway

Question

Recently I was trying to deploy a lambda function and a Cloudfront distribution together with a CloudFormation yaml template with SAM. However, I'm stuck with the DomainName in the CloudFormation since I do not have the id of the API gateway before I actually deploy it.

Thus, I tried to link the API Gateway with the CF Distribution with .Sub "${ServerlessRestApi}.execute-api:${AWS:.Region}.amazonaws.com/Prod/" as the DomainName , but I got the following error:

Resource handler returned message: "Invalid request provided: The parameter origin name must be a domain name.

My code is shown as follow:

AWSTemplateFormatVersion: 2010-09-09
Description: >-
  cf-apigw-lambda-dynamodb

Transform:
- AWS::Serverless-2016-10-31

Resources:
  getHeadersFunction:
    Type: AWS::Serverless::Function
    Properties:
      Handler: src/handlers/get-items.getItemsHandler
      Runtime: nodejs14.x
      Architectures:
        - x86_64
      MemorySize: 128
      Timeout: 100
      Description: Get all items
      Events:
        Api:
          Type: Api
          Properties:
            Path: /items
            Method: GET
  CloudfrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: !Sub "${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com/Prod/"
            Id: ApiOrigin
            CustomOriginConfig:
              HTTPPort: 80
              HTTPSPort: 443
              OriginProtocolPolicy: https-only
        Enabled: true
        DefaultCacheBehavior:
          TargetOriginId: ApiOrigin
          ViewerProtocolPolicy: redirect-to-https
          CachePolicyId: c17edf1f-cb61-49d6-979d-39f05ba95f91
          OriginRequestPolicyId: c57eds1f-c8d1-4544-b8ce-6f4307e30d2e

Outputs:
  WebEndpoint:
    Description: "API Gateway endpoint URL for Prod stage"
    Value: !Sub "https://${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com/Prod/"

Answer 1

You can't have /Prod/ in a DomainName

DomainName: !Sub "${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com"