How to use Cloudflare proxy with Vercel or Netlify
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.
Once you’ve saved this rule, add another for always using HTTPS for all other routes.
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.
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-challengeshould not be redirected to HTTPS.All incoming requests to
http://yourdomain.tld/should be redirected tohttps://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.
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.
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.
Learn more about Cloudflare x Vercel
低成本的高性能網站組合 – Vercel + CloudFlare R2 + WunderGraph – Tenten | Digital Product Studio
如何讓 Cloudflare SSL Proxy 跟 Vercel 或 Netlify 一起使用 – Tenten | Digital Product Studio
How to run Ghost CMS on Vercel – Tenten | Digital Product Studio
Cloudflare 的 5 美元/月 WordPress APO 快取插件是否有效？ – Tenten | Digital Product Studio
