Migrating from Cloudflare Pages to EdgeOne Pages

This guide will help you smoothly migrate your Cloudflare Pages project to EdgeOne Pages.
﻿
1.Preparing: Finding the Build Command and Build Output
First, we need to find the build command and build output of your Cloudflare Pages project:
1. Log in to the dashboard and find the project to migrate.
2. Go to the "Settings" tab of the project and view the "Build Configuration" module.
3. Record the values of the "Build command" and "Build output" fields.
﻿
﻿
﻿
﻿
﻿
﻿
For example:
Build command: npm run build
Build output: build
﻿
This information will be used in the project configuration.
﻿
2.Configuring Migration: Handling Redirects and Headers
Cloudflare Pages uses _redirects and _headers files to configure redirect rules and custom headers. These configurations need to be migrated to the edgeone.json file of EdgeOne Pages.
﻿
Here is a comparison example:
﻿
_redirects file of Cloudflare Pages:
/old-path   /new-path   301
/api/*      /api/proxy  200
_headers file of Cloudflare Pages:
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
﻿
/assets/*
  Cache-Control: public, max-age=31536000
﻿
In EdgeOne Pages, we need to create an edgeone.json file to include these configurations:
{
  
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "statusCode": 301
    }
  ],
  "rewrites": [
    {
      "source": "/api/*",
      "destination": "/api/proxy"
    }
  ],
  "headers": [
    {
      "source": "/*",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    },
    {
      "source": "/assets/*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000"
        }
      ]
    }
  ]
}
During the migration, the configuration files of Cloudflare Pages correspond to those of EdgeOne Pages as follows:
_headers file corresponds to headers configuration.
Redirects in the _redirects file correspond to redirects configuration.
Proxy rewrite rules (e.g., /api/*) correspond to rewrites configuration.
﻿
Detailed configuration options can be found in the edgeone.json documentation.
﻿
3.Function Migration: From Cloudflare Pages to EdgeOne Pages
The syntax and usage of both platforms are basically consistent.
﻿
Here is a simple example:
// Cloudflare Pages Functions
export function onRequest(context) {
  return new Response("Hello, Cloudflare Pages!");
}
﻿
// EdgeOne Pages Functions
export function onRequest(context) {
  return new Response("Hello, EdgeOne Pages!");
}
﻿
Main similarities:
Both platforms use the onRequest function to handle all HTTP methods.
Both platforms' functions receive a context object, which includes request information, environment variables, etc.
Same response method, both use the response object.
Routing rules are basically the same, both support file system-based routing and dynamic routing.
﻿
Migration suggestion: no need to change code writing and calling.
﻿
Note: If you need to migrate from Cloudflare Workers to Cloudflare Pages Functions, please refer to the documentation. After a successful migration, you can try the above migration steps. If you still have issues, you can contact us through the community for resolution.
﻿
Detailed function usage can be found in the Pages Functions documentation.
﻿
4.Project Deployment: Creating a New Project on EdgeOne Pages
After preparation work is completed, create and deploy the project on Pages:
1. Log in to the Tencent Cloud Console, enter the Pages service.
2. Click "Create Project", select your GitHub repository.
3. In the project configuration, fill in the previously recorded build command and build output.
4. Click the "Start Deployment" button, and Pages will automatically build and deploy your project.
﻿
5.Domain Configuration: Adding a Custom Domain
Migration Steps:
1. Add your custom domain in the project settings to obtain the CNAME value.
2. Log in to your DNS provider's console (if your domain is managed by Cloudflare, log in to the Cloudflare console).
3. Locate the CNAME record previously set for Cloudflare Pages.
4. Update the CNAME record to point to the new value provided by EdgeOne Pages.
5. If you previously set other DNS records (such as A or AAAA records) in Cloudflare Pages, please delete these records.
6. Wait for DNS update to take effect (may take a few minutes to a few hours).
﻿
Note: If your domain was previously managed by Cloudflare, you can choose to continue using Cloudflare's DNS service by simply updating the corresponding CNAME record.
﻿
For detailed domain addition process, refer to the Domain Management Documentation.
﻿
By completing the above steps, you have successfully migrated the Cloudflare Pages project to EdgeOne Pages. The two platforms have some similarities, but on a robust infrastructure, we have optimized for Pages product features with intelligent refresh preheating, providing an out-of-the-box user experience. Additionally, Pages has fewer restrictions compared to competitors during the public beta, providing more flexibility in choices for developers. In terms of customer support, we offer a more timely response, aiming to deliver a high-quality product experience for developers.
﻿
If you encounter any issues during migration, please refer to the EdgeOne Pages Documentation.
﻿
1.Preparing: Finding the Build Command and Build Output
2.Configuring Migration: Handling Redirects and Headers
3.Function Migration: From Cloudflare Pages to EdgeOne Pages
4.Project Deployment: Creating a New Project on EdgeOne Pages
5.Domain Configuration: Adding a Custom Domain