Excellent software and practical tutorials
Cloudflare uses Workers and Pages to deploy website reverse proxy
use Cloudflare Workers and PagesProxyWebsite reverse proxy is a very practical method that can help you speed up access, bypass restrictions or hide the source address. The following is a concise tutorial to teach you how to use these two to achieve reverse proxy function. The whole process does not require hosting a server yourself, but can be completed using Cloudflare's edge computing capabilities.
Cloudflare is not just a CDN service provider, but a high-performance, low-latency, secure and reliable global network platform.
With its global edge computing architecture, Cloudflare can efficiently accelerate the delivery of static and dynamic content, while providing precise caching strategies to optimize bandwidth usage. In addition, its built-in unlimited DDoS protection mechanism can effectively resist various network attacks and ensure the stability and security of the business.
Today, we will use Cloudflare Workers and Cloudflare Pages to build an efficient reverse proxy service to give full play to Cloudflare's advantages in distributed computing and edge network acceleration.
Preparation before configuring website reverse proxy
Cloudflare Account
If you don't have an account yet, please visitCloudflareSign up!
The Cloudflare account registration process is relatively simple and can be registered using a Google account, Apple account, or a custom email.
It is recommended to use Google to register. Google accounts cover almost all popular foreign websites and can be used to log in. If you don’t have a Google account yet, hurry up and register one!
Activate Domain
You need to transfer your domain name to Cloudflare. If you don’t know how to activate your domain name in Cloudflare, here’s how to activate it.
Your nameservers need to be updated to activate Cloudflare.
Add a new domain name in the Cloudflare background, enter the domain name, select Quick Scan DNS Records by default, and click Continue!
Select the free plan and the domain name is added successfully!
Next, log in to the website where your domain name is registered. After entering the backend, find and turn off the DNS Security (DNSSEC) setting. If it is turned off by default, please ignore it. You can re-enable it later through Cloudflare.
Replace your current nameservers with the nameservers assigned by Cloudflare.
Note: Each domain name will be assigned a different name server. Delete the redundant name servers and fill in the Cloudflare name servers in Name Server 1 and Name Server 2.
Let’s take namesilo as an example:
Click the domain name in the background, enter the domain name operation page, edit the name server, and delete the content in the name server.
After modifying the name server, save it. The effective time in some areas is later, so you don't need to pay attention to the effective time for now.
In the Cloudflare background, if the domain name status is active, it means that it has taken effect. If the name server is not effective or modified incorrectly, it will show that the name server is invalid.
GitHub account
If you don't have an account yet, please visitGitHubSign up!
To create an account on GitHub, you can only register using an email address. It is recommended to register using Gmail.
Receive the verification code in your mailbox. After filling it out, the account is successfully registered!
Deploy website reverse proxy using Workers and Pages
Next, we use Workers and Pages to deploy the website reverse proxy. There are two ways to deploy the website's reverse proxy. Let's practice the deployment process.
Precautions
- Workers method: Copy _worker.js, save it in Cloudflare and deploy it.
- Pages method: Fork the repository and connect GitHub to Cloudflare for one-click deployment.
- Workers vs Pages: Workers is more suitable for pure dynamic proxy, while Pages is suitable for mixing static content and dynamic functions. If it is just a simple reverse proxy, Workers is more direct.
- Free quota: Cloudflare's free tier provides 100,000 Workers requests per day, and Pages has a similar limit, which is enough for personal use, but large-scale traffic may require a paid plan.
- Domestic access: workers.dev and pages.dev may be restricted in mainland China. It is recommended to bind a custom domain name.
- Security: Make sure the target website allows proxy access to avoid violating terms of service.
Using Cloudflare Workers to implement reverse proxy
Cloudflare Workers are serverless scripts that run on Cloudflare's global edge nodes and can easily handle HTTP requests and forward them to the target website.
Step 1: Sign up and log in to Cloudflare
If you don't have a Cloudflare account yet, register one on the official website and then log in.
Step 2: Create a Worker
In the Cloudflare dashboard, click "Workers and Pages" under Compute (Workers) on the left, and then select "Quick Start".
Give your Worker a name (a domain name similar to yourname.workers.dev will be generated by default).
After filling in the name, click Deploy to enter the deployment page.
Click Edit Code to enter the Worker editor, delete the default code, and paste the following simple reverse proxy script.
Step 3: Create a reverse proxy script
Create a custom java script. Here is an example of a reverse proxy script:
addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)); }); async function handleRequest(request) { const url = new URL(request.url); // Target website to which the request is forwarded const targetHost = 'example.com'; // Replace with the domain name you want to proxy url.hostname = targetHost; // Create a new request const newRequest = new Request(url, request); return await fetch(newRequest); }This script will forward all requests sent to your Worker to example.com.
Step 4: Save the deployment
Click the blue button "Deploy" in the upper right corner, and your Worker will be online. https://your-worker-name.yourname.workers.dev Visit it.
Step 5: Configure the domain name
Since the workers.dev domain name is not accessible in the country, you need to configure a new domain name.
Under Configuration Options, in the Domains and Routes menu, click Add.
Select Custom Domain, then enter the domain name and save. The domain name is now added successfully and can be accessed using the new domain name.
At this point, the reverse proxy function using Cloudflare Workers has been realized. It's very simple. Next, you can use Pages to deploy a website reverse proxy.
Deploy a website reverse proxy using Cloudflare Pages
Cloudflare Pages is a static website hosting platform that combines Git repository automated deployment, suitable for rapid launch of front-end projects. It recently added the Functions feature (essentially a variant of Workers), allowing dynamic code to be executed at the edge.
Cloudflare Pages is mainly used to host static websites, but combined with Functions (Workers-based functions), it can also implement reverse proxy.
Let's start deploying a reverse proxy using Cloudflare Pages.
Step 1: Create a Pages project
In the Cloudflare dashboard, under "Workers and Pages", click Create, then select "Pages", and click "Connect to Git".
Connect your GitHub or GitLab repository (you can create a simple empty static project, for example with only an index.html).
Step 2: Connect to the repository
Here we take GitHub as an example. First, you need to create a project on GitHub.
Create a repository on Github and add code, log in Github Then, as shown in the figure below, click Create Repository to create a private repository named Cloudflare Pages.
Note that when creating a new repository, you must select private, otherwise anyone can access it.
Next, create a new file. Click creating a new file to create a new file.
Next, create a file named _worker.js, then copy the following code, change the fifth line of single quotes to the website you want to reverse, then save and commit the changes.
The js code of the reverse proxy should be careful not to add characters such as https and http to the domain name.
export default { async fetch(request, env) { let url = new URL(request.url); if (url.pathname.startsWith('/')) { url.hostname = 'Inverse address' let new_request = new Request(url, request); return fetch(new_request); } return env.ASSETS.fetch(request); }, };
Once you're back on Cloudflare Pages, select GitHub and click the "Connect to GitHub" button.
The page jumps to Github and clicks the Install & Authorize button.
Enter the password to connect. After the connection is successful, return to Cloudflare Pages
After selecting the repository, click Start Setup.
On the Set Build and Deployment page, you can modify the project name or use the default, and then click Save and Deploy.
Many people fail when they first start deploying.
This is because the build system version of Cloudflare Pages has been upgraded to v2. In the project's settings, change the build system version to v1, and then redeploy to succeed!
After successful deployment, you can bind a separate domain name to the custom domain.
At this point, the Cloudflare Pages reverse proxy is set up. Isn’t it simple?
The differences and advantages and disadvantages of deploying reverse proxy with Workers and Pages
Select Workers scenario:
Powerful reverse proxy capabilities are required, such as:
- Modify all types of response content (HTML, XML, JSON, etc.).
- Handles complex replacement rules or dynamic routing.
- Precise control over response headers or caching policies.
The performance requirement is high and all logic needs to be completed on the server side.
Projects involving edge computing or requiring global low-latency responses.
Select Pages scenario:
The reverse proxy requirements are simple, such as only proxying HTML and doing a small amount of replacement.
- The project is mainly a static website with only a simple reverse proxy or redirection.
- Don't want extra costs, just rely on free quota.
- The development team is familiar with front-end development and prefers static file deployment.
Apply multiple content replacement rules (including title, URL, image, etc.). The following are the suggestions after comparison:
- Workers:
Advantages: It can perfectly implement your scripts, complete all replacements directly on the server, support regular expressions and multiple content types, and provide better performance and user experience.
Recommended reason: If your requirements involve complex replacement rules (multiple regular expression matches) and URL rewriting, Workers is more suitable. - Pages:
Limitations: Replacement can only be achieved through client-side JS, performance is poor, and non-HTML content or response headers cannot be processed.
Applicability: If you have a limited budget and only want to proxy HTML, you can use it, but the experience is not as good as Workers.
Recommended solution: Use Cloudflare Workers. It can fully meet your reverse proxy and content replacement needs, and has better performance and flexibility.
