This guide helps you smoothly migrate your Vercel project to EdgeOne Makers.
Preparations: Search Build Command and Output Directory
Start by finding your Vercel project's build command and output directory:
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 (compilation and deployment setting) panel, record the following information:
3.1 Build Command
3.2 Output Directory
Example:
npm run build
Output Directory: build
This information will be used in project configuration.
2.Configuration Migration: Handle Redirects and Headers
If your project uses a vercel.json file to configure redirects or custom headers, migrate these configurations to the edgeone.json file in EdgeOne Makers.
Comparison example of both:
Configure the Vercel.json file.
{
"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 for EdgeOne Makers is very similar to Vercel, but there may be some subtle differences. For detailed configuration options, see the edgeone.json document.
3.Function Migration: From Vercel to EdgeOne Makers
The two platforms have differences in syntax and usage. Here is a simple comparison example:
Vercel Functions Hello World:
exportconst dynamic ='force-dynamic';
exportfunctionPOST(request){
returnnewResponse(`Hello world`);
}
Makers Functions Hello World:
exportdefaultfunctiononRequestPost(context){
returnnewResponse(`Hello world`);
}
main difference:
Makers uses the onRequest series of functions (such as onRequestPost) to handle different HTTP methods.
Makers Functions receive a context object containing request information and environment variables.
The response method is similar, both use Response object.
Note:
Makers Functions supports both Cloud Functions and Edge Functions. These two have some differences in features, such as the context object. You can choose between them based on your specific requirements.
Migration suggestions
Change the export function to the onRequest series functions.
If you used Vercel-specific features, you may need to find other solutions. Contact us through the community.
By completing the above steps, you have successfully migrated your Vercel project to EdgeOne Makers. The two platforms share similarities in some aspects. However, leveraging our robust infrastructure, we have implemented optimizations such as intelligent refresh and pre-warming tailored to Makers' product features, delivering an out-of-the-box user experience. Furthermore, during the public beta phase, Makers imposes fewer restrictions compared to competitors, offering developers greater flexibility and more choices. In terms of customer support, we provide more responsive assistance and are committed to creating a superior product experience for developers.
If you encounter any issues during the migration, refer to the EdgeOne Makers official documentation.
