Next AI Draw.io 在 Cloudflare Workers 上如何配置 R2 缓存开启 ISR

Next AI Draw.io 在 Cloudflare Workers 上如何配置 R2 缓存开启 ISR【免费下载链接】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-ioNext AI Draw.io 可以通过 OpenNext 适配器部署为 Cloudflare Worker。默认的 Worker 部署不包含 ISRIncremental Static Regeneration缓存只有把增量缓存指向一个 R2 存储桶后Next.js 的 ISR 能力才会在 Cloudflare 上生效。本文按 docs/en/cloudflare-deploy.md 中 Option B: Deploy WITH R2 的路径讲清楚创建 R2 桶、修改 open-next.config.ts 与 wrangler.jsonc 两个配置文件再到部署和验证的完整操作。适用前提均来自部署文档一个 Cloudflare 账号基础 Worker 部署免费层即可Node.js 18R2 功能要求账号绑定支付方式这是开启 ISR 缓存的必要条件OpenNext 和 Wrangler 在原生 Windows 上不够可靠文档建议用 GitHub Codespaces 或 WSLLinux纯 Windows 构建可能因 WASM 文件路径问题失败。准备安装依赖并配置环境变量在仓库根目录执行npm installWrangler CLI 已经作为项目的开发依赖存在package.json 中wrangler为^4.60.0opennextjs/cloudflare为^1.17.1文档要求通过npm install -D wrangler安装的场景适用于项目未包含该依赖的情况本仓库已有跑一次npm install即可。然后用 Wrangler 登录 Cloudflare 账号npx wrangler loginCloudflare 本地测试和部署使用的环境变量文件与 Next.js 开发用的不同需要两份cp env.example .dev.vars.dev.vars用于 Cloudflare 本地预览和部署填入你的 API key 和配置。同时保证.env.local也存在供普通next dev使用cp env.example .env.local两份文件填入相同的值。创建 R2 存储桶在 Cloudflare 控制台进入Storage Databases → R2点击Create bucket桶名设为next-inc-cache。注意文档中的强调后面wrangler.jsonc里的bucket_name必须与控制台里创建的桶名完全一致。配置 open-next.config.ts开启 R2 增量缓存的关键是把 OpenNext 的incrementalCache指向 R2 实现。仓库当前的 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, })如果你的本地文件被改成了不带缓存的空配置defineCloudflareConfig({})那是文档里 Option A不使用 R2的形态需要按上面的代码恢复r2IncrementalCache这一行。配置 wrangler.jsonc 中的 r2_bucketswrangler.jsonc 仓库默认已包含 R2 绑定关键配置如下{ $schema: node_modules/wrangler/config-schema.json, main: .open-next/worker.js, name: next-ai-draw-io-worker, compatibility_date: 2025-12-08, // must be a today or past compatibility_date compatibility_flags: [nodejs_compat, global_fetch_strictly_public], assets: { directory: .open-next/assets, binding: ASSETS }, r2_buckets: [ { binding: NEXT_INC_CACHE_R2_BUCKET, bucket_name: next-inc-cache } ], services: [ { binding: WORKER_SELF_REFERENCE, service: next-ai-draw-io-worker } ] }两点必须核对bucket_namenext-inc-cache与你刚才在控制台创建的桶名完全一致compatibility_date必须是当天或更早的日期仓库注释里已标明这一点。若部署时报Cant set compatibility date in the future就是把它设成了未来日期改成当天或更早即可。注册 workers.dev 子域名仅首次首次部署前需要一个 workers.dev 子域名。两种方式在 Cloudflare 控制台 Workers Pages → Overview 里设置子域名文档推荐CI/CD 等非交互环境下必须走这条路因为命令行提示不会出现在非交互环境或者在首次运行部署命令时Wrangler 可能提示Would you like to register a workers.dev subdomain? (Y/n)输入Y并选择一个子域名名。部署npm run deploy该脚本见 package.json 的 scripts 定义实际执行opennextjs-cloudflare build opennextjs-cloudflare deploy即构建 Next.js 应用、通过 OpenNext 转换为 Cloudflare Worker、上传静态资源并发布。部署完成后应用地址形如https://worker-name.your-subdomain.workers.dev其中worker-name对应 wrangler 配置里的name默认next-ai-draw-io-workeryour-subdomain是你注册的 workers.dev 子域名。用浏览器访问该地址能正常打开页面即说明部署成功。可选部署前先在本地预览 Worker确认构建产物没问题npm run preview部署报错时的对照排查文档列出了与 R2 直接相关的两个报错Please enable R2 through the Cloudflare Dashboardwrangler.jsonc里配置了 R2但账号没有启用 R2需要绑定支付方式。要么在控制台启用 R2要么放弃 ISR 缓存改用不带 R2 的 Option A 配置即去掉r2_buckets并把open-next.config.ts改为defineCloudflareConfig({})。No R2 binding NEXT_INC_CACHE_R2_BUCKET foundwrangler.jsonc缺少r2_buckets段。补上上面给出的r2_buckets配置或改回无 R2 方案。另外两类常见报错You need to register a workers.dev subdomain回到注册子域名一节处理、Windows 下resvg.wasm?module的 ENOENT 错误Windows 文件名不能包含?改在 Linux 环境如 WSL、Codespaces 或 CI 中构建部署。有 R2 与无 R2 的差异文档给出的对照FeatureWithout R2With R2CostFreeRequires payment methodISR CachingNoYesStatic PagesYesYesAPI RoutesYesYesSetup ComplexitySimpleModerate结论与文档一致只做测试或简单应用可以选无 R2需要 ISR 缓存的生产应用选 R2 方案也就是本文路径。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考