How to set Alternative Domain Name (CName) in aws-cloudfront

I can’t seem to find how to set the alternative domain name in cloudfront. I looked through the source code but couldn’t find any. Here is my code

import * as cloudfront from '@aws-cdk/aws-cloudfront';
// import * as route53 from '@aws-cdk/aws-route53';
import * as s3 from '@aws-cdk/aws-s3';
import * as cdk from '@aws-cdk/cdk';
import { ViewerProtocolPolicy } from '@aws-cdk/aws-cloudfront';

export interface StaticSiteProps {
  domainName: string;
  siteSubDomain: string;
  certificateArn?: string;
  s3Region: string;
}

export class StaticSite extends cdk.Construct {
  constructor(parent: cdk.Construct, name: string, props: StaticSiteProps) {
    super(parent, name);
    const siteDomain = props.siteSubDomain + '.' + props.domainName;
    const siteBucket = new s3.Bucket(this, 'SiteBucketReal', {
      bucketName: siteDomain,
      websiteIndexDocument: 'index.html',
      websiteErrorDocument: 'index.html',
      publicReadAccess: true,
    });
    new cdk.Output(this, 'SiteBucketName', { value: siteBucket.bucketName });
    const distribution = new cloudfront.CloudFrontWebDistribution(
      this,
      'SiteDistribution',
      {
        // TODO: Set Alternative Domain Name?
        viewerProtocolPolicy: ViewerProtocolPolicy.AllowAll,
        originConfigs: [
          {
            customOriginSource: {
              domainName: `${siteDomain}.s3-website-${
                props.s3Region
              }.amazonaws.com`,
            },
            behaviors: [{ isDefaultBehavior: true }],
          },
        ],
      },
    );
    new cdk.Output(this, 'DistributionId', {
      value: distribution.distributionId,
    });    
  }
}

I’m trying to translate this https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/ to aws-cdk

[christiankaindl]

For us, the easiest way to achieve CNAME aliases + custom certificate was to use the viewerCertificate option in the cloudfront.CloudFrontWebDistribution constructor:

const distribution = new cloudfront.CloudFrontWebDistribution(
      this,
      "my-cdn",
      {
        viewerCertificate: {
          aliases: ['your-domain.com'],
          props: {
            acmCertificateArn: certificateArn, // optional
            sslSupportMethod: 'sni-only',
            minimumProtocolVersion: 'TLSv1.1_2016'
            // All `props` options here: https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_aws-cloudfront.CfnDistribution.ViewerCertificateProperty.html
          }
        }
      }
    );

VS Code marks aliasConfiguration as deprecated, which is why we use the above instead. There’s also additional props options: https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_aws-cloudfront.CfnDistribution.ViewerCertificateProperty.html

[thiskevinwang]

as of 1.91.0 -

With new cloudfront.Distribution

• it’s easy to add “Alternate Domain Names (CNAMEs)”
• but it’s seemingly impossible to integrate with an API Gateway Origin
• Security Policy defaults to TLSv1.2_2019 which is nice

With new cloudfront.CloudFrontWebDistribution

• everything looks deprecated
• but at least its possible to add an API Gateway “customOriginSource”
• Security Policy defaults to TLSv1 which is bad

are there plans to improve the Distribution API?