I like using Cloudflare in my web projects. This is in large part because they keep their costs down and they also have really great products. Whenever I register new domain names I will register them with Cloudflare, but I might use other web hosting providers, depending on the needs of my app.
I recently transferred a domain name from Namecheap to Cloudflare following this tutorial: How to Transfer a Domain From Namecheap to Cloudflare - Cloudflare Registrar. But I ran into an issue after the transfer was complete. The website that is associated with the domain name that I transferred is hosted on Vercel. That website has a subdomain that I could not access after the domain name was transferred to Cloudflare. When I tried visiting the subdomain in a browser, this was the error that I was shown:
This site can't provide a secure connection
www.app.mysite.com uses an unsupported protocol.
ERR_SSL_VERSION_OR_CIPHER_MISMATCHThis is what I found out while I was troubleshooting the issue:
Cloudflare’s SSL certificates only cover single-level subdomains. For example:
example.com Will workwww.example.com Will workstaging.example.com Will workwww.staging.example.com Will NOT workstaging.www.example.com Will NOT workNotice that the examples that will NOT work have multi-level subdomains.
The issue was that in my Vercel dashboard I had configured a subdomain with a permanent redirect from app.mysite.com to www.app.mysite.com, which was causing the error that I saw in my browser.
All I had to do was go to the Domains section of my Vercel dashboard and remove the redirect from app.mysite.com to www.app.mysite.com. Then I simply setup the app.mysite.com subdomain with No Redirect. Once I did that, everything worked again.
Once my subdomain was setup correctly in Vercel, then I was be able to follow the instructions in the following link to get my Cloudflare domain name to work with Vercel hosting: How do I use a Cloudflare domain with Vercel?.
When I did my domain name transfer, Cloudflare created the DNS records that I needed for my app. If you are not performing a domain name transfer, then you might have to create the following DNS records in Cloudflare to get your single-level subdomains to also point to Vercel:
| Type | Name | Content | Proxy status | TTL |
|---|---|---|---|---|
A |
* |
76.76.21.22 |
Proxied |
Auto |
A |
www |
76.76.21.61 |
Proxied |
Auto |
NOTE: In the article that I linked to above, Vercel recommends using IP address 76.76.21.21 with your A records. However, when my domain name was transferred, Cloudflare had already created the DNS records using these IPs for various records: 76.76.21.22, 76.76.21.164, 76.76.21.241, 76.76.21.61. If you paste any of IP addresses into a web browser, then they will take you to Vercel’s site. So there are other IP addresses that you can use for Vercel.