This guide will help you smoothly migrate your Vercel project to EdgeOne Pages.
1.Preparations: Search for the Build Command and Output Directory
First, we need to find the build command and output directory of your Vercel project:
1. Log in to the dashboard and find the project to migrate.
2. Enter Settings (project setting) and select the General (common) tab.
3. In the Build and Development Settings panel, record the following information:
3.1 Build Command
3.2 Output Directory
Example:
Build Command: npm run build
Output Directory: build
This information will be used in project settings.
2.Configuration Migration: Handle Redirects and Headers
If your project uses a vercel.json file to configure redirects or custom headers, you need to migrate these configurations to the edgeone.json file of EdgeOne Pages.
The following is a comparison example of both.
Vercel.json configuration
{
"redirects":[
{
"source":"/articles",
"destination":"/blog",
"statusCode":301
}
],
"rewrites":[
{
"source":"/assets/*",
"destination":"/assets-new/:splat"
}
],
"headers":[
{
"source":"/(.*)",
"headers":[
{
"key":"X-Frame-Options",
"value":"DENY"
},
{
"key":"Cache-Control",
"value":"max-age=7200"
}
]
},
{
"source":"/assets/*",
"headers":[
{
"key":"Cache-Control",
"value":"max-age=31536000"
}
]
}
]
}
Corresponding edgeone.json configuration:
{
"redirects":[
{
"source":"/articles",
"destination":"/blog",
"statusCode":301
}
],
"rewrites":[
{
"source":"/assets/*",
"destination":"/assets-new/:splat"
}
],
"headers":[
{
"source":"/*",
"headers":[
{
"key":"X-Frame-Options",
"value":"DENY"
},
{
"key":"Cache-Control",
"value":"max-age=7200"
}
]
},
{
"source":"/assets/*",
"headers":[
{
"key":"Cache-Control",
"value":"max-age=31536000"
}
]
}
]
}
Note: The configuration syntax of EdgeOne Pages is very similar to that of Vercel, but there may be some minor differences. For detailed configuration options, see edgeone.json documentation.
3.Function Migration: From Vercel to EdgeOne Pages
There are some differences in syntax and usage between the two platforms. Here is a simple comparison example:
Hello World of Vercel Functions
exportconst dynamic ='force-dynamic';
exportfunctionPOST(request){
returnnewResponse(`Hello world`);
}
Hello World of EdgeOne Pages Functions
exportfunctiononRequestPost(context){
returnnewResponse(`Hello world`);
}
Main Differences
Pages uses onRequest series functions (such as onRequestPost) to handle different HTTP methods.
Pages function receives a context object, which contains request information, environment variables.
The response method is similar. Both use Response object.
Migration suggestions:
Change Vercel's export functions to EdgeOne Pages' onRequest series functions.
If Vercel-specific features are used, you may need to find other solutions. Contact us through the community.
2. Click "Create Project" and select your GitHub repository.
3. In project configuration, fill in the build command and output directory recorded previously.
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.
3. Delete the A, AAAA or CNAME records previously set for Vercel.
4. Add a new CNAME record pointing to the new value provided by EdgeOne Pages.
5. Wait for DNS update to take effect (may take a few minutes to a few hours).
Note: If you previously used Vercel DNS, transfer the domain to another DNS provider, and then configure the CNAME record according to the above steps.
For the detailed domain addition process, refer to the Domain Management document.
By completing the above steps, you have successfully migrated your Vercel project to EdgeOne Pages. The two platforms have similarities in some aspects. On a strong infrastructure, we have optimized 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.
