In this guide, we are looking at how we can use Cloudflare with ZEIT Now.
Here we'll be using Cloudflare as a pure DNS service. We setup a few DNS records, which allow your domain to work with ZEIT Now.
These steps are valid for any external DNS service, not just Cloudflare.
First of all, add our domain (
my-app.work) to ZEIT Now with:
Then, ZEIT Now will ask you to create a TXT record in the domain's DNS provider.
Here's how the Cloudflare's DNS settings page looks after we've added the TXT record.
ZEIT Now we can add a CNAME record which allows Cloudflare to direct traffic to ZEIT Now. If we want to serve `ui.my-app.work` we need to add a CNAME with the following information:
This TXT record verifies the ownership of your domain name, So ZEIT Now can create SSL certificates automatically, as needed.
You can also use @ as the Name of the CNAME record. Then, the record applies to the root domain,
Make sure to uncheck the cloud symbol for the Record. So, Cloudflare only acts as a DNS server for this subdomain. (It should look like the below)
ui.my-app.work for any deployment in ZEIT Now:
Then, you can access the deployment via https://ui.my-app.work in no time.
For the next sub-domain, you only need to follow Step 2 and 3. Setup (Step 1) is a one time job.
In the above case, Cloudflare only acts as a DNS server. It simply forwards the traffic to ZEIT Now via DNS. With this mode, Cloudflare accepts the traffic and acts as a proxy server. This allows Cloudflare to do interesting things like OneClick SSL, DDOS protection, CDN features and more.
To get started, we need to apply all of the above steps. Then, go through the following steps:
For that, simply check the Cloud icon next to the Domain name (in the DNS settings page). Then it'll look like this:
With this setup, Cloudflare communicates with ZEIT Now using SSL. This is very important since ZEIT Now serves pages via HTTPS only.
For that, go to the Crypto settings page and select the Full (Strict) mode.
With the above step, Cloudflare communicates via ZEIT Now using SSL. ZEIT Now uses LetsEncrypt to issue SSL certificates. So, it needs to renew the certificate from time to time.
As a part of that, LetsEncrypt needs to access a special URL of your app (without SSL). So, Cloudflare should not serve that URL with SSL. For that, we need to add a Cloudflare page rule as shown below:
The URL should be:
*my-app.work/.well-known/acme-challenge/* and the setting should be SSL=OFF.
You need to replace my-app.work with your domain name.
This is what it looks like when creating the rule:
Finally, make sure to keep the above rule on the top of the list. Otherwise, it'll get overridden by some other rule like “Always Use HTTPS”.
For your next sub-domain, you only need to follow step 1.