Next AI Draw.io 如何部署到 Cloudflare Workers 并注册 workers.dev 子域名

Next AI Draw.io 如何部署到 Cloudflare Workers 并注册 workers.dev 子域名

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io

把 Next AI Draw.io 发布到 Cloudflare Workers 上，最终得到的是一个可通过https://<worker-name>.<你的子域名>.workers.dev访问的在线应用。整个流程依赖 OpenNext 适配器（@opennextjs/cloudflare）把 Next.js 应用转换成 Worker，再用 Wrangler 发布。开始前需要满足以下条件：

• 一个 Cloudflare 账户（免费版即可完成基本部署；只有启用 R2 做 ISR 缓存才需要绑定支付方式）；
• Node.js 18+；
• Wrangler CLI（项目已将wrangler列入 devDependencies，执行npm install后即可使用）；
• 构建环境为 Linux 或 macOS。原生 Windows 上 OpenNext 和 Wrangler 不完全可靠（WASM 文件路径问题可能导致构建失败），文档建议使用 GitHub Codespaces 或 WSL (Linux)。

完整的官方说明见 docs/en/cloudflare-deploy.md（中文版本见 docs/cn/cloudflare-deploy.md）。

登录 Cloudflare 并安装依赖

在仓库根目录安装依赖，Wrangler CLI 会作为开发依赖一并安装：

npm install

然后用 Wrangler 登录 Cloudflare 账户：

npx wrangler login

登录成功后才能在后续步骤中上传静态资源并发布 Worker。

配置环境变量

Cloudflare 的本地测试与部署使用.dev.vars作为环境变量文件，而常规 Next.js 开发使用.env.local。按文档要求两个文件都要创建：

# 用于 Cloudflare 本地调试 + 部署 cp env.example .dev.vars # 用于常规 Next.js 开发 cp env.example .env.local

两个文件填入相同的值。env.example 中包含 AI Provider 配置项，例如AI_PROVIDER（默认bedrock）、AI_MODEL（必填，可逗号分隔多个模型 ID，第一个为默认模型），以及各供应商的 API Key 等可选配置。应用能调用 AI 生成图表的前提是在这里填好对应的模型与密钥。

选择部署类型：不带 R2 或带 R2

这一步决定两个配置文件的内容：open-next.config.ts 和 wrangler.jsonc。

主路径：不带 R2（免费、配置最简单）

如果不需要 ISR 缓存，open-next.config.ts使用空配置即可：

import { defineCloudflareConfig } from "@opennextjs/cloudflare/config" export default defineCloudflareConfig({})

wrangler.jsonc中去掉r2_buckets字段：

{ "$schema": "node_modules/wrangler/config-schema.json", "main": ".open-next/worker.js", "name": "next-ai-draw-io-worker", "compatibility_date": "2025-12-08", "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"], "assets": { "directory": ".open-next/assets", "binding": "ASSETS" }, "services": [ { "binding": "WORKER_SELF_REFERENCE", "service": "next-ai-draw-io-worker" } ] }

注意compatibility_date必须是当天或过去的日期，仓库中的 wrangler.jsonc 里也有一条注释强调这一点。

可选分支：带 R2（完整 ISR 支持）

R2 开启 Next.js 的增量静态再生（ISR）缓存，需要在 Cloudflare 账户中绑定支付方式。

1. 在 Cloudflare 控制台创建 R2 存储桶：进入Storage & Databases → R2，点击Create bucket，命名为next-inc-cache。
2. open-next.config.ts启用 R2 增量缓存：

import { defineCloudflareConfig } from "@opennextjs/cloudflare/config" import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache" export default defineCloudflareConfig({ incrementalCache: r2IncrementalCache, })

3. wrangler.jsonc中加入r2_buckets段：

"r2_buckets": [ { "binding": "NEXT_INC_CACHE_R2_BUCKET", "bucket_name": "next-inc-cache" } ]

bucket_name必须与控制台中创建的桶名完全一致。

需要说明的是：当前仓库中这两个文件正处于带 R2 的配置状态（wrangler.jsonc 含r2_buckets，open-next.config.ts 启用了r2IncrementalCache）。如果你的账户没有启用 R2，要么按上文切换到不带 R2 的配置，要么先启用 R2，否则部署时会报 R2 相关错误（见后文排查章节）。

两种方案的差异如下（摘自部署文档）：

文档的建议是：测试或简单应用选不带 R2；需要 ISR 缓存的生产应用选带 R2。

注册 workers.dev 子域名（仅首次部署需要）

首次部署前，账户下必须有一个 workers.dev 子域名，有两种注册方式：

方式一：通过 Cloudflare 控制台（推荐）

登录 Cloudflare 控制台，进入Workers & Pages → Overview → Set up a subdomain，按提示完成注册。

方式二：在部署过程中注册

运行npm run deploy时，Wrangler 可能会提示：

Would you like to register a workers.dev subdomain? (Y/n)

输入Y并选择子域名名称即可。

注意：在 CI/CD 或非交互式环境中这个提示不会出现，这类环境应提前通过控制台注册子域名。

执行部署并验证结果

如果想在部署前先在本地预览 Worker（可选）：

npm run preview

该脚本执行opennextjs-cloudflare build && opennextjs-cloudflare preview。确认无误后执行正式部署：

npm run deploy

package.json 中该脚本对应opennextjs-cloudflare build && opennextjs-cloudflare deploy，一次完成四件事：构建 Next.js 应用、通过 OpenNext 转换成 Cloudflare Worker、上传静态资源、发布 Worker。

部署完成后，应用可通过以下地址访问：

https://<worker-name>.<your-subdomain>.workers.dev

使用默认配置时 worker 名为next-ai-draw-io-worker，即https://next-ai-draw-io-worker.<your-subdomain>.workers.dev。浏览器打开该地址能看到应用页面，即表示发布成功；打不开时对照下面的报错表逐项检查。

常见报错与修复

部署文档列出了以下几种报错现象及对应处理：

• You need to register a workers.dev subdomain：账户下没有注册 workers.dev 子域名。到控制台的Workers & Pages → Set up a subdomain注册后重新部署。
• Please enable R2 through the Cloudflare Dashboard：wrangler.jsonc里配置了 R2，但账户尚未启用该功能。要么在控制台启用 R2（需要支付方式），要么改用不带 R2 的配置。
• No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found：wrangler.jsonc缺少r2_buckets配置。补上r2_buckets段，或改用不带 R2 的配置。
• Can't set compatibility date in the future：compatibility_date被设成了未来日期。改成当天或更早的日期。
• Windows 报错resvg.wasm?module(ENOENT)：Windows 文件名不能包含?，而某个 wasm 资源文件名中带有?module。在 Linux 环境（WSL、Codespaces 或 CI）上执行构建与部署。

部署完成后的地址和限制就到此为止：不带 R2 的部署是免费的，但没有 ISR 缓存；带 R2 的部署有 ISR 缓存，前提是账户已启用 R2 且桶名与bucket_name完全一致。

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io