Setup Wildcard Domains with Vercel and Cloudflare Nameservers

Published on 10 months agoSetup Wildcard Domains with Vercel and Cloudflare Nameservers

A multi-tenant software-as-a-service (SASS) application is a single instance of the application that serves multiple customers. A SASS will assign customers a subdomain to separate and customise their application data. The wildcards domain can be handy if you let the customer create their subdomain.

Today, we will look at how to set the wildcard domain if you're using Vercel to host your application while using Cloudflare as your DNS provider.

The wildcard setup provided by Vercel in their documentation is outdated, and you should follow the steps below. You may also find the discussion related to this topic in the GitHub issue.

Add Wildcard Domain To Your Project

Assuming you already have your apex domain assigned to your Vercel project, you must add another wildcard domain to your project. Navigate to your project (Project Settings -> Domains) and add *.yourdomain.com to your project. You will see the Invalid Configuration error message, but you can ignore it without a problem.

Vercel project for wildcard domain
Your Vercel project should look like this now.

Create The Wildcard TLS Certificate via Vercel CLI

Next, you need to create a wildcard TLS certificate in Vercel. This can be done via Vercel CLI.

Run the following command in your terminal:

$ vercel certs issue "*.yourdomain.com" --challenge-only

Vercel CLI 28.12.6
> A certificate issuance for *.example.com has been started [2s]
  Add the following TXT records with your registrar to be able to the solve the DNS challenge:

name                   type        value
_acme-challenge        TXT         bdJP_REqQQdKwTIcqdq-eEc2xV-GvCWWf15XtrDc

> To issue the certificate once the records are added, run:
  `vercel certs issue *.yourdomain.com`
  Read more: https://err.sh/vercel/solve-challenges-manually

$ vercel certs issue "*.yourdomain.com"
Vercel CLI 28.12.6
> Success! Certificate entry for *.yourdomain.com created [6s]

Add TXT and Wildcard DNS Record in Cloudflare

You can now go to your Cloudflare dashboard to add two records: a TXT record for the _acme-challenge certificate and a wildcard DNS record for the wildcard subdomain. Go to Cloudflare -> yourdomain.com -> DNS -> Records and insert the following records:

name type value
_acme-challenge TXT bdJP_REqQQdKwTIcqdq-eEc2xV-GvCWWf15XtrDc (Value from the previous step)
* CNAME cname.vercel-dns.com

Your DNS records should look like the following:

Cloudflare DNS dashboard for wildcard domain

Now, you're all set for the wildcard domains.

NOTE: One caveat about this approach is that Let's Encrypt certificate will expire every 90 days and you need to recreate the certificate and update the TXT record before it's expired.

Copyright © 2024 Tek Min Ewe