Unable to create subdomain: The certificate that is attached to your distribution doesn't cover the alternate domain name (CNAME) that you're trying to add

[huksley]

Describe the bug

Unable to use 3rd level domain e.g. app.example.com

Actual behavior

When I execute ´serverless´it gives me error "InvalidViewerCertificate: The certificate that is attached to your distribution doesn't cover the alternate domain name (CNAME) that you're trying to add."

Expected behavior

CloudFront distribution with the correct cert and CNAMEs should be created successfully.

Steps to reproduce

I am using subdomain like app.example.com and wildcard cert for it.
I have disabled www.app.example.com generation, and when I do serverless it gives me the error:

{
  code: 'InvalidViewerCertificate',
  time: 2020-11-26T07:21:25.232Z,
  requestId: '793c6576-6245-4915-8897-91ac4736bd96',
  statusCode: 400,
  retryable: false,
  retryDelay: 50.03442615769107
}

  47s › app › InvalidViewerCertificate: The certificate that is attached to your distribution doesn't cover the alternate domain name (CNAME) that you're trying to add. For more details, see: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html#alternate-domain-names-requirements

Screenshots/Code/Logs

serverless.yml

app:
  component: "@sls-next/serverless-component@1.19.0-alpha.11"
  inputs:
    domain: ["app", "example.com"]
    publicDirectoryCache: false
    memory:
      defaultLambda: 1024
      apiLambda: 2048
    timeout:
      defaultLambda: 20
      apiLambda: 15
    bucketName: myapp-serverlessdeployment-bucket
    bucketRegion: eu-west-1
    description: "Serverless deployment for App"
    domainType: apex

Versions

• OS/Environment: MacOS 10.15.7
• @sls-next/serverless-component version: @sls-next/serverless-component@1.19.0-alpha.11
• Next.js version: ^10.0.0 pinned 10.0.3

Additional context

I created wildcard certificate in AWS Certificate Manager in us-east-1 North Virginia region.
I tried to specify this certificate by adding certificateArn to serverless.yml

Checklist

• You have reviewed the README and FAQs, which answers several common questions.
• Please first try using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

I also tried 1.8.0 release, by adding to serverless.yml: component: "@sls-next/serverless-component@1.18.0"

[grantmontgomery]

I was getting this error a lot when I was trying to attach my own domain, but it turned out it was because I had an old Amplify app which I was originally trying to connect the domain to which I had forgotten about. Is your domain hosted on Route53 too?

[huksley]

Yes, I have my domain zone hosted in Route53 but my domain are registered elsewhere.

[huksley]

Now I can avoid error if I force certificate and domain for CloudFront input:

app:
  component: "@sls-next/serverless-component@1.19.0-alpha.11"
  inputs:
    domain: ["app", "example.com"]
    publicDirectoryCache: false
    memory:
      defaultLambda: 1024
      apiLambda: 2048
    timeout:
      defaultLambda: 20
      apiLambda: 15
    name:
      defaultLambda: example-app-static
      apiLambda: example-app-api
    bucketName: example-app-serverlessdeployment-bucket
    bucketRegion: eu-west-1
    description: "Serverless deployment for example app"
    domainType: "apex"
    certificateArn: "arn:aws:acm:us-east-1:id:certificate/id"
    cloudfront:
      comment: "Static and Lambda@Edge handlers for API"
      aliases: ["app.example.com"]
      certificate:
        acmCertificateArn: "arn:aws:acm:us-east-1:id:certificate/id"

However, running npx serverless select last available certificate in AWS Certificate Manager, which gives certificate error in browser.

[grantmontgomery]

Is your CNAME attached on your CloudFront distribution too?

[huksley]

Now it is but I updated CloudFront distribution manually to change cert and domain.

[dphang]

I think this happened because domain input doesn't handle multiple levels (only example.com or subdomain.example.com) properly.

I added certificate and aliases CloudFront inputs for this purpose - to handle more complex use cases or also if you want to manage domains outside of this component (e.g I manage mine in Cloudflare, not AWS). If you use certificate this way, you don't need certificateArn anymore (which is only used if domain is used).

[huksley]

Added in #826 a small fix which improves subdomain like app.example.com support for CloudFront.

You need to specify domain name manually by adding certificateArn: <ARN in AWS Certificate Manager> in component imputs.

[dphang]

Merged and published the PR, so assuming this one can be closed.