# How to Use Cloudflare Proxy with Vercel or 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.
    

![](https://s4.tenten.co/tenten-2024-09-24-at-11.18.24-AM.png align="left")

***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.

![](https://s4.tenten.co/tenten-2024-09-24-at-11.19.30-AM.png align="left")

***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](https://letsencrypt.org/) 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.

![](https://s4.tenten.co/tenten-2024-09-24-at-11.20.09-AM.png align="left")

***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](https://s4.tenten.co/tenten-2024-09-24-at-11.21.58-AM.png align="left")

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](https://s4.tenten.co/tenten-2024-09-24-at-11.23.01-AM.png align="left")

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](https://s4.tenten.co/tenten-2024-09-24-at-11.23.56-AM.png align="left")

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:

1. All incoming requests to [`http://yourdomain.tld/.well-known/acme-challenge`](http://yourdomain.tld/.well-known/acme-challenge) should **not** be redirected to HTTPS.
    
2. All incoming requests to [`http://yourdomain.tld/`](http://yourdomain.tld/) should be redirected to [`https://yourdomain.tld`](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`](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](https://s4.tenten.co/tenten-2024-09-24-at-11.26.16-AM.png align="left")

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

`curl -IL` [`http://yourdomain.tld`](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](https://s4.tenten.co/tenten-2024-09-24-at-11.28.14-AM.png align="left")

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

* [How to use Cloudflare proxy with Vercel or Netlify - Tenten | Digital Product Studio](https://tenten.co/insight/dev/how-to-use-cloudflare-proxy-with-vercel-netlify/)
    
* [低成本的高性能網站組合 - Vercel + CloudFlare R2 + WunderGraph - Tenten | Digital Product Studio](https://tenten.co/insight/dev/vercel-serverless-low-cost-stack/)
    
* [如何讓 Cloudflare SSL Proxy 跟 Vercel 或 Netlify 一起使用 - Tenten | Digital Product Studio](https://tenten.co/insight/dev/cloudflare-with-vercel-netlify/)
    
* [How to run Ghost CMS on Vercel - Tenten | Digital Product Studio](https://tenten.co/insight/dev/how-to-run-ghost-cms-on-vercel/)
    
* [如何使用 Cloudflare 緩存加速您的 Webflow 專案](https://tenten.co/learning/webflow-and-cloudflare-cache/)
    
* [Cloudflare 的 5 美元/月 WordPress APO 快取插件是否有效？ - Tenten | Digital Product Studio](https://tenten.co/insight/dev/cloudflare-wordpress-apo-cache-plugin/)