Cloudflare

切换到 Cloudflare 分支

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

# Clone the cloudflare branch of the MkSaaS template repository
git clone -b cloudflare https://github.com/MkSaaSHQ/mksaas-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/MkSaaSHQ/mksaas-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

安装依赖项

安装所有必需的依赖项，包括 Wrangler CLI：

pnpm install

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

安装 Wrangler CLI

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

pnpm install -g wrangler

# 登录到您的 Cloudflare 账户
wrangler login

设置 PostgreSQL 数据库

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

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

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

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

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

配置本地开发数据库

对于本地开发，使用您的本地 PostgreSQL 连接字符串更新 wrangler.jsonc 文件：

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

将 localConnectionString 替换为您的实际本地数据库连接字符串。

配置 Hyperdrive 绑定

Hyperdrive 通过池化连接和缓存请求来加速数据库查询。执行以下命令为您的生产数据库创建 Hyperdrive 配置：

npx wrangler hyperdrive create <NAME_OF_HYPERDRIVE_CONFIG> --connection-string="postgres://user:password@HOSTNAME_OR_IP_ADDRESS:PORT/database_name"

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

使用您的 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 不变。

设置 Wrangler 配置名称

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

{
  "name": "your-project-name"
}

生成类型

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

pnpm run cf-typegen

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

创建 Cloudflare Worker 项目

1. 进入到 Cloudflare 仪表盘
2. 导航到 Compute(Workers) → 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
# 将 .env.production 文件中的所有变量设置为 Cloudflare Worker 的构建环境变量
wrangler secret bulk .env.production

部署网站

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

选项 1：自动部署

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

选项 2：手动部署

• 直接从本地机器部署：

  pnpm run deploy

设置自定义域名

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

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