从零学 Nuxt 全栈(6)：NuxtHub 与 Cloudflare - Serverless 全栈部署

恭喜你来到系列的最后一篇！

经过前面六篇的学习，你已经掌握了：

• 前端基础 (HTML/CSS/JS/Node.js)
• Vue 3 (响应式/组件/通信)
• Nuxt (SSR/路由/Server API)
• 数据获取与状态管理

现在，让我们来看看 Atidraw 最后的秘密武器：NuxtHub。

什么是 NuxtHub？

NuxtHub 是 Nuxt 团队推出的一站式全栈平台，让你可以零配置使用 Cloudflare 的各种服务：

类比 Spring Cloud

就像 Spring Cloud 帮你对接 AWS/GCP 的各种服务，NuxtHub 帮你无缝对接 Cloudflare。

区别在于：NuxtHub 本地开发时会模拟这些服务，你不需要真的配置 Cloudflare 账号就能开发测试。

hub:blob - 对象存储

在 Atidraw 中，用户上传的画作存储在 Cloudflare R2（兼容 S3 的对象存储）。

启用

在 nuxt.config.ts 中：

export default defineNuxtConfig({
  hub: {
    blob: true,  // 就这一行！
  },
})

使用

// server/api/upload.post.ts
import { blob, ensureBlob } from 'hub:blob'

// 上传文件
await blob.put('drawings/image.jpg', fileBuffer, {
  contentType: 'image/jpeg',
  customMetadata: {
    userId: '123',
    userName: 'Louis',
  },
})

// 列出文件
const { blobs } = await blob.list({
  prefix: 'drawings/',
  limit: 20,
})

// 读取文件信息
const info = await blob.head('drawings/image.jpg')

// 删除文件
await blob.del('drawings/image.jpg')

类比 Spring + S3

区别是：NuxtHub 不需要配置 Access Key，本地开发自动使用内存/文件模拟，部署到 Cloudflare 后自动使用真正的 R2。

hubAI - 调用 AI 模型

Atidraw 的另一个亮点是使用 AI 生成”升华”画作。NuxtHub 集成了 Cloudflare Workers AI。

使用

// server/api/upload.post.ts
import { generateText } from 'ai'

// 1. 用 Vision 模型描述画作
const { text } = await generateText({
  model: hubAI('openai/gpt-5-nano'),
  prompt: [{
    role: 'user',
    content: 'Describe this drawing in one sentence.',
  }, {
    role: 'user',
    content: [{ type: 'image', image: drawingArrayBuffer }],
  }],
})

// 2. 用图像生成模型增强画作
const result = await generateText({
  model: hubAI('google/gemini-3-pro-image'),
  providerOptions: {
    google: { responseModalities: ['TEXT', 'IMAGE'] },
  },
  messages: [{
    role: 'user',
    content: [
      { type: 'text', text: 'Generate a more detailed and beautiful drawing...' },
      { type: 'image', image: drawingArrayBuffer },
    ],
  }],
})

const generatedImage = result.files[0]  // 获取生成的图片

hubAI() 是 NuxtHub 封装的 AI 模型工厂，自动处理 Cloudflare Workers AI 的认证和调用。

可用模型

Cloudflare Workers AI 提供了丰富的模型：

部署到 Cloudflare

传统部署流程：

1. 配置服务器 / 容器
2. 设置环境变量
3. 配置数据库连接
4. 配置对象存储 Access Key
5. …

NuxtHub 部署流程：

1. npx nuxthub deploy
2. 没了

本地预览生产环境

bun run build    # 构建
bun run preview  # 本地预览生产版本

部署

npx nuxthub deploy

首次部署会引导你连接 Cloudflare 账号。之后就是一行命令的事。

开发体验总结

让我们回顾一下，用 NuxtHub 开发全栈应用有多简单：

系列回顾

恭喜你完成了整个系列！让我们回顾一下学习路径：

下一步学习建议

1. 动手实践：Fork Atidraw 仓库，尝试添加新功能
2. 深入 Vue：学习 computed, watch, provide/inject
3. 探索 Pinia：构建更复杂的状态管理
4. 学习 TypeScript：提升代码质量和开发体验
5. 了解 Nuxt Layers：模块化大型项目

结语

从一个 Java 后端开发者的视角，学习 Vue + Nuxt 其实并不难。很多概念都有对应关系：

• ref() ≈ Observable / State
• Props ≈ 构造器注入
• Events ≈ EventListener
• useFetch ≈ RestTemplate
• server/api/ ≈ @RestController
• nuxt.config.ts ≈ application.yml

最大的思维转变是：从命令式到声明式。你不再需要手动操作 DOM，只需要维护数据状态，让框架帮你渲染。

希望这个系列能帮助你顺利入门现代前端开发。有了 Nuxt，“全栈开发”不再遥远——你已经是一个全栈开发者了。

Happy coding! 🎉