2.使用 Cloudflare Pages 部署项目

使用 Cloudflare Pages 部署项目

本指南将帮助你使用 GitHub 仓库在 Cloudflare Pages 上部署你的项目。

修改 wrangler.toml 文件,将 name 设置为你的项目名称(如:game-launch-boost)需要使用英文名称

前置条件

  • 一个 GitHub 账号
  • 一个 Cloudflare 账号
  • 需要部署的项目代码已推送到 GitHub 仓库

部署步骤

1. 登录 Cloudflare

访问 Cloudflare 控制台,使用你的账号注册 / 登录。

2. 创建新的 Pages 项目

创建项目1

  1. 在左侧菜单中选择 “Pages”
  2. 点击 “创建项目” 按钮
  3. 选择 “连接到 Git” 选项

创建项目

3. 连接 GitHub 仓库

  1. 点击 “连接 GitHub” 按钮
  2. 授权 Cloudflare 访问你的 GitHub 账号
  3. 选择要部署的仓库

连接 GitHub

4. 配置构建设置

构建设置

  1. 选择项目的构建设置:
    • 项目名称
    • 生产分支(通常是 mainmaster
    • 构建命令: pnpm install && pnpm run pages:build && pnpm next-sitemap
    • 构建输出目录: .vercel/output/static

5. 开始部署

  1. 点击 “保存并部署” 按钮
  2. Cloudflare 将自动开始构建和部署你的项目
  3. 等待部署完成

查看部署结果

部署完成后,你可以:

  1. 通过分配的 *.pages.dev 域名访问你的网站
  2. 在 Pages 仪表板中查看部署历史和状态
  3. 设置自定义域名(如需要)

自动部署

设置完成后,每当你推送代码到 GitHub 仓库的指定分支时,Cloudflare Pages 将自动触发新的部署。

常见问题

构建失败怎么办?

  1. 检查构建日志中的错误信息
  2. 确认构建命令和输出目录配置正确
  3. 验证项目依赖是否完整

如何设置环境变量?

  1. 在项目设置中找到 “环境变量” 选项
  2. 添加需要的环境变量
  3. 选择变量适用的部署环境(生产/预览)