NuxtHub
访问网站
扫码查看
复制链接

零配置免费部署基于Cloudflare的全栈 Nuxt 应用的开发平台

标签：Cloudflare , KV数据库 , Nuxt , NuxtHub , Serverless , Vue.js , 免费部署 , 全栈开发 , 对象存储

NuxtHub

AI专业工具 / AI基础服务3 次浏览

综合介绍

NuxtHub 是一个专为 Nuxt.js 应用程序打造的开发和部署平台，它让开发者能够轻松构建和发布全栈应用。 这个平台基于 Cloudflare 的全球基础设施，目标是提供一个与 Nuxt 框架紧密集成的后端服务体验，从而简化开发流程。 用户通过 NuxtHub 可以使用到一系列开箱即用的后端功能，包括 serverless 函数、SQL 数据库、键值（KV）存储、对象（Blob）存储和缓存等。 其核心优势是“零配置”部署，开发者可以将项目托管在自己的 Cloudflare 账户上，无需复杂的服务器设置，就能快速将应用部署到全球边缘网络。 平台提供了一个可视化的管理后台和命令行工具，并与 Nuxt DevTools 深度集成，让开发者可以在本地和云端都能高效地管理和调试应用。

功能列表

  • 云端托管: 基于 Cloudflare 的全球网络进行优化，支持自动扩缩容、全球CDN和快速回滚等功能。
  • SQL 数据库: 集成了 Cloudflare D1，提供可扩展的无服务器 SQL 数据库，支持自动迁移。
  • 文件存储 (Blob): 利用 Cloudflare R2，允许用户上传、存储和提供图片、视频等各类文件。
  • 键值存储 (KV): 利用 Cloudflare Workers KV，提供一个在全球分布的低延迟键值数据库。
  • 边缘函数 (Serverless): 项目中 server/ 目录下的任何代码都可以自动部署为边缘函数，实现后端逻辑。
  • AI 与向量数据库: 支持在英伟达 GPU 全球网络上运行 AI 模型，并内置向量数据库，用于构建完整的 AI 应用。
  • 缓存: 可以对 Nuxt 页面、API 路由和服务端函数进行边缘缓存，提升网站性能。
  • 零配置部署: 通过命令行工具 npx nuxthub deploy 或 Git 推送，即可将应用一键部署到全球。
  • 管理后台: 提供一个可视化的网站后台，用于管理项目、部署、数据库、存储和日志等。
  • 本地开发代理: 允许在本地开发环境中直接访问和操作云端的数据库和存储资源，方便团队协作和调试。

使用帮助

NuxtHub 的设计理念是简化全栈应用的开发和部署流程，让开发者专注于业务逻辑。以下是如何上手使用 NuxtHub 的详细步骤。

第一步：环境准备和账号设置

在使用 NuxtHub 之前，你需要准备两个账号：

  1. Cloudflare 账号：NuxtHub 将应用和相关服务部署在你自己的 Cloudflare 账户下，你需要先注册一个 Cloudflare 账号。
  2. GitHub/GitLab 账号：通过 Git 仓库来管理你的代码和触发自动部署。

完成注册后，访问 NuxtHub 的管理后台 admin.hub.nuxt.com，使用 GitHub 账号登录。登录后，系统会引导你关联 Cloudflare 账户，授权 NuxtHub 管理你账户中的资源。

第二步：创建新项目或集成到现有项目

创建一个全新的 NuxtHub 项目

最快捷的方式是使用官方提供的模板。打开你的终端，运行以下命令：

npx nuxi init my-hub-app -t hub

这个命令会创建一个预配置好的 Nuxt 项目，其中已经包含了 @nuxthub/core 模块和基础的配置。

将 NuxtHub 集成到现有的 Nuxt 项目

如果已有 Nuxt 项目，只需几个步骤即可完成集成：

  1. 安装核心模块： 
    npm install @nuxthub/core
  2. 安装 Wrangler：Wrangler 是 Cloudflare 的命令行工具，NuxtHub 在本地开发时需要用它来模拟云端环境。 
    npm install -D wrangler
  3. 配置 nuxt.config.ts：在配置文件中，添加 @nuxthub/core 模块并启用你需要的功能。 
    export default defineNuxtConfig({
modules: [
'@nuxthub/core'
],
hub: {
// 默认情况下，所有存储功能都是关闭的
// 你可以按需开启
database: true,
kv: true,
blob: true,
cache: true,
}
})

第三步：本地开发和功能使用

NuxtHub 的一大优势是本地开发体验与云端几乎一致。

  • Serverless API: 在项目的 server/api/ 目录下创建文件即可自动生成 API 路由。例如，创建一个 server/api/hello.ts 文件： 
    export default defineEventHandler(() => {
return { message: 'Hello from NuxtHub!' }
})

    启动开发服务器后，访问 http://localhost:3000/api/hello 即可看到返回结果。

  • 使用 KV 存储: KV 存储适合存放低延迟、高频读取的 JSON 数据，如配置、用户会话等。在任何服务端代码中，你可以通过 hub.kv 助手函数来操作。 
    // server/api/kv-example.ts
export default defineEventHandler(async (event) => {
// 写入数据
await hub.kv.set('my-key', { value: 'some data' })
// 读取数据
const data = await hub.kv.get('my-key')
return data
})
  • 使用 Blob 存储: Blob 存储用于存放图片、视频或任何二进制文件。下面是一个处理图片上传的例子： 
    // server/api/upload.post.ts
export default defineEventHandler(async (event) => {
const formData = await readFormData(event)
const image = formData.get('image') // 'image' 是表单字段名
if (image instanceof File) {
await hub.blob.put(image.name, image.stream())
return { success: true, filename: image.name }
}
throw createError({ statusCode: 400, message: 'Image not found' })
})
  • 使用 SQL 数据库: NuxtHub 集成的 D1 数据库提供了关系型数据存储能力。你可以使用 hub.database 助手函数执行 SQL 查询。 
    // server/api/todos.get.ts
export default defineEventHandler(async (event) => {
// 首次运行时会自动创建表
await hub.database.exec(
'CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY, title TEXT, completed INTEGER);'
)
const { results } = await hub.database.prepare('SELECT * FROM todos;').all()
return results
})

第四步：部署到全球网络

当你准备好上线时，部署过程非常简单。

  1. 链接项目: 如果是首次部署，需要将本地项目链接到 NuxtHub 管理后台。 
    npx nuxthub link

    命令行会引导你选择或创建一个 NuxtHub 项目。

  2. 一键部署: 
    npx nuxthub deploy

    此命令会打包你的应用，将其部署到 Cloudflare Pages，并自动配置所有已启用的数据库、存储等资源。 部署完成后，你会得到一个免费的 .nuxt.dev 子域名。

第五步：后台管理

部署后，你可以登录 NuxtHub 管理后台查看应用的部署状态、实时日志、数据库内容和存储文件，所有操作都在一个统一的界面完成，无需直接操作复杂的 Cloudflare 控制台。

应用场景

  1. 全栈个人博客使用 NuxtHub 可以快速搭建一个功能完整的博客。文章内容可以存储在 SQL 数据库中，评论和点赞等动态数据可以通过 KV 存储实现，而网站的图片等静态资源则可以放在 Blob 存储中，实现全球加速访问。
  2. 原型和小项目快速开发对于初创公司或独立开发者，NuxtHub 提供了一个近乎免费的后端解决方案。 你可以在几分钟内搭建并部署一个具备数据库和文件上传功能的原型，用于验证市场想法，而无需关心服务器运维。
  3. 企业级静态站点企业官网或营销活动页面可以利用 Nuxt 的静态站点生成（SSG）功能，并结合 NuxtHub 的边缘缓存，获得极快的加载速度。同时，可以通过 Serverless 函数处理表单提交（如联系我们、订阅邮件），并将数据存入 SQL 数据库。
  4. 轻量级 SaaS 应用构建一个轻量级的在线工具或服务，例如一个在线图像处理工具。用户上传的图片存放在 Blob 存储中，处理任务由 Serverless 函数完成，用户信息和订阅状态则保存在 SQL 数据库中。

QA

  1. NuxtHub 是免费的吗？NuxtHub 本身提供一个慷慨的免费套餐，适合个人项目和小型应用。 由于服务是部署在你自己的 Cloudflare 账户上，最终费用取决于你对 Cloudflare 服务（如 D1, R2, KV）的用量，而这些服务本身也有免费额度。NuxtHub 不会对 Cloudflare 的价格进行加价。
  2. NuxtHub 和 Vercel/Netlify 有什么区别？NuxtHub 在功能上类似于 Vercel 或 Netlify，都是提供代码托管和部署服务。但最大的区别在于底层技术栈：Vercel 和 Netlify 主要基于 AWS 构建，而 NuxtHub 则完全基于 Cloudflare 的生态系统。 这使得 NuxtHub 能更紧密地集成 Cloudflare 的边缘计算、存储和数据库服务。
  3. 我需要懂后端知识才能使用 NuxtHub 吗？不需要深入的后端或DevOps知识。NuxtHub 的设计初衷就是为了简化全栈开发，它将复杂的后端基础设施抽象成简单的函数调用（如 hub.kv.set()），让前端开发者也能轻松构建具备后端功能的应用。
  4. 我的数据安全吗？所有数据都存储在你自己的 Cloudflare 账户中，NuxtHub 只是作为管理和部署这些资源的平台。你对自己的数据拥有完全的控制权。
微信微博Email复制链接