Astro的EdgeOne + Vercel 双部署教程

前言

很多博主都希望自己的博客能够在国内外都有不错的访问速度。本文将教你如何将 Astro 博客同时部署到 EdgeOne Pages 和 Vercel 两个平台，实现双线部署。

为什么要双部署？

• 高可用性：一个平台出问题时，另一个可以作为备用
• 访问速度：不同地区的用户可以选择访问更快的线路
• EdgeOne：腾讯云的边缘计算平台，国内访问速度快
• Vercel：国际知名的前端部署平台，海外访问速度快

前置准备

在开始之前，你需要：

1. 一个 GitHub 账号（用于托管代码）
2. 一个 Vercel 账号（可用 GitHub 直接登录）
3. 一个腾讯云账号（用于 EdgeOne Pages）
4. 本地已安装 Node.js 和 pnpm

第一部分：理解配置原理

环境变量切换机制

项目通过环境变量 DEPLOY_TARGET 来决定使用哪个部署适配器：

// astro.config.ts 中的关键代码
const deployTarget = process.env.DEPLOY_TARGET || 'edgeone'

const getAdapter = () => {
  if (deployTarget === 'vercel') {
    return vercel()
  }
  return edgeoneAdapter({
    outDir: '.edgeone',
  })
}

• 当 DEPLOY_TARGET=vercel 时，使用 Vercel 适配器
• 当 DEPLOY_TARGET=edgeone 或未设置时，使用 EdgeOne 适配器

第二部分：部署到 Vercel

2.1 注册 Vercel 账号

1. 访问 vercel.com
2. 点击右上角 “Sign Up”
3. 选择 “Continue with GitHub”（推荐，最方便）
4. 授权 Vercel 访问你的 GitHub 账号

2.2 导入项目

1. 登录 Vercel 后，点击 “Add New…” → “Project”
2. 在 “Import Git Repository” 中找到你的博客仓库
3. 点击 “Import”

2.3 配置构建设置

在导入项目页面，你需要配置以下内容：

Framework Preset: 选择 Astro

Build and Output Settings:

• Build Command: pnpm build
• Output Directory: .vercel/output（Vercel 会自动处理）
• Install Command: pnpm install

Environment Variables（重要！）:

点击 “Environment Variables” 展开，添加以下变量：

如果你的项目还需要其他环境变量（如 API 密钥等），也在这里添加。

2.4 部署

1. 确认所有配置无误后，点击 “Deploy”
2. 等待构建完成（通常需要 2-5 分钟）
3. 构建成功后，Vercel 会给你一个 .vercel.app 的域名

2.5 配置自定义域名（可选）

1. 进入项目 Settings → Domains
2. 输入你的域名，点击 “Add”
3. 按照提示在你的域名 DNS 中添加 CNAME 记录
4. 等待 DNS 生效（通常几分钟到几小时）

第三部分：部署到 EdgeOne Pages

3.1 开通 EdgeOne Pages

1. 登录 腾讯云控制台
2. 搜索 “EdgeOne” 或 “边缘安全加速平台”
3. 进入 EdgeOne 控制台
4. 在左侧菜单找到 “Pages” 或 “边缘函数”

3.2 创建项目

1. 点击 “创建项目” 或 “新建”
2. 选择 “从 Git 导入”
3. 授权连接你的 GitHub 账号
4. 选择你的博客仓库

3.3 配置构建设置

框架预设: 选择 Astro

构建配置:

• 构建命令: pnpm build
• 输出目录: .edgeone
• 安装命令: pnpm install

环境变量:

注意：EdgeOne 是默认适配器，所以这个环境变量其实可以不设置，但为了清晰起见，建议还是加上。

3.4 部署

1. 点击 “部署” 或 “开始构建”
2. 等待构建完成
3. 构建成功后会获得一个 EdgeOne 提供的域名

3.5 配置自定义域名（可选）

1. 在项目设置中找到 “域名管理”
2. 添加你的自定义域名
3. 按照提示配置 DNS 解析
4. 等待生效

第四部分：自动部署配置

Git 推送自动触发

两个平台都支持 Git 推送自动部署：

• 当你 git push 到 main 分支时
• Vercel 和 EdgeOne 都会自动检测到更新
• 各自触发构建和部署

分支部署策略

你可以配置不同分支部署到不同环境：

第五部分：常见问题

Q1: 构建失败怎么办？

1. 查看构建日志，找到错误信息
2. 常见原因：
   • 环境变量未设置
   • Node.js 版本不兼容
   • 依赖安装失败

解决方案：

• 确保设置了 DEPLOY_TARGET 环境变量
• 在平台设置中指定 Node.js 版本（推荐 18.x 或 20.x）
• 检查 pnpm-lock.yaml 是否已提交

Q2: 两个平台构建结果不一致？

确保两个平台的环境变量完全一致（除了 DEPLOY_TARGET）。

Q3: 如何只部署到一个平台？

• 只部署 Vercel：在 EdgeOne 中暂停自动部署
• 只部署 EdgeOne：在 Vercel 中暂停自动部署

Q4: 域名如何分配？

推荐方案：

• 主域名（如 example.com）→ EdgeOne（国内访问快）
• 备用域名（如 intl.example.com）→ Vercel（海外访问快）

或者使用智能 DNS 解析，根据用户地理位置自动选择。

第六部分：本地测试

在部署前，你可以在本地测试两种构建：

# 测试 EdgeOne 构建
pnpm build

# 测试 Vercel 构建
DEPLOY_TARGET=vercel pnpm build

Windows 用户使用：

$env:DEPLOY_TARGET="vercel"; pnpm build

总结

完成以上步骤后，你的博客就实现了双部署：

1. ✅ 每次推送代码，两个平台自动构建
2. ✅ EdgeOne 服务国内用户
3. ✅ Vercel 服务海外用户
4. ✅ 互为备份，高可用

如有问题，欢迎在评论区反馈！