This guide will help you smoothly migrate your Cloudflare Pages project to EdgeOne Pages.
Preparations: Search Build Command and Build Output
Start by finding 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 project's "Settings" tab and view the "Build Configuration" module.
3. Record the values of the "Build command" and "Build output" fields.
Example:
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 require migration to the edgeone.json file in EdgeOne Pages.
Comparison example of both
Cloudflare Pages _redirects file:
/old-path /new-path 301
/api/* /api/proxy 200
Cloudflare Pages _headers file:
/*
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 Cloudflare Pages configuration files and EdgeOne Pages is as follows:
_headers file corresponds to headers configuration.
_redirects file in the file corresponds to redirects configuration.
Proxy rewrite rules (such as /api/*) correspond to rewrites configuration.
3.Function Migration: From Cloudflare Pages to EdgeOne Pages
The two platforms are relatively consistent in syntax and usage.
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.
Functions on both platforms receive a context object containing request information and environment variables.
Same response method, both use Response object.
Routing rules are basically the same, supporting file system-based routing and dynamic routing.
Note:
Note: Pages and Functions support Node Functions and Edge Functions, with some differences in features such as the context object. You can select based on your requirements.
Migration suggestions: No need to change code writing and calling.
Note: If you need to migrate from Cloudflare Workers to Cloudflare Pages Functions, refer to the documentation. After successful migration, you can try the above migration steps. If you still have questions, contact us through the community for problem-solving.
2. Click "Create project" and select your GitHub repository.
3. In the project settings, fill in the build command and build output recorded earlier.
4. Click the "Start deployment" button, and Pages will auto-build and deploy your project.
5.Domain Configuration: Adding a Custom Domain
migration steps
1. Add your custom domain in project settings and get the CNAME record value.
2. Log in to your DNS provider console (if your domain is managed by Cloudflare, sign in to the Cloudflare console).
3. Find the CNAME record previously set for Cloudflare Pages.
4. Update the CNAME record to point it to the new value provided by EdgeOne Pages.
5. If you set up other DNS records (such as A or AAAA records) for Cloudflare Pages earlier, delete these records.
6. Wait for the 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.
By completing the above steps, you have successfully migrated your Cloudflare Pages project to EdgeOne Pages. The two platforms have similarities in some aspects, but on a strong infrastructure, we have optimized Pages product features, such as intelligent refresh preheating, to deliver an out-of-the-box experience. In addition, Pages has fewer restrictions compared to competitors during the 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.
