跳转到内容
搜索文档

从 Vercel 迁移到 Pages

最后更新 查看 MarkdownAgent 设置

在本教程中,你将学习如何将 Vercel 应用部署到 Cloudflare Pages。

你应已有一个部署在 Vercel 上的现有项目,并希望将其托管到 Cloudflare Pages。Vercel 的无服务器函数等功能目前在 Cloudflare Pages 中尚不支持。

查找构建命令和构建目录

要将应用迁移到 Cloudflare Pages,你需要找到构建命令和构建目录。Cloudflare Pages 将使用这些信息来构建并部署你的应用。

在 Vercel 仪表板中,找到要部署的项目。该项目应已配置为从 GitHub 仓库部署。

在 Vercel 仪表板中选择站点

在站点仪表板中,选择 Settings(设置),然后选择 General(常规)

在站点仪表板中选择 Site Settings

找到 Build & Development settings(构建和开发设置) 面板,其中包含 Build Command(构建命令)Output Directory(输出目录) 字段。若使用框架,这些值可能未填写,但会显示框架使用的默认值。请保存这些信息以便部署到 Cloudflare Pages。在下图中,Build Command(构建命令)npm run buildOutput Directory(输出目录)build

查找 Build Command 和 Output Directory 字段

创建新的 Pages 项目

找到构建目录和构建命令后,即可将项目迁移到 Cloudflare Pages。

快速入门指南 将指导你如何将 GitHub 项目添加到 Cloudflare Pages。

添加自定义域

接下来,为 Pages 项目连接 自定义域。该域名应与当前部署在 Vercel 上的应用使用的域名相同。

更改域名 nameserver

在大多数情况下,你需要 将域名添加到 Cloudflare

这需要更改域名的 nameserver,但可以简化 Pages 设置,并允许你为项目使用 apex 域(如 example.com)。

若希望采用其他方式,请参阅 自定义域 了解更多信息。

设置自定义域

要添加自定义域名:

  1. 在 Cloudflare 仪表板中,前往 Workers & Pages 页面。

    Go to Workers & Pages ↗
  2. 选择你的 Pages 项目 > Custom domains

  3. 选择 Set up a domain(设置域名)

  4. 输入你希望用于 Cloudflare Pages 站点的域名,然后选择 Continue(继续)

通过 Cloudflare 仪表板为 Pages 项目添加自定义域名

后续步骤取决于你是否 将域名添加到 Cloudflare

  • 已添加到 Cloudflare:Cloudflare 将自动完成所有设置,域名将变为 Active 状态。
  • 未添加到 Cloudflare:你需要在 DNS 提供商处 更新一些 DNS 记录 以完成设置。

删除 Vercel 应用

自定义域设置完成并将请求发送到 Cloudflare Pages 后,即可安全删除 Vercel 应用。

故障排除

Cloudflare 不会为 Pages 项目提供 IP 地址,因为我们不需要 AAAAA 记录来将域名关联到项目。Cloudflare 使用 CNAME 记录。

更多详情,请参阅 自定义域

这篇文档对您有帮助吗?