项目部署

如果你的电脑是Windows 或者 你不想每次改动后都在本地执行部署命令pnpm cf:deploy，那么请看这篇：项目部署到 Cloudflare Workers（Windows) （也适用于Mac电脑）

写在前面

Cloudflare Workers由于打包大小大于3MB就会报错【由于免费账户（Free plan）的 Worker 脚本（bundle + 压缩后）的最大允许大小是 3 MB】，这个时候就需要购买套餐

1、需要花$5/月 买Cloudflare的套餐，要不然你部署肯定失败，因为打包后大小大于3MB；

2、确定是从cloudfare分支起的项目；

注意1：你用cloudfare分支创建的项目package.json中的"next": "15.5.5", 切记不能升级，因为一旦升级就打包失败，各种诡异问题；

注意2：Mac走的是本地部署推到Cloudflare，所以不要去Cloudflare Workers & Pages 去手动创建Application，咱们是通过终端执行往上部署

设置线上环境变量

在项目根目录创建一个 .env.production 文件。可以手动创建，也可以通过下面的命令创建。

cp .env.example .env.production

把 .env.production 文件中的环境变量值，改成你项目的线上环境真实配置值。（例如：NEXT_PUBLIC_APP_URL取值应该是你线上环境的域名）

// 下面是我的配置给大家做参考（关键值做了xxx替换）

# app
NEXT_PUBLIC_APP_URL = "https://xxxx.16781678.xyz"
NEXT_PUBLIC_APP_NAME = "Nano Banana Pro"

# theme
NEXT_PUBLIC_THEME = "default"

# appearance
NEXT_PUBLIC_APPEARANCE = "system"

# database
DATABASE_URL="postgresql://postgres.qcddhntipxxxilm:xxx@aws-1-us-west-1.pooler.supabase.com:6543/postgres"
DATABASE_PROVIDER = "postgresql"
DB_SINGLETON_ENABLED = "false"
DB_SCHEMA = "public"
DB_MAX_CONNECTIONS = "10"

# auth secret
# 将 `openssl rand -base64 32` 复制粘贴到你的终端然后回车，就会生成一段值，复制粘贴到下面(也可以用你`.env.development`中的该字段值)
AUTH_SECRET = "r0IViW+SoUS/EuFMJaOxxawejxxxxNgXmBsYGnHE="

修改wrangler.toml

在项目根目录通过下面的命令创建wrangler.toml 文件。

cp wrangler.toml.example wrangler.toml

然后修改 wrangler.toml 文件中的内容，根据你的项目在线上部署的情况，修改对应的变量值。

复制上一步设置的 .env.production 文件中的内容，替换掉 wrangler.toml 文件中 [vars] 下面的内容。

name = "nano-banana-pro"
main = ".open-next/worker.js"
compatibility_date = "2025-03-01"
compatibility_flags = ["nodejs_compat"]

[assets]
binding = "ASSETS"
directory = ".open-next/assets"

# [[hyperdrive]]
# binding = "HYPERDRIVE"
# id = ""
# localConnectionString = ""

[observability]
enabled = true

[vars]
# app
NEXT_PUBLIC_APP_URL = "https://xxxx.16781678.xyz"
NEXT_PUBLIC_APP_NAME = "Nano Banana Pro"

# theme
NEXT_PUBLIC_THEME = "default"

# appearance
NEXT_PUBLIC_APPEARANCE = "system"

# database
DATABASE_URL="postgresql://postgres.qcddhntipxxxilm:xxx@aws-1-us-west-1.pooler.supabase.com:6543/postgres"
DATABASE_PROVIDER = "postgresql"
DB_SINGLETON_ENABLED = "false"
DB_SCHEMA = "public"
DB_MAX_CONNECTIONS = "10"

# auth secret
# 将 `openssl rand -base64 32` 复制粘贴到你的终端然后回车，就会生成一段值，复制粘贴到下面(也可以用你`.env.development`中的该字段值)
AUTH_SECRET = "r0IViW+SoUS/EuFMJaOxxawejxxxxNgXmBsYGnHE="

注意：第一次部署时，我们先注释掉 wrangler.toml 文件中的 [[hyperdrive]] 配置，等部署完成后再来设置。Cloudflare Workers 是 Serverless 平台，不支持数据库单例模式，确保设置 DB_SINGLETON_ENABLED = "false"

通过命令行部署项目

在项目根目录下执行以下命令，安装项目依赖。

pnpm install

依赖安装完后，会自动安装 wrangler 命令行工具。

然后在项目根目录下执行以下命令，部署项目到 Cloudflare Workers。

// 注意：这个打包过程大概得持续3-5分钟

pnpm cf:deploy

如果是第一次部署项目到 Cloudflare Workers，命令行会输出 Cloudflare 的授权地址。你需要点击打开链接，在浏览器登录你的 Cloudflare 账户，完成对项目的授权。

授权完成后，部署命令会继续执行，编译项目代码，上传部署文件，最终把你的项目发布到 Cloudflare Workers，并输出预览地址。

下图会自动打开一个页面，然后紧接着 终端需要输入yes

至此，项目已经成功部署到 Cloudflare Workers。打开输出的预览地址，就可以看到项目页面了。

注意： 后续有改动，部署还是这个pnpm cf:deploy 命令

接下来，你可以通过 绑定自定义域名、配置 Hyperdrive 等操作，让项目正式上线运营。

绑定自定义域名

如果你没有域名, 请点击下面

如何购买便宜的域名

第一种：在 Cloudflare 添加自定义域名

如果你的域名是在其他域名服务商（Godaddy、Namecheap 等）注册的，你可以选择在 Cloudflare 添加自定义域名。

这一种主要存在新域名第一次在Cloudflare上配置。

然后去你的域名管理后台，把域名的 NAMESERVER 设置为 Cloudflare 提供的 Nameservers

graham.ns.cloudflare.com
ullis.ns.cloudflare.com

域名托管到 Cloudflare 后，可以使用 Cloudflare 提供的 DNS 解析、SSL 证书、CDN 加速等功能。

第二种：在 Cloudflare Workers 添加自定义域名

进入部署在 Cloudflare Workers 的项目管理页面，进入 Settings -> Domains & Routers 页面，点击 Add 按钮，选择 Custom Domain，输入你的自定义域名（可以是托管在 Cloudflare 的根域名，或者子域名），点击 Add Domain 按钮，添加自定义域名。

访问项目

上一步添加自定义域名后，Cloudflare 会自动为域名添加到 Cloudflare Workers 的 DNS 解析记录。等 DNS 解析生效（一般半小时内生效，最多可能需要 48 小时），就可以通过自定义域名访问你的项目了。

配置 Hyperdrive

Hyperdrive 是一项由 Cloudflare 提供的，用于加速全球用户对现有数据库访问的服务。

通过以下步骤配置 Hyperdrive，加快 Cloudflare Workers 上部署的项目对外部数据库的访问速度。

配置 Hyperdrive

进入 Cloudflare 控制台，在 Storage & databases -> Hyperdrive 页面点击 Create configuration 按钮，创建 Hyperdrive 配置。

在创建 Hyperdrive 配置页面，选择 Connect to public database，然后填入数据库配置信息。

Configuration name ：是给你自己看的配置名称，填什么无所谓。

Connection String ：要填写项目线上环境的数据库连接地址。例如：

// 注意：[your password]换成你的密码，
// db.qcddhntipeafhilqnilm.supabase.co 换成你的（例如上图Supabase截图）
组装示例：postgres://postgres:[your password]@db.qcddhntipeafhilqnilm.supabase.co:5432/postgres

复制 Hyperdrive 配置 ID

在 Hyperdrive 配置管理页面，复制 Hyperdrive 配置 ID。

修改项目配置文件

修改项目根目录下的 wrangler.toml 文件，开启 [[hyperdrive]] 配置，填入 Hyperdrive 配置 ID 和线上环境的数据库连接地址。

[[hyperdrive]]
binding = "HYPERDRIVE"  # 固定值，不要修改（注意：复制后删除 “我加的备注”）

id = "your-hyperdrive-config-id" # 填入上一步复制的 Hyperdrive 配置 ID（注意：复制后删除 “我加的备注”）

localConnectionString = "postgres://user:password@domain:port/database" # 填入数据库连接地址, localConnectionString 只在 dev 生效，线上不会用, 例如：postgres://postgres:[your password]@db.qcddhntipeafhilqnilm.supabase.co:5432/postgres（注意：复制后删除 “我加的备注”）

重新部署项目

在项目根目录下执行以下命令，重新部署项目。

pnpm cf:deploy

重新部署项目后，项目会自动使用 Hyperdrive 加速数据库访问。可以在 Hyperdrive 管理页面，看到数据查询请求的统计信息。

个人建议配置上，我之前有个站配置后 查询返回明显快了很多

如果你怎么配置怎么部署都不好使请看这里

下面是怎么部署都没有hyperdrive

尝试方法1：打开 wrangler.toml

第一行的这个name 必须和下图中名字保持一致（必须是 同一个）

name = "shipany-template-nano-banana"

然后重新pnpm cf:deploy成功后查看Bindings，如果还是没有，尝试方法2

尝试方法2：手动添加

值写死：HYPERDRIVE

点击后（漫长等待部署（按钮置灰 不是卡死）），Cloudflare 会自动将 Hyperdrive 绑定到你的应用，你的代码就可以通过 env.HYPERDRIVE.connectionString 来使用优化后的数据库连接了。

项目会自动使用 Hyperdrive 加速数据库访问。可以在 Hyperdrive 管理页面，看到数据查询请求的统计信息。

Cloudflare Workers 怎么购买套餐（$5 1个月），才能解决打包部署大于3MB报错的问题

登录你的 Cloudflare 账户。

找到 Workers 的订阅／定价（Pricing / Plans）页面 — 通常在 Cloudflare 控制面板里。

选择适合的付费计划（Paid plan）来替换当前 Free plan —— 这样 Worker 的 bundle 大小限制就提升到了 10 MB。

如果 10 MB 仍不够，理论上可以提交「Limit Increase Request Form」请求更高的限制

那我刚买的，现在点击取消，是算一天的，还是算1个月的，如果是1个月，我现在取消，后面这几天还能用么

当你在控制面板里“取消订阅／降级到免费 plan”时，这个取消并 不会立刻生效。也就是说：

• 取消操作只是“设置为不在下一计费周期续费”，当前这个计费周期仍然有效 — 你将继续保有付费 plan 的功能，直到本期结束。
• 他们不会按“天数”结算／退款，也不会因为你提前取消就立刻停止服务或返还剩余天数/费用。
• 所以，如果你刚买不久（例如本月刚开始），现在取消的话 —— 你之后直到这个“当前计费周期结束日”（renewal date）之前，依然可以继续使用付费 plan 的全部功能。

简而言之：取消不会按天结算，也不会失效得马上 — 你付的钱仍算一个完整月，你可以用完这一整月。