Using Cloudflare Proxy on Vercel & Netlify

Learn how to integrate Cloudflare proxy with Vercel or Netlify to enhance your website's performance and security. Step-by-step guide for seamless setup.

Whether your web applications are hosted on Vercel, Netlify, or similar platforms, you may have considered setting up a Cloudflare Proxy. In this guide, we’ll dive into how to make it happen.

Understanding the Need

Before we jump into the setup process, we must grasp why we’d want to do this. It’s a fair question, especially given that these cloud providers don’t typically encourage using a Cloudflare proxy. But hold up, it’s not for any malevolent reasons. On the contrary, platforms like Netlify and Vercel are fantastic, and I’ve been an avid user for a considerable period.

The Reasoning Behind

The logic behind the discouragement of proxy use is relatively straightforward. These service providers have already set up an effective edge infrastructure capable of caching static assets and load-balancing your serverless functions globally. When there’s a proxy in the middle, it potentially adds a cache layer, complicating the client-to-server request lifecycle.

However, if your goal is to leverage a Cloudflare proxy for caching static assets, these cloud providers have already covered you. But a Cloudflare proxy could be a good move if you desire more control over your traffic.

Using a Cloudflare proxy, you can introspect traffic and apply configurations to protect your website from unwanted visitors and attackers. But keep in mind, there are some tweaks required to ensure the proxy works smoothly with Vercel or Netlify.

Getting Started with Proxying

Pre-Requisites

Before we jump in, there are a couple of things you’ll need:

A site added to Cloudflare to update your DNS records.
Your site hosted on Vercel or Netlify, with an apex (root level) domain configured on Cloudflare.

Steps to Enable Proxy

Enabling the proxy involves more than merely toggling the switch from DNS Only to Proxy, although that is part of the process. Let’s look at the essential configurations you need to set up first.

Initial Step

Your first step is to ensure your site is on Cloudflare, and your DNS records can be updated. It’s pretty simple: you’ll see the proxy status, which will likely be ‘DNS Only’ instead of ‘Proxied.’

Switching from DNS Only to Proxy

The next step is to toggle this switch from DNS Only to Proxy. But wait, this should be the final step. Before that, we have a few more necessary configurations to deal with.

Ensuring SSL/TLS Encryption Mode is Full

You need to set your SSL/TLS encryption mode to Full. This is under ‘SSL/TLS’ -> ‘Overview.’ This step ensures an encrypted connection between your Cloudflare proxy and your origin server, whether Vercel, Netlify, or elsewhere.

Turning off Always Use HTTPS

That’s right, we suggest disabling the "Always Use HTTPS" option. Before you get alarmed, it’s important to understand why. Yes, it’s typically advised to redirect your traffic from HTTP to HTTPS. However, there are specific routes where we do not want this redirection.

Paths under yourdomain.tld/.well-known/ directory should not be redirected from HTTP to HTTPS. This is because services like Vercel or Netlify use Let’s Encrypt to generate certificates, valid for three months and automatically renewed.

The renewal process goes like this: Vercel will initiate an HTTP request to yourdomain.tld/.well-known/acme-challenge. If this request gets redirected to HTTPS, Let’s Encrypt won’t be able to issue a renewed SSL certificate on behalf of Vercel for your domain. This issue could disrupt the renewal process and ultimately cause the connection between Cloudflare and Vercel to fail.

To prevent this issue, we’ll implement some page rules that ensure our site always uses HTTPS but doesn’t redirect to HTTPS when a request for certificate renewal comes in.

To disable the "Always Use HTTPS" option, navigate to SSL/TLS -> Edge Certificates and disable it.

Setting up Page Rules

Next, navigate to Rules -> Page Rules. Here, we’re going to add two rules. One rule disables SSL when any request targets the .well-known path. The second rule enables HTTPS for all other routes.

Start with the first rule. Create a new rule with the configuration as displayed in the image above, ensuring to disable SSL for all subdomains and apex domains matching the .well-known path.

Disable SSL page rule for all subdomain and apex domain matching the path of .well-known

Once you’ve saved this rule, add another for always using HTTPS for all other routes.

Upgrade to HTTPS for all subdomain and apex domain for all paths which are incoming as HTTP request

Remember, the order of these page rules is crucial. We want to ensure that the ‘Always use HTTPS’ rule is processed last so our page rule for .well-known isn’t accidentally upgraded to HTTPS. Make sure your rule order looks something like the image above. If it doesn’t, use the arrow buttons to align them correctly.

Correct order of the page rules

Once you’ve arranged the rules correctly, you can now switch the proxy from DNS Only to Proxied in the DNS settings.

Testing Your Configuration

Once you’ve made all the changes we’ve outlined, it’s time to put your setup to the test.

There are two key tests we’ll perform to make sure everything is configured correctly:

All incoming requests to http://yourdomain.tld/.well-known/acme-challenge should not be redirected to HTTPS.
All incoming requests to http://yourdomain.tld/ should be redirected to https://yourdomain.tld.

To execute these tests, open your terminal and input the CURL command. Make sure to replace yourdomain.tld with your actual domain name.

curl -IL http://yourdomain.tld/.well-known/acme-challenge

If everything’s set up properly, you should see an output where the HTTP request isn’t redirected to HTTPS and returned a 404 status code. This is because no such file exists on your server.

There was no redirection from HTTP to HTTPS

Next, test the redirection from HTTP to HTTPS by typing in:

curl -IL http://yourdomain.tld

This time, you should see a successful redirect to HTTPS with a 301 status code.

All other requests are successfully redirected from HTTP to HTTPS

If both tests pass, congratulations! You’ve successfully configured your Cloudflare proxy.

I hope you found this guide useful. Stay tuned for the next one where we’ll discuss how to protect your website hosted on Vercel using Cloudflare.

How to Use Cloudflare Proxy with Vercel or Netlify

Learn more about Cloudflare x Vercel