nuxt

NuxtHub尝鲜

我们Vue也有自己的Vercel了：）

Nuxt on Cloudflare infra with minimal effort - this is huge!

  • 2024.8.11更新：NuxtHub支持快速上传文件至r2存储，并提供免费流量。
  • 2024.8.18更新：NuxtHub支持Cloudflare Workers AI相关api
  • 2024.9.29更新：忽然发现其暗改免费计划（项目上限20个->5个）
  • 2025.7.10更新：Vercel收编了NuxtLabs，nuxthub或将被开源，后续nuxt的项目集成可能更多会由vercel实现

写在最前面

  • 当前NuxtHub还在beta阶段，请不要用于生产环境。
  • NuxtHub目前基于Cloudflare的Page,D1,R2等服务，在不做其他优选的情况下网络联通性可能比不上Vercel。
  • NuxtHub目前仅支持GitHub作为登录方式，并且要绑定Cloudflare账户才能使用。

关于NuxtHub

20240618002457

  • NuxtHub 是由 Cloudflare 提供支持的 Nuxt 部署和管理平台。
  • 在 Cloudflare 账户上部署带有数据库、键值和 blob 存储的应用程序，无需任何配置。
  • NuxtHub 可让您经济实惠地在任何地方运行高性能 Nuxt 应用程序。

架构

架构

价格

20240618002915

  • 其免费计划可以创建的项目已经从20个修改为5个

而Vercel的价格

20240618003117

PS: 对于较大的项目来说，截图中的月费可能并不是最终花费。但由于NuxtHub是基于大善人Cloudflare的服务，所以大概率是更低价的。x上众多吐槽vercel费用高昂的有业务的用户可能会感到开心：）

PSS: 对用量极少的大部分人来说，两者都差不多都是免费的。

简单对比

两者的大部分基础功能都是重合的，此处列举一些我认为值得对比的东西。

NuxtHub Vercel
官网模板数量 较少（10个） 多
同等较大项目计费 低 高
教程数量 极少 多
所需账号 Github+Cloudflare Vercel
文档质量 一般 高
更新频次 高 高
修改环境变量后 会提醒重新构建 无提醒
流量图表 无（可在CF查询） 有
GitHub Deployments集成 无 有
流量限制 无限 免费流出100 GB /mo，超出$0.15/GB；免费回源10GB/mo， $0.06/mo
自定义域名网络联通测试
默认域名网络联通测试 *.nuxt.dev *.vercel.app
  • 此为2024.6.17的情况，随时可能变化，以官网内容为准
  • 虽然目前nuxthub的默认域名还能用，但迟早被滥用，还是会步入*.page.dev和*vercel.app的后尘，还是建议绑定自定义域名进行使用

上传文件至R2存储

  • server/api/upload.post.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default eventHandler(async (event) => {
  // Make sure the user is authenticated to upload
  const { user } = await requireUserSession(event)

  // Read the form data
  const form = await readFormData(event)
  const drawing = form.get('drawing') as File

  // Ensure the file is a jpeg image and is not larger than 1MB
  ensureBlob(drawing, {
    maxSize: '1MB',
    types: ['image/jpeg'],
  })

  // Upload the file to the Cloudflare R2 bucket
  return hubBlob().put(`${Date.now()}.jpg`, drawing, {
    addRandomSuffix: true,
    customMetadata: {
      userProvider: user.provider,
      userId: user.id,
      userName: user.name,
      userAvatar: user.avatar,
      userUrl: user.url,
    },
  })
})

hubAI()

1
2
3
4
5
export default defineEventHandler(async (event) => {
  return await hubAI().run('@cf/meta/llama-3.1-8b-instruct', {
    prompt: 'Who is the author of Nuxt?'
  })
})

总之

NuxtHub的总体表现不及Vercel，主要原因之一是目前项目还太新了（2024.6.3发布beta），但站在Cloudflare的肩膀上，很多功能会有更多的免费额度，算是未来可期吧。

NuxtHub目前还处于beta阶段，部分功能可能还不完善，但对于海外的个人开发者来说，应该是个不错的选择。

相关