Serverless-next.js: Custom domains don't work w/ alternate DNS provider (ie. Cloudflare)

[wilsonpage]

Describe the bug

I'm attempting to use my own domain which is managed by Cloudflare. I'm able to set this up manually by:

1. Deploying the app without a domain in the config
2. Creating a CNAME record (in Cloudflare) pointing to the app's xxx.cloudfront.net endpoint
3. Creating and validating a certificate in ACM for batch.songwhip.com
4. Changing the Cloudfront's domain/CNAME to accept request from my custom domain (batch.songwhip.com)

But using the domain config in serverless.yml always fails with:

Error: Domain songwhip.com was not found in your AWS account. Please purchase it from Route53 first then try again.

Questions

1. Does this plugin only support domains registered/managed by Route53?
2. If so are there any workarounds you can think of?

[barrysteyn]

I am using cloudflare to manage my domains, and I pretty much do what you are doing. However, if you want the domain to be automatically setup in cloudfront upon deploy, you will need to use Route53. This requirement does not come from this component, rather, it comes from the fact that this component is using another component that sets things up which insists upon this.

[Enalmada]

Note that you don't actually have to change your nameservers to Route53...you just have to create a dummy hosted zone entry there so the deploy process wont fail.

[wilsonpage]

@Enalmada interesting! Would you be able to offer a little more detail here?

[wilsonpage]

@barrysteyn thanks, glad I'm not the only one in this boat! It seems once the domains are manually wired up preferences stick, so it's probably just a one time config job for new projects. Either way, it's nice to have 'config as code' wherever possible.

[Enalmada]

@wilsonpage If you try and setup a serverless-next without any domain set, you will get a response like this:

  myApp: 
    appUrl:     https://dabcdefghijk.cloudfront.com
    bucketName: my-bucket

Add the appUrl as a cname in your CloudFlare. Then create a hosted zone in route53 for your domain. You don't actually need to purchase a domain in route53 to created a hosted zone. The zone is just a workaround to make serverless happy but it wont do anything because your domain nameservers are pointing to Cloudflare rather than route53. After that, you should be able to get serverless-next working.

[danielcondemarin]

@barrysteyn is right. @wilsonpage Please raise a feature request in https://github.com/serverless-components/domain as this is what actually manages the domain and cloudfront association behind the scenes.
I'll keep this issue open anyway as there may be some work to do after the domain component adds support for this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[panbanda]

Hey there. I do like the workaround of having the route53 entry and still using cloudflare. However I have a staging site and a production site and the staging site is a subdomain that will then need to generate an SSL cert with ACM. The production site has already been created for some other services and with terraform. I really don't want it to generate the certificate for a subdomain, and really only want to specify the CNAME in the cloudfront distribution configuration. Just trying to avoid having two frameworks (serverless && terraform) competing over SSL certs, route53 configurations, etc. when it can be solved by adding a cname attribute?

I think the serverless domain component is awesome but its specific to having a domain on route53. I don't think it would be a stretch to have a cname as an attribute on the cloudfront dist just because its technically a different feature?

[dphang]

I think there were a couple changes added recently that let you manually add CNAMES/Aliases or ACM certs:

https://github.com/serverless-nextjs/serverless-next.js/commit/ea180e67515ee5dceed1c3e19731291615a7cbbb
https://github.com/serverless-nextjs/serverless-next.js/commit/6bb144385c6621c4c5c00443259df538a185f4f2

It may give more flexibility, please try it out in latest alpha and let us know if there are bugs (I didn't make the change myself, so haven't personally tried it out).

[panbanda]

Golden. That did it-- this actually closes it I believe.

cloudfront: 
  aliases: [domain.com]

[benjipott]

Gréât , thks