this guide will help you smoothly migrate your Cloudflare Pages project to EdgeOne Pages.
1.Preparations: Search for 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. Enter the "Settings" tab of the project and view the "Build Configuration" module.
3. Record the values of the "Build command" and "Build output" fields.
Example:
Build command: npm run build
Build output: build
This information will be used in project configuration.
2.Configuration Migration: Handle 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.
The following is a comparison example of both.
_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 process, the mapping between the configuration file of Cloudflare Pages and that of EdgeOne Pages is as follows:
The _headers file corresponds to the headers configuration.
The redirections in the _redirects file correspond to the redirects configuration.
The proxied rewrite rule (such as /api/*) corresponds to the rewrites configuration.
3.Function Migration: From Cloudflare Pages to EdgeOne Pages
The syntax and usage of the two platforms are relatively consistent.
Here is a simple example:
// Cloudflare Pages Functions
exportfunctiononRequest(context){
returnnewResponse("Hello, Cloudflare Pages!");
}
// EdgeOne Pages Functions
exportfunctiononRequest(context){
returnnewResponse("Hello, EdgeOne Pages!");
}
Main similarities
Both platforms use the onRequest function to handle all HTTP methods.
The functions of both platforms receive a context object, which contains request information, environment variables, etc.
Same response method, both use Response object.
Routing rules are basically the same. Both support file system-based routing and dynamic routing.
Migration suggestions: no need to change code writing and calling.
If you need to migrate from Cloudflare Workers to Cloudflare Pages Functions, see Documentation. After successful migration, you can try the above migration steps. If you still have problems, contact us through the community for solutions.
2. Click "Create Project" and select your GitHub repository.
3. In project settings, 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 project settings and obtain the CNAME record value.
2. Log in to your DNS provider console (if your domain name is managed by Cloudflare, log in to the Cloudflare console).
3. Find the CNAME record previously set for Cloudflare Pages.
4. Update the CNAME record and point it to the new value provided by EdgeOne Pages.
5. If you previously set other DNS records (such as A or AAAA records) for Cloudflare Pages, 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. Just update the corresponding CNAME record.
For the detailed domain addition process, refer to the Domain Management document.
By completing the above steps, you have successfully migrated your Cloudflare Pages project to EdgeOne Pages. The two platforms have similarities in some aspects. On a strong infrastructure, we have made optimizations for Pages product features, such as intelligent refresh preheating, to provide an out-of-the-box experience. In addition, Pages has fewer restrictions compared to competitors during the public beta phase, providing more flexibility for developers. In terms of customer support, we provide more timely responses, committed to providing developers with a high-quality product experience.
