切换到 cloudflare 分支

克隆 LandingMore 模板仓库的 cloudflare 分支，并新建 GitHub 仓库，将代码推送到该仓库：

# Clone the cloudflare branch of the LandingMore template repository
git clone -b cloudflare https://github.com/LandingMoreHQ/LandingMore-template.git <your-project-name>
cd <your-project-name>
 
# Add the upstream repository and fetch the latest changes
git remote add upstream https://github.com/LandingMoreHQ/LandingMore-template.git
git fetch upstream
 
# Remove the origin repository and add your new GitHub repository
git remote remove origin
git remote add origin <your-repository-url>
 
# Rename the branch to main and push the changes to the origin repository
git branch -M main
git push -u origin main

安装依赖项

安装所有必需的依赖项，包括 Cloudflare Workers 部署所需的 Wrangler CLI 工具：

pnpm install

安装 Wrangler CLI

安装 Wrangler CLI，然后运行 wrangler login 登录到您的 Cloudflare 账户。

pnpm install -g wrangler
 
# 登录到您的 Cloudflare 账户
wrangler login

设置 Wrangler 配置名称

在 wrangler.jsonc 文件中设置 name 为您的项目名称：

{
  "name": "YOUR-PROJECT-NAME"
}

设置 PostgreSQL 数据库

如果您使用默认的 PostgreSQL 数据库配置，您需要设置一个 PostgreSQL 数据库。

• 对于生产环境，您可以使用托管 PostgreSQL 数据库，如 Neon 或 Supabase。
• 对于本地开发，请参考数据库文档创建本地 PostgreSQL 实例。

准备好 PostgreSQL 数据库后，记下此格式的连接字符串：

postgres://user:password@HOSTNAME_OR_IP_ADDRESS:PORT/database_name

数据库创建完成之后，需要参考数据库文档对数据库进行初始化。

配置本地开发数据库

对于本地开发，使用您的本地 PostgreSQL 连接字符串更新 wrangler.jsonc 文件，替换 localConnectionString 为您实际的本地数据库连接字符串：

{
  "hyperdrive": [
    {
      "binding": "HYPERDRIVE",
      "id": "YOUR_HYPERDRIVE_ID_HERE",
      "localConnectionString": "postgres://user:password@localhost:5432/your_local_database"
    }
  ]
}

配置 Hyperdrive 绑定

Cloudflare Hyperdrive 通过池化连接和缓存请求来加速数据库查询。在创建 Hyperdrive 配置前，建议您在数据库（如 Neon）中为其创建一个专用用户。

1. 在 Neon 中创建一个 Hyperdrive 用户（推荐） 为了安全和管理方便，建议为 Hyperdrive 创建一个独立的数据库角色：

1. 登录 Neon，进入您的项目。
2. 在侧边栏选择 Branches，然后选择要使用的分支。
3. 导航到 Roles & Databases 部分。
4. 点击 New Role，创建一个新角色（例如命名为 hyperdrive-user）。
5. 复制生成的新密码，在下一步的连接字符串中会用到。

2. 获取 Neon 数据库连接字符串

1. 在 Neon 控制台的 Dashboard 页面，找到 Connection Details 面板。
2. 选择正确的 分支、数据库 和刚创建的 角色（例如 hyperdrive-user）。
3. 从下拉菜单中选择 Connection String。
4. 重要：请取消勾选 “Pooled connection” 选项。因为 Hyperdrive 自身会管理连接池，所以这里需要使用直连字符串。
5. 复制生成的连接字符串，格式应类似于：

   postgres://hyperdrive-user:PASSWORD@ep-cool-darkness-123456.us-east-2.aws.neon.tech/dbname

3. 创建 Hyperdrive 配置 执行以下命令，使用上一步获取的连接字符串为您的生产数据库创建 Hyperdrive 配置：

# 如果已有旧配置，可先删除（将 ID 替换为您的实际 Hyperdrive ID）
# pnpm wrangler hyperdrive delete <YOUR_HYPERDRIVE_ID>
 
# 创建新的 Hyperdrive 配置
npx wrangler hyperdrive create <HYPERDRIVE配置名称> --connection-string="postgres://hyperdrive-user:PASSWORD@HOSTNAME:PORT/DATABASE"

将 --connection-string 的参数替换为您从 Neon 获取的实际 PostgreSQL 连接字符串。成功创建后，您将收到一个 Hyperdrive ID，您也可以在 Cloudflare 仪表盘中查看。

4. 更新配置文件 使用您的 Hyperdrive ID 更新 wrangler.jsonc 文件：

{
  "hyperdrive": [
    {
      "binding": "HYPERDRIVE",
      "id": "YOUR_HYPERDRIVE_ID_HERE"
    }
  ]
}

禁用 Hyperdrive 查询缓存

1. 进入到 Cloudflare 仪表盘
2. 导航到 Storage & Databases → Hyperdrive
3. 点击创建的 Hyperdrive 配置，导航到 Settings
4. 点击 Disable Caching

配置环境变量

为开发和生产环境设置环境变量：

1. 对于开发：复制示例文件并配置它们

   cp env.example .env
   cp dev.vars.example .dev.vars

2. 配置变量：按照环境配置文档在 .env 文件中设置所有必需的环境变量，并保持 .dev.vars 不变。

生成类型

配置 .env 和 wrangler.jsonc 文件后，生成 Cloudflare 特定的类型：

pnpm run cf-typegen

此命令将自动生成包含 Cloudflare Worker 运行时环境类型定义的 cloudflare-env.d.ts 文件。

创建 Cloudflare Worker 项目

1. 进入到 Cloudflare 仪表盘
2. 导航到 Compute & AI → Workers and Pages → Create → Import a repository
3. 选择仓库 (默认使用 main 分支)
4. 配置构建设置：
   • 名称：保持与 wrangler.jsonc 文件中的 name 相同
   • 构建命令：留空
   • 部署命令：pnpm run deploy
   • 根目录：保持默认
   • 构建环境变量：添加 NEXT_PUBLIC_BASE_URL 变量，并设置为 https://<your-project-name>.<account>.workers.dev 或自定义域名

配置环境变量

有两种方式在 Cloudflare 中配置环境变量：

1. 在 Cloudflare Worker 项目的后台设置中，配置环境变量

   • 进入 Settings → Variables and Secrets
   • 点击 + Add，并添加所有环境变量
   • 点击 Deploy 保存变量并触发构建和部署

2. 使用 Wrangler CLI 配置环境变量

创建一个 .env.production 文件，并复制 .env 文件中的所有变量，并更新部分环境变量为线上环境变量的值，然后使用 Wrangler CLI 将所有变量配置批量到 Cloudflare Worker 中：

# 创建一个 .env.production 文件，并复制 .env 文件中的所有变量
cp .env .env.production
 
# 更新 .env.production 文件中的环境变量
# 例如，您需要更新 NEXT_PUBLIC_BASE_URL 和 DATABASE_URL 环境变量
 
# 使用 Wrangler CLI 设置环境变量
# https://developers.cloudflare.com/workers/wrangler/commands/#secret-bulk
# 1、如果只是新增一个环境变量，例如 NEXT_PUBLIC_DEMO_WEBSITE，可以执行下面的命令
# echo true | wrangler secret put NEXT_PUBLIC_DEMO_WEBSITE
# 2、如果需要批量设置环境变量，例如快速设置 .env.production 文件中的所有环境变量，可以执行下面的命令
wrangler secret bulk .env.production

部署网站

您可以通过两种方式部署应用程序：

选项 1：自动部署

• 将更改推送到 main 分支 (默认使用 main 分支)
• Cloudflare 将自动触发构建和部署

选项 2：手动部署

• 直接从本地机器部署：

  pnpm run deploy

设置自定义域名

成功部署后，网站将在自动生成的域名上可用。您可以：

• 设置自定义域名，Cloudflare 将自动为您创建 DNS 记录
• 在 Cloudflare 仪表盘中监控网站，如流量和日志