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

[seanyu4296]

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

[seanyu4296]

Okay i got this working through using the aliasConfiguration option in DistributionProps. Take note i think acmCertRef is required.
Relevant Code:

const distribution = new cloudfront.CloudFrontWebDistribution(
      this,
      'SiteDistribution',
      {
        aliasConfiguration: {
          acmCertRef: props.certificateArn,
          names: [siteDomain],
        },
        priceClass: PriceClass.PriceClass200,
        originConfigs: [
          {
            customOriginSource: {
              domainName: `${siteDomain}.s3-website-${
                props.s3Region
              }.amazonaws.com`,
            },
            behaviors: [{ isDefaultBehavior: true }],
          },
        ],
      },
    );
    new cdk.Output(this, 'DistributionId', {
      value: distribution.distributionId,
    });
    const zone = new route53.HostedZoneProvider(this, {
      domainName: props.domainName,
    }).findAndImport(this, 'Zone');
    new route53.AliasRecord(this, 'SiteAliasRecord', {
      recordName: siteDomain,
      target: distribution,
      zone,
    });

[rix0rrr]

Leaving this open because it might be useful when doing another pass over the CloudFront library.

[seanyu4296]

Just a question, but not completely related. Is there an examples repository that i can contribute to since I got a Construct that takes care of creating an s3 static website hosting, linking it to a cloudfront for delivery, route53 for Alias and ACM for ssl @rix0rrr ? Basically, for other developers reference since it took me alot of time just figuring everything out.

[seanyu4296]

just putting it here, i found out that I should explicitly set theoriginProtocolPolicy of the customOrigin to HTTP only, since it defaults toHTTPS only. HTTPS only won't work if a s3 static website link is used as a domain name.

const distribution = new cloudfront.CloudFrontWebDistribution(
      this,
      'SiteDistribution',
      {
        aliasConfiguration: {
          acmCertRef:  props.certificateArn,
          names: [siteDomain],
          sslMethod: cloudfront.SSLMethod.SNI,
          securityPolicy: cloudfront.SecurityPolicyProtocol.TLSv1_1_2016,
        },
        priceClass: PriceClass.PriceClassAll,
        originConfigs: [
          {
            customOriginSource: {
              domainName: `${siteDomain}.s3-website-${props.s3Region}.amazonaws.com`,
              originProtocolPolicy: OriginProtocolPolicy.HttpOnly, // important
            },
            behaviors: [{ isDefaultBehavior: true }],
          },
        ],
      },
    );

[rix0rrr]

Thanks for the offer @seanyu4296. There is this repository:

https://github.com/aws-samples/aws-cdk-examples

[eladb]

I believe this is already supported