从 Vercel 迁移
将 Vercel 部署的项目(静态站点、Next.js、Serverless Functions 等)迁移至腾讯云开发 CloudBase
迁移总览
Vercel 和 CloudBase 在核心能力上高度对齐,都提供前端 + Serverless 后端 + 数据存储的一站式部署体验。迁移主要围绕 静态托管、后端计算(云函数 & 云托管)、数据库、文件存储、身份认证、环境变量 六个模块逐项适配。
| 对比维度 | Vercel | CloudBase |
|---|---|---|
| 静态托管 | 自动从 Git 构建部署 | 静态网站托管 + CDN 加速 |
| Serverless 函数 | Vercel Functions(Node/Go/Py/Ruby) | 云函数(Node.js / PHP / Python / Golang / Java)+ 云托管(任意语言/框架) |
| 边缘函数 | Edge Functions / Middleware | 云托管函数框架(支持 SSE、WebSocket) |
| 数据库 | Vercel Marketplace(Neon Postgres / Supabase 等第三方) | 文档型数据库(NoSQL)+ MySQL 数据库 + PostgreSQL 数据库 |
| 对象存储 | Vercel Blob Storage | 云存储(内置 CDN + 图片处理) |
| 身份认证 | 第三方集成(Clerk / Auth0 / NextAuth) | 内置身份认证(微信/短信/邮箱/匿名/自定义) |
| 自定义域名 | Dashboard 一键绑定 | 控制台绑定 + 用户自行上传 SSL 证书 |
| 环境变量 | Dashboard / CLI 管理 | 控制台 / CLI 管理 |
快速对照速查表
| 我现在的 Vercel 用法 | 迁移到 CloudBase 的对应方式 |
|---|---|
| 部署纯静态站点(Vite/React/Vue) | tcb app deploy -e <envId> |
| 部署 Next.js SSR | 云托管 + Dockerfile |
| 部署 Next.js 静态导出 | 同纯静态站点 |
api/*.ts Serverless Functions | 云函数 或 云托管 Express 应用 |
middleware.ts 边缘逻辑 | 云托管中间件 / API 网关 |
环境变量 process.env.XXX | 控制台配置,代码无需改动 |
| 自定义域名 | 控制台「域名管理」绑定 |
| Vercel Postgres(Marketplace · Neon) | CloudBase PostgreSQL 数据库 / MySQL 数据库 |
| Vercel Blob Storage | CloudBase 云存储 |
模块一:静态托管
CloudBase 静态网站托管:内置 CDN、HTTPS、SPA Fallback、HTTP 响应头、路由规则。控制台在「静态网站托管」。
1. 纯静态站点(Vite / Vue / React / Svelte / Astro / Hugo)
适用:构建产物是纯 HTML/CSS/JS,不依赖 Vercel Functions
# 安装 CLI
npm install -g @cloudbase/cli
# 登录
tcb login
# 一键构建 + 部署(自动检测框架,执行 install → build → 上传 → 路由绑定)
tcb app deploy -e <envId>
# 或指定框架类型
tcb app deploy --framework vite -e <envId>
# 部署到指定子路径 /app
tcb app deploy --deploy-path /app -e <envId>
一行命令替代 Vercel 的 Git 自动部署。
tcb hosting deploy仅适用于上传已构建好的纯静态文件,不是标准应用部署路径。
2. 静态框架部署(Next.js / Nuxt.js / SvelteKit / Astro)
如果使用框架的 静态导出模式(构建产物是纯 HTML/CSS/JS):
| 框架 | 静态导出配置 | 部署命令 |
|---|---|---|
| Next.js | next.config.js 中设置 output: 'export' | tcb app deploy --framework next --output-dir out -e <envId> |
| Nuxt.js | nuxt.config.ts 中设置 ssr: false | tcb app deploy -e <envId> |
| SvelteKit | svelte.config.js 中配置 @sveltejs/adapter-static | tcb app deploy -e <envId> |
| Astro | 默认即为静态(output: 'static') | tcb app deploy -e <envId> |
tcb app deploy会自动检测框架类型并执行install → build → 上传 → 路由绑定。Next.js 因输出目录需显式指定,其他框架会自动识别。
模块二:后端计算(云函数 & 云托管)
Vercel Functions 的替代方案分两个形态:轻量独立 API 用云函数,多路由 / SSR 框架场景用云托管。按复杂度选型即可。
场景速览
| Vercel 用法 | CloudBase 方案 | 适合什么情况 |
|---|---|---|
api/ 下少量独立文件 | 云函数 | API 不多、每个函数独立部署,改动最小 |
api/ 下 5+ 文件或需路由管理 | 云托管(Express/Koa) | 避免函数碎片化,统一路由和中间件 |
| Next.js / Nuxt / SvelteKit / Astro | 云托管(Docker) | 框架自带 SSR 和服务端路由,需容器环境 |
1. 场景一:纯 API 路由 → 云函数
CloudBase 云函数:Node.js / PHP / Python / Golang / Java 运行时、HTTP/定时/数据库触发、最长 900s 超时。控制台在「云函数」。
能力对照
| 对比维度 | Vercel Functions | CloudBase 云函数 |
|---|---|---|
| 运行环境 | Node.js / Go / Python / Ruby | Node.js / PHP / Python / Golang / Java |
| 触发方式 | HTTP 路径自动路由 | HTTP 触发 / 定时触发 / 数据库触发 |
| 路径映射 | api/*.ts → /api/* | 每个函数一个路径 |
| 超时时间 | 10s(Hobby)/ 60s(Pro) | 最长 900s |
| 内存 | 128MB - 3008MB | 256MB - 3072MB |
| 冷启动 | 较快(边缘部署) | 可配置保活(minNum >= 1) |
目录结构迁移
Vercel 项目结构:
api/
hello.ts → /api/hello
users/[id].ts → /api/users/:id
webhook.ts → /api/webhook
CloudBase 云函数结构:
cloudfunctions/
hello/
index.js
package.json
users/
index.js
package.json
提示:
api/下文件数量较多但暂不合并到云托管时,可使用文末「迁移脚本工具」中的batch-migrate-functions.js一键生成上述骨架。
代码示例
Vercel(api/hello.ts):
// api/hello.ts
import type { VercelRequest, VercelResponse } from '@vercel/node'
export default function handler(req: VercelRequest, res: VercelResponse) {
const { name = 'World' } = req.query
res.status(200).json({ message: `Hello, ${name}!` })
}
CloudBase(cloudfunctions/hello/index.js):
// cloudfunctions/hello/index.js
exports.main = async (event, context) => {
const { name = 'World' } = event.queryStringParameters || {}
return {
statusCode: 200,
body: JSON.stringify({ message: `Hello, ${name}!` }),
}
}
提示:API 路由数量超过 5 个时,建议跳转到场景二,用云托管 Express 统一管理路由,避免云函数碎片化。
部署步骤
# Step 1:创建云函数目录
mkdir -p cloudfunctions/hello && cd cloudfunctions/hello
# Step 2:初始化 package.json(云函数必须有)
npm init -y
# Step 3:将上面的 CloudBase 版本代码写入 index.js
# Step 4:部署
tcb fn deploy hello -e <envId>
# Step 5:测试调用
tcb fn invoke hello -e <envId> --params '{"path":"/api/hello","httpMethod":"GET","queryStringParameters":{"name":"CloudBase"}}'
部署完成后在控制台「云函数 → hello」可看运行状态和日志。