Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Error Codes
    • Build Guide
    • Deployment Guide
    • Domain Management
    • Pages Functions
    • KV Storage
    • EdgeOne CLI
    • FAQs
    • Contact Us
    • Release Notes
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
Docs Overview/
Edge Developer Platform/
Pages/
Migration Guides/
Migrating from Vercel to EdgeOne Pages/

Migrating from Vercel to EdgeOne Pages

This guide will help you smoothly migrate your Vercel project to EdgeOne Pages.


1.Preparation: Finding 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. Go to Settings (Project Settings) and select the General tab.
3. In the Build and Development Settings panel, record the following information:
3.1 Build Command
3.2 Output Directory



For example:
Build command: npm run build
Output Directory: build

This information will be used in the project configuration.


2.Configuring Migration: Handling 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.

Here is a comparison example:

Vercel's 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"
        }
      ]
    }
  ]
}

EdgeOne's 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 Vercel, but there may be some subtle differences. For detailed configuration options, refer to the edgeone.json documentation.


3.Function Migration: From Vercel to EdgeOne Pages

There are some differences in syntax and usage between the two platforms. Below is a simple comparison example:

hello world of vercel functions:
export const dynamic = 'force-dynamic';
 
export function POST(request) {
  return new Response(`Hello world`);
}

hello world of edgeone pages functions:
export function onRequestPost(context) {
  return new Response(`Hello world`);
}

main differences:
Pages uses onRequest series functions (e.g., onRequestPost) to handle different HTTP methods.
Pages functions receive a context object, which contains request information, environment variables, etc.
Response method is similar, both use response object.

Migration suggestions:
Change Vercel's export functions to EdgeOne Pages' onrequest series functions.
If using Vercel-specific features, you may need to find other solutions, contact us through the community.

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 a project on EdgeOne Pages:
1. Log in to the Tencent Cloud Console and go to the Pages service.
2. Click "Create Project", select your GitHub repository.
3. In the project configuration, enter the previously recorded build command and output directory.
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 get the CNAME record value.
2. Log in to your DNS service provider console.
3. Delete the previously set A, AAAA, or CNAME records 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, you need to transfer the domain to another DNS service provider, then configure the CNAME record as described above.

For the detailed domain addition process, refer to the Domain Management Documentation.

By completing the above steps, you have successfully migrated the Vercel project to EdgeOne Pages. The two platforms have similarities in some aspects, but with powerful infrastructure, we have made optimizations such as intelligent refresh preheating tailored to the Pages product, 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 create a high-quality product experience for developers.

If you encounter any issues during migration, please refer to the EdgeOne Pages Documentation.