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

CodePudding user response：

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
              }`,
            ],
      },
    ),
  },
);

CodePudding user response：

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 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");

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