AppSync GraphQL API with Custom Domain and CloudFormation

With AWS AppSync, it’s easy to run your own serverless GraphQL service API. Thanks to Velocity Mapping Templates, DynamoDB, and AWS Lambda your can aim for an architecture without any maintenance at all.

Getting started with AppSync is not that problem; there are tons of guides and frameworks. AWS has a nice guide to add a custom domain to your API using CloudFront as well. But how do you configure a custom domain using Route 53, AWS Certificate Manager, and AppSync in a CloudFormation Template? Here’s the answer:

AWSTemplateFormatVersion: "2010-09-09"
Resources:

  HostedZone: 
    Type: AWS::Route53::HostedZone
    Properties: 
      Name: api.example.com

  Certificate:
    Type: AWS::CertificateManager::Certificate
    DependsOn: HostedZone
    Properties:
      DomainName: api.example.com
      ValidationMethod: DNS

  Distribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Enabled: true
        HttpVersion: http2
        Origins:
        - DomainName: !Ref AppSyncHostname
          Id: !Ref AppSyncHostname
          CustomOriginConfig:
            HTTPPort: 80
            HTTPSPort: 443
            OriginKeepaliveTimeout: 5
            OriginReadTimeout: 30
            OriginProtocolPolicy: https-only
            OriginSSLProtocols: [ TLSv1, TLSv1.1, TLSv1.2 ]
        Aliases: [ api.example.com ]
        DefaultCacheBehavior:
          AllowedMethods: [ HEAD, DELETE, POST, GET, OPTIONS, PUT, PATCH ]
          ForwardedValues:
            QueryString: false
          SmoothStreaming: false
          Compress: true
          TargetOriginId: !Ref AppSyncHostname
          ViewerProtocolPolicy: redirect-to-https
        PriceClass: PriceClass_100
        ViewerCertificate:
          SslSupportMethod: sni-only
          MinimumProtocolVersion: TLSv1.1_2016
          AcmCertificateArn: !Ref Certificate

  DNS:
    Type: AWS::Route53::RecordSetGroup
    Properties:
      HostedZoneName: api.example.com
      RecordSets:
      - Name: api.example.com
        Type: A
        AliasTarget:
          HostedZoneId: Z2FDTNDATAQYW2
          DNSName: !GetAtt Distribution.DomainName

Parameters:
  AppSyncHostname:
    Type: String

After creating your AppSync API, you will end up with a random subdomain for an AWS service. Of course, you want to configure a custom and branded domain for your AppSync GraphQL endpoint. Use the CloudFormation snippet above, provide the hostname of your GraphQL service and use your AppSync API with a custom hostname.

Important: You need to deploy this CloudFormation Stack to us-east-1 region! But you can deploy the AWS AppSync GraphQL API to any AWS region.