📦 C.R.A.B Deploy Agent — 全栈应用多步骤部署代理

通过多步骤工作流部署全栈应用程序，在每个阶段都需要人工审批。

快速开始

# 通过 ClawdHub 安装
clawdhub install deploy-agent
# 初始化新部署
deploy-agent init my-app
# 检查状态
deploy-agent status my-app
# 继续执行步骤
deploy-agent continue my-app

工作流步骤

命令

初始化部署

deploy-agent init my-app

创建新的部署状态并等待设计输入。

检查状态

deploy-agent status my-app

显示当前步骤、审批信息和部署详情。

继续

deploy-agent continue my-app

获取当前步骤的下一步操作指导。

构建（第 2 步）

deploy-agent build my-app

使用 C.R.A.B 设计完成后，运行此命令构建应用。

测试（第 3 步）

deploy-agent test my-app

在推送之前验证应用是否在本地正常运行。

推送到 GitHub（第 4 步）

deploy-agent push my-app [repo-name]

创建 GitHub 仓库并推送代码。默认仓库名称 = 应用名称。

部署到 Cloudflare（第 5 步）

deploy-agent deploy my-app [custom-domain]

部署到 Cloudflare Pages。默认域名：{name}.sheraj.org

取消

deploy-agent cancel my-app

中止并清理部署。

列表

deploy-agent list

显示所有活动部署。

示例会话

# 开始新部署
$ deploy-agent init my-blog
🚀 Deployment initialized: my-blog
Step 1: Design your app with C.R.A.B
# ... 使用 C.R.A.B 进行设计阶段 ...
$ deploy-agent build my-blog
🚀 Build complete!
Step 2: Local Testing
Start dev server: cd my-blog && npm run dev
# ... 本地测试 ...
$ deploy-agent push my-blog
🚀 GitHub repository ready!
Say 'deploy-agent deploy my-blog' to deploy to Cloudflare
$ deploy-agent deploy my-blog my-blog.sheraj.org
🎉 Deployment complete!
App live at: https://my-blog.sheraj.org

状态管理

状态存储在：~/.clawdbot/skills/deploy-agent/state/{deployment-name}.json

{
  "name": "my-blog",
  "step": 5,
  "status": "deployed",
  "created_at": "2026-01-18T08:00:00Z",
  "repo_url": "https://github.com/user/my-blog",
  "domain": "https://my-blog.sheraj.org"
}

需求

配置

Cloudflare 令牌应在 ~/.wrangler.toml 中配置：

[account]
api_token = "your-cloudflare-token"

注意事项

• 每个部署都是独立的
• 状态在会话之间持久保存
• 每个主要步骤都需要人工审批
• 随时可以使用 "cancel" 中止

Next.js + Cloudflare D1 部署指南

本节介绍在 Cloudflare Pages 上部署 Next.js 应用与 D1 时的常见陷阱和修复方法。

部署前检查清单

必需配置

1. package.json

{
  "dependencies": {
    "next": "15.5.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@cloudflare/next-on-pages": "^1.13.16",
    "wrangler": "^4.x"
  }
}

2. wrangler.toml

name = "my-app"
compatibility_date = "2026-01-18"
compatibility_flags = ["nodejs_compat"]
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "your-db-id"

3. API 路由（每个文件）

import { getRequestContext } from '@cloudflare/next-on-pages';
export const runtime = 'edge';
export async function GET() {
  const { env } = getRequestContext();
  const { results } = await env.DB.prepare("SELECT * FROM tasks").all();
  return Response.json({ data: results });
}

Cloudflare Pages 构建设置

常见问题与修复

CSS 修复（滚动条闪烁）

html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
body {
  overflow-x: hidden;
}

部署后

• Cloudflare Dashboard → Settings → Functions
• 添加 D1 绑定：变量名 DB → 选择你的数据库

参考文档

• 完整指南：docs/issues/nextjs-cloudflare-d1-deployment.md
• Cloudflare 文档：https://developers.cloudflare.com/pages/framework-guides/nextjs/