AWS CDK route 53 + certificate configuration not working for www subdomain

Question

I am confused to how to create a certificate for the apex domain, which will also work with subdomain.

I have created a basic website deployment CDK Construct and have been trying to fix it so it works for both www.example.com subdomain and example.com but I haven't been able to do that. With the current setup, www.example.com works but when I visit example.com it issues the following error:

This site can’t provide a secure connection example.com sent an invalid response. ERR_SSL_PROTOCOL_ERROR

My guess is an issue with certificate creation but I am not sure. Here is the partial CDK code, showing the zone, cloudFormation, certificate and route53 setup.

    const siteDomain = "example.com"

    const zone = route53.HostedZone.fromLookup(this, "Zone", {
      domainName: siteDomain,
    });


    // TLS certificate
    const certificateArn = new acm.DnsValidatedCertificate(
      this,
      "SiteCertificate",
      {
        domainName: "*." + siteDomain,
        hostedZone: zone,
        region: "us-east-1", // Cloudfront only checks this region for certificates.
      }
    ).certificateArn;

    // Specifies you want viewers to use HTTPS & TLS v1.1 to request your objects
    const viewerCertificate = cloudfront.ViewerCertificate.fromAcmCertificate(
      {
        certificateArn: certificateArn,
        env: {
          region: Aws.REGION,
          account: Aws.ACCOUNT_ID,
        },
        node: this.node,
        stack: parent,
        metricDaysToExpiry: () => ...
      },
      {
        sslMethod: cloudfront.SSLMethod.SNI,
        securityPolicy: cloudfront.SecurityPolicyProtocol.TLS_V1_1_2016,
        aliases: ["*." + siteDomain],
      }
    );


    // CloudFront distribution
    const distribution = new cloudfront.CloudFrontWebDistribution(
      this,
      "SiteDistribution",
      {
        viewerCertificate,
        originConfigs: [
          {
            s3OriginSource: {
              ...
            },
            behaviors: [
              {
                ...
              },
            ],
          },
        ],
      }
    );

    // Route53 alias record for the CloudFront distribution
    const siteRecord = new route53.ARecord(this, "SiteAliasRecord", {
      recordName: siteDomain,
      target: route53.RecordTarget.fromAlias(
        new targets.CloudFrontTarget(distribution)
      ),
      zone,
    });

    new route53.CnameRecord(this, "SiteWWWAliasRecord", {
       recordName: "www." + siteDomain,
       domainName: siteDomain,
       zone,
    });


    // deploy/copy the website built website to s3 bucket
    this.deploy = new s3Deployment.BucketDeployment(
      this,
      CONSTRUCT_NAMES.bucket.deployment,
      {
        sources: [...],
        destinationBucket: this.websiteBucket,
        distribution,
        distributionPaths: ["/*"],
      }
    );
  }
}

After a successful deployment, when I visit the full domain www.example.com it shows the page but without the www subdomain the certificate issues an error. An ideas on how to fix this? I have to somehow set a correct certificate root domain value instead of a wildcard. Here is the route53 output after running the command:

what do you get in Route53 when you run this? I would argue that this code is way longer than Minimal Reproducible Example, and therefore is unlikely to be analyzed by others. Can you split it into pieces (S3, CloudFront, etc.) and see which part is in error? — Felix, Oct 01 '22 at 01:09
@Felix I added the route53 output to the original post. The problem is, I cannot break it up into smaller pieces - all the elements are depending on each other maybe minus the s3 bucket elements. — ArmenB, Oct 01 '22 at 06:38
@Felix I also followed your suggestion and removed the extra code — ArmenB, Oct 01 '22 at 20:47

score 0 · Answer 1 · answered Oct 02 '22 at 19:12

Mhh try more like my working bits:

    const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI');
siteBucket.grantRead(cloudFrontOAI.grantPrincipal);

const hostedZone = route53.HostedZone.fromLookup(this, 'Zone', {
  domainName: props.domainName,
});

const certificate = new certificatemanager.DnsValidatedCertificate(
  this,
  'certificate',
  {
    domainName: `${props.recordName === '' ? '' : props.recordName + '.'}${
      props.domainName
    }`,
    subjectAlternativeNames: props.alternativeRecordName
      ? [`${props.alternativeRecordName}.${props.domainName}`]
      : undefined,
    hostedZone,
    region: 'us-east-1',
  },
);

const distribution = new cloudfront.CloudFrontWebDistribution(
  this,
  'Distribution',
  {
    enableIpV6: false,
    originConfigs: [
      {
        s3OriginSource: {
          s3BucketSource: siteBucket,
          originAccessIdentity: cloudFrontOAI,
        },
        behaviors: [{ isDefaultBehavior: true }],
      },
    ],
    errorConfigurations: [
      {
        errorCode: 404,
        responseCode: 404,
        responsePagePath: '/index.html',
      },
    ],
    viewerCertificate: cloudfront.ViewerCertificate.fromAcmCertificate(
      certificate,
      {
        aliases: props.alternativeRecordName
          ? [
              `${props.recordName === '' ? '' : props.recordName + '.'}${
                props.domainName
              }`,
              `${props.alternativeRecordName}.${props.domainName}`,
            ]
          : [
              `${props.recordName === '' ? '' : props.recordName + '.'}${
                props.domainName
              }`,
            ],
      },
    ),
  },
);

score 0 · Answer 2 · edited Oct 06 '22 at 16:02

Try using the newer Distribution construct rather than the older CloudFrontWebDistribution construct. From the docs:

The CloudFrontWebDistribution construct is the original construct written for working with CloudFront distributions. Users are encouraged to use the newer Distribution instead, as it has a simpler interface and receives new features faster.

You also need to make sure you add both domain names to your distribution if you want to be able to access it via both URLs. See below example, disregard the OAI portion if you don't need it:

const siteDomain = "example.com";

const zone = route53.HostedZone.fromLookup(this, "Zone", {
  domainName: siteDomain,
});

const certificate = new acm.DnsValidatedCertificate(
  this,
  "SiteCertificate",
  {
    domainName: siteDomain,
    subjectAlternativeNames: ["*." + siteDomain],
    hostedZone: zone,
    region: "us-east-1", // Cloudfront only checks this region for certificates.
  }
);

const oai = new cloudfront.OriginAccessIdentity(this, "SiteOai");
this.websiteBucket.grantRead(oai);

const distribution = new cloudfront.Distribution(
  this, 
  "SiteDistribution", 
  {
    certificate,
    defaultBehavior: {
      origin: new origins.S3Origin(this.websiteBucket, {
        originAccessIdentity: oai
      }),
      ...
    },
    domainNames: [siteDomain, "www." + siteDomain],
    ...
  }
);

AWS CDK route 53 + certificate configuration not working for www subdomain

2 Answers2