Sử dụng Pages as origin for Load Balancing Use Pages as an origin for Load Balancing

This tutorial is intended as an introductory example of how you can leverage Cloudflare's global traffic management.

The following sections will guide you through setting up an active-passive failover load balancer with Cloudflare Pages as one of the endpoints, while also going into details about the Load Balancing dashboard workflow, and some important field values and troubleshooting.

This setup can be useful if you are migrating your production website or application to Pages or if you just want to have a backup or a personalized web page for when your primary origin goes down.

Make sure you:

• Are familiar with the Cloudflare Load Balancing components.
• Own a domain and use Cloudflare as a primary DNS provider.
• Have deployed a website or application with Cloudflare Pages.
• Have enabled Load Balancing in your account.

Although you can create all the components in the Create Load Balancer workflow, using the Manage Monitors and Manage Pools sections separately makes it easier to test and troubleshoot the configurations of each of these components before bringing them together in a load balancer.

Monitors define the criteria based on which an endpoint will be considered healthy or not. Start by setting up a monitor as follows.

1. In the Cloudflare dashboard, go to the Load Balancing page.

Go to Load Balancing

1. Select the Monitors tab and then Create monitor.
2. Give the monitor a descriptive name and confirm the other fields are filled in as the following:

| Field | Value | | ----- | ----- | | Type | HTTP | | Path | / | | Port | 80 |

1. Under Advanced health check settings, keep the default values and enable the Follow Redirects option.

When you are using a service like Cloudflare Pages, it is possible that requests from the health monitor - as well as the ones from your visitors - are redirected before reaching their destination. Enabling this option prevents the monitor from reporting an unhealthy endpoint when it actually has only been redirected (with a 301 code, for example).

Tip

You can name the monitor after the parameters you have defined. For example: HTTP - 200 - Follow Redirects.

This way you can easily remember the criteria a certain monitor is using when you decide to attach it to other endpoints as well.

1. Select Save to confirm.

Pools hold information about where the health monitor requests and your visitors requests will be directed to.

To support the use cases mentioned above, and assuming you only have one origin server for your production website and one for the Cloudflare Pages instance, create two pools with one endpoint each:

Important

The endpoint pointing to Cloudflare Pages must have host header filled in with the project domain (<project>.pages.dev) for it to resolve correctly. You can find a reference table for correct setup in Step 8 below.

Failing to add the host header will result in response code mismatch error for the monitor, and Error 1000: DNS points to prohibited IP for visitors (if the load balancer is enabled despite the unhealthy monitor status).

1. In the Cloudflare dashboard, go to the Load Balancing page.

Go to Load Balancing

1. Select the Pools tab and then Create monitor.
2. For the first pool, start by filling out the fields:

• A name for the pool (must be unique). Suggestion: primary
• A description to provide more details on the name. Suggestion: production website

1. Leave the choice for Endpoint Steering as is. Since each pool will only have one endpoint, this steering method will not interfere in this case.
2. Add your origin server as an endpoint with the following information:

• A name for the endpoint (must be unique). Suggestion: my-website.
• The endpoint IP address or hostname.

Warning As exemplified in Step 8 below, when using Cloudflare as an endpoint, do not specify one of Cloudflare's anycast IP addresses. Because these IPs can change at any time, you should use a hostname instead.

• The endpoint weight, which can be set to 1. Since each pool will only have one endpoint, the endpoint weight will not make a difference in this case.
• A hostname by selecting Add host header.

Warning If your production website is hosted on a platform like Cloudflare Pages, where you have a default subdomain (example.pages.dev) and then configure a custom domain (my-app.com), you will need to add a host header to avoid failing the health monitor request.

1. Finish configuring the first pool with the following information:

• Leave the Health Threshold set to 1. Since each pool will only have one endpoint, this is the only possible value for this field.
• Select the Monitor configured in the previous step.
• Select Health Check Regions to choose from which locations Cloudflare should send monitor requests to periodically test the endpoint health.

1. Select Save
2. Repeat the process for the second pool using the following values:

| Field | Value | | -------------------------- | --------------------------------------- | | Pool name | secondary | | Description | Pages version | | Endpoint steering | <default> | | Endpoint name | my-pages-website | | Endpoint address | <your custom domain or Pages subdomain> | | Weight | 1 | | Host (Add host header) | <your custom domain or Pages subdomain> | | Health threshold | 1 | | Monitor | <monitor defined on previous step> | | Health check regions | <select region of your choice> |

Before setting up the load balancer:

1. In the Cloudflare dashboard, go to the Load Balancing page.

Go to Load Balancing

1. Go to the Pools tab.
2. Find the pools you created in the list and check if their status is Healthy. You might have to refresh the page.
3. Expand each pool entry to confirm that the health status for endpoints within them is also Healthy.

The basic principle is that, if both your production website and your Cloudflare Pages project are live and directly accessible via browser, the monitors should also be able to get a 200 code as HTTP response.

Revise your pools and monitor configurations to confirm they followed the instructions above. If you still find issues, refer to Troubleshooting or FAQ.

After confirming the endpoints and monitors are set up correctly and return the expected health status, create the load balancer:

1. In the Cloudflare dashboard, go to the Load Balancing page.

Go to Load Balancing

1. Select Create load balancer.
2. On the Hostname page, configure the following and select Next.

Enter a Hostname, which is the DNS name at which the load balancer is available. Suggestion: for now, you can just add a temporary hostname such as lb (so the complete field value would look like lb.<your_domain>). Toggle the orange cloud icon to update the proxy mode, which affects how traffic is routed and which IP addresses are advertised. * Select your preferred option for session affinity and adaptive routing.

1. On the Add a Pool page, configure the following and select Next.

Select the first pool you created previously and select Add Pool. Do the same for the second pool and reorder them if needed. For the purposes of this tutorial, your production website pool would be the first (primary) and the Cloudflare Pages pool would be the second (secondary). * If needed, update the Fallback Pool. For the purposes of this tutorial, you can leave this pointing to your secondary pool.

1. On the Monitors page, review the monitors attached to your pools and the expected health status, and select Next.
2. On the Traffic Steering page, make sure Off is selected. This means the load balancer will follow the order established on the Add a Pool section (Step 3 above), achieving an Active - Passive Failover configuration.
3. For the purposes of this tutorial, leave the Custom Rules option empty.
4. On the Review page, review your configuration and select Save as Draft.

A DNS record of the type LB will be created under DNS \> Records ↗ with the hostname you have defined, and a corresponding load balancer will be added to Load Balancing ↗

If you have used a temporary hostname for your load balancer, follow the steps below to deploy and test it.

1. In the Cloudflare dashboard, go to the Load Balancing page.

Go to Load Balancing

1. In the Load Balancers list, locate the load balancer you created under a test hostname (such as lb) and enable it.
2. On your browser, request the temporary hostname (lb.example.com). You should see the website or application hosted at your primary origin server.
3. Go back to the Manage Load Balancers list, select to expand the test load balancer, and disable the primary pool.
4. On a new incognito window of your browser, request the temporary hostname once again. You should see the website or application hosted at your secondary origin server this time.

If you find issues, revise your pools, monitor, and load balancer configurations to confirm they followed the instructions above. Also refer to Troubleshooting or FAQ if needed.

Important

After you confirm everything is working correctly, make sure you re-enable the pools within the load balancer.

Now that you have set up your load balancer and verified everything is working correctly, you can put the load balancer on a live domain or subdomain:

1. Confirm that your production hostname has the correct priority order of DNS records and is covered by an SSL/TLS certificate.

If you have an Enterprise account, also evaluate your application for any excluded paths. For example, you might not want the load balancer to distribute requests directed at your /admin path. For any exceptions, set up an Origin rule.

1. Configure your load balancer to receive production traffic by editing the Hostname of your existing load balancer.

{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/load-balancing/","name":"Load Balancing"}},{"@type":"ListItem","position":3,"item":{"@id":"/load-balancing/pools/","name":"Pools"}},{"@type":"ListItem","position":4,"item":{"@id":"/load-balancing/pools/cloudflare-pages-origin/","name":"Use Pages as an origin for Load Balancing"}}]}