在本教程中,你将学习如何将 Vercel 应用部署到 Cloudflare Pages。
你应已有一个部署在 Vercel 上的现有项目,并希望将其托管到 Cloudflare Pages。Vercel 的无服务器函数等功能目前在 Cloudflare Pages 中尚不支持。
要将应用迁移到 Cloudflare Pages,你需要找到构建命令和构建目录。Cloudflare Pages 将使用这些信息来构建并部署你的应用。
在 Vercel 仪表板中,找到要部署的项目。该项目应已配置为从 GitHub 仓库部署。
在站点仪表板中,选择 Settings(设置),然后选择 General(常规)。
找到 Build & Development settings(构建和开发设置) 面板,其中包含 Build Command(构建命令) 和 Output Directory(输出目录) 字段。若使用框架,这些值可能未填写,但会显示框架使用的默认值。请保存这些信息以便部署到 Cloudflare Pages。在下图中,Build Command(构建命令) 为 npm run build,Output Directory(输出目录) 为 build。
找到构建目录和构建命令后,即可将项目迁移到 Cloudflare Pages。
快速入门指南 将指导你如何将 GitHub 项目添加到 Cloudflare Pages。
接下来,为 Pages 项目连接 自定义域。该域名应与当前部署在 Vercel 上的应用使用的域名相同。
在大多数情况下,你需要 将域名添加到 Cloudflare。
这需要更改域名的 nameserver,但可以简化 Pages 设置,并允许你为项目使用 apex 域(如 example.com)。
若希望采用其他方式,请参阅 自定义域 了解更多信息。
要添加自定义域名:
-
在 Cloudflare 仪表板中,前往 Workers & Pages 页面。
Go to Workers & Pages ↗ -
选择你的 Pages 项目 > Custom domains。
-
选择 Set up a domain(设置域名)。
-
输入你希望用于 Cloudflare Pages 站点的域名,然后选择 Continue(继续)。
后续步骤取决于你是否 将域名添加到 Cloudflare:
- 已添加到 Cloudflare:Cloudflare 将自动完成所有设置,域名将变为
Active状态。 - 未添加到 Cloudflare:你需要在 DNS 提供商处 更新一些 DNS 记录 以完成设置。
自定义域设置完成并将请求发送到 Cloudflare Pages 后,即可安全删除 Vercel 应用。
Cloudflare 不会为 Pages 项目提供 IP 地址,因为我们不需要 A 或 AAAA 记录来将域名关联到项目。Cloudflare 使用 CNAME 记录。
更多详情,请参阅 自定义域。