Home
Perfecto的头像

Perfecto

解决国内访问延迟：使用 EdgeOne Pages 部署 VitePress 静态站点

1322字 6.6分钟 云服务与边缘计算

背景

我的域名一直托管在 Cloudflare 上，平时的习惯是使用 Vercel 进行部署，然后在 Cloudflare 上添加一条 DNS 配置就搞定了。 今天新写了一个项目，想尝试使用 EdgeOne Pages 平台来部署，主要是看中了其在国内访问延迟更低的优势。

EdgeOne Pages

EdgeOne Pages 是基于 边缘安全加速平台 EO（Tencent Cloud EdgeOne） 基础设施打造的前端开发和部署平台，专为现代 Web 开发设计，帮助开发者快速构建、部署静态站点和无服务器应用。通过集成边缘函数能力，实现高效的内容交付和动态功能扩展，支持全球用户的快速访问。

产品定位与技术背景

腾讯云 EdgeOne Pages 是基于全球边缘节点网络构建的 全栈式 Web 应用部署平台，对标 Cloudflare Pages + Workers 组合能力。作为国内首个一站式边缘安全加速平台的重要组件，其核心优势在于：

  • 国内合规性：域名无需备案即可部署，证书自动签发
  • 全球加速网络：依托腾讯云全球 2800+ 边缘节点，境内访问速度碾压 Cloudflare Pages
  • Serverless 融合架构：集成边缘函数（Pages Functions）、KV 存储、动态路由等能力
  • 简化部署：高效的部署流程缩短从代码编写到部署上线的时间，保证项目的快速迭代，帮助企业迅速应对市场需求。
  • 边缘 Serverless：无需配置和管理服务器等基础设施，通过 JS 在靠近用户的边缘节点编写超低延时的服务端逻辑。
  • 畅享功能：公测期间可全面使用所有功能，享受免费、稳定的服务，未来将持续迭代，满足开发者更多高级特性需求。

适用场景

  • 静态与动态网站托管：适合使用静态生成器，如 Next.js、Hexo 等构建的网站，以及使用 React、Vue、Astro 等现代前端框架构建的单页应用。
  • 全栈项目开发：通过支持 Pages Functions 、KV 等能力，开发者可以在不依赖传统服务器情况下，在边缘实现轻量化的动态服务。
  • 快速部署与迭代：通过 GitHub 等代码管理平台集成，在每次代码提交时自动构建和部署网站，简化开发部署流程，提升研发效率。

静态站点托管对比（VS Cloudflare Pages）

实操过程

选型思考

我之前部署个人网站的惯用方案是：

  • GitHub： 管理代码
  • Vercel： 自动构建部署
  • Cloudflare： 管理域名、DNS 解析及边缘计算加速

Vercel 的优势在于对 Next.js 等全栈框架的支持非常好，服务端渲染（SSR）顺手拈来。但在国内网络环境下，访问速度有时不尽如人意。这次我整理了 11 月份的 50 多场面试记录，打算做一个独立的静态站点（SSG）方便分享。考虑到主要是静态内容，EdgeOne Pages 的低延迟特性非常适合，虽然它目前对复杂 SSR 的支持不如 Vercel 那么“傻瓜式”，但对于 VitePress 这种静态站点生成器来说绰绰有余。

部署步骤

第一步：导入项目

访问 EdgeOne 控制台，导入 GitHub 仓库，选择对应的构建框架（VitePress），输入构建命令。构建成功后，系统会分配一个临时域名供预览。

第二步：配置自定义域名

为了能永久访问，我们需要配置自己的域名。 在项目设置中添加域名，系统会提示配置 CNAME，这里先别急着操作 DNS，需要先完成归属权验证。

提示配置 CNAME，不要急

第三步：验证域名归属权

EdgeOne 需要证明这个域名属于你才会允许接入。

  1. 复制 EdgeOne 提供的验证信息。
  2. 登录 Cloudflare 控制台，进入 DNS 记录页面。
  3. 添加一条 TXT 记录，填入刚才复制的内容。
  4. 回到 EdgeOne 点击验证，通过后即可进行下一步。

第四步：配置 CNAME 与流量切换（关键）

这是最核心的一步，需要将流量从 Cloudflare 引流到 EdgeOne。

  1. 在 Cloudflare 的 DNS 记录中，添加一条 CNAME 记录，指向 EdgeOne 提供的域名。
  2. 关键操作： 务必将 Cloudflare 的 Proxy status（代理状态） 设置为 DNS Only（仅 DNS），即图标变为 灰色云朵。

⚠️ 注意： 如果开启了“橙色云朵”（Proxied），流量路径会变成 用户 -> Cloudflare -> EdgeOne -> 源站。这不仅会导致双重 CDN 减速，还极易引发 SSL 握手错误（Error 520/522）。为了让 EdgeOne 正常接管流量及证书，必须使用灰云模式。

第五步：验证与完成

此时流量已经流向 EdgeOne，回到 EdgeOne 项目设置页面，点击“验证”。看到 DNS 状态变为“已验证”后，点击操作栏的“部署”按钮，稍等片刻即可生效。

后续计划

至此，基于 EdgeOne 的边缘加速部署已经完成。下一步我计划将构建流程集成到 GitHub Actions 中，实现更灵活的 CI/CD 控制，确保每次代码更新都能丝滑地触发 EdgeOne 的自动部署。

云服务与边缘计算