正文

Vercel 是一個(gè)流行的 React.js、Next.js 等前端應(yīng)用部署平臺(tái)，我們可以一鍵將 Github 上的應(yīng)用部署上線，但它缺少一個(gè)重要部分：數(shù)據(jù)庫。不過現(xiàn)在已經(jīng)有了四種新數(shù)據(jù)庫可供選擇。

數(shù)據(jù)是 Web 應(yīng)用中不可或缺的一部分，在這之前我們可以配合使用 Heroku 的數(shù)據(jù)庫服務(wù)，但后來 Heroku 收費(fèi)，不再提供免費(fèi)的數(shù)據(jù)庫，社區(qū)中也一直尋找免費(fèi)試用的數(shù)據(jù)庫方案，現(xiàn)在我們可以直接選擇 Vercel 來上線一個(gè)動(dòng)態(tài)網(wǎng)站， 并且使用 JavaScript 和 TypeScript 框架服務(wù)端渲染實(shí)時(shí)數(shù)據(jù)會(huì)比以往任何時(shí)候都更容易。

5 月 1 日，Vercel 宣布一套 serverless 存儲(chǔ)解決方案現(xiàn)已在 Vercel 上可用，是由業(yè)內(nèi)一些最佳基礎(chǔ)設(shè)施提供商提供支持。

• Vercel KV：一種簡單耐用的 serverless Redis 解決方案，由 Upstash 提供支持
• Vercel Postgres：為前端構(gòu)建的 serverless SQL 數(shù)據(jù)庫，由 Neon 提供支持
• Vercel Blob：一種在邊緣上傳、提供文件對(duì)象存儲(chǔ)的解決方案，由 Cloudflare R2 提供支持

Vercel KV：持久的 Redis 數(shù)據(jù)庫

它是一種基于 Upstash E-Value 的鍵值存儲(chǔ)（類似 Redis）。操作數(shù)據(jù)庫非常容易，更重要的是它非常快速，因?yàn)榕c大多數(shù)數(shù)據(jù)庫不同，數(shù)據(jù)保存在內(nèi)存中而不是磁盤上， 這意味著它可用于持久化狀態(tài)，而不會(huì)在服務(wù)器崩潰時(shí)丟失數(shù)據(jù)，也就是說，在讀取方面會(huì)變得極其迅速，是緩存數(shù)據(jù)的理想選擇。

使用示例

import kv from '@vercel/kv';
export async function getPrefs() {
  const prefs = await kv.get('prefs');
  return prefs || {};
}
export async function updatePrefs(prefs: Record<string, string>) {
 return kv.set('prefs', prefs);
}

價(jià)格

在 2023 年 6 月 1 日之前，不會(huì)因超過基本限制的按需使用而被收取費(fèi)用。

• Hobby 免費(fèi)用戶，每天的請(qǐng)求限制為 3000 次， 存儲(chǔ) 256 MB。
• Pro 用戶 512 MB - 超出 1GB/$0.20 當(dāng)達(dá)到此限制時(shí)，對(duì)數(shù)據(jù)庫的請(qǐng)求將受到速率限制。

Vercel Postgres：讓復(fù)雜數(shù)據(jù)變得簡單

PostgreSQL 是許多開發(fā)人員處理關(guān)系數(shù)據(jù)的首選方式。這個(gè)數(shù)據(jù)庫好處在于它可以自動(dòng)擴(kuò)展、容錯(cuò)性強(qiáng)，并且有一個(gè)易于使用的 UI 界面?；旧夏阒恍枰c(diǎn)擊一個(gè)按鈕，就可以將你的數(shù)據(jù)庫連接鏈接添加到環(huán)境中，然后就可以直接在 React Server Component 中編寫原始 SQL 代碼了。

使用示例

import { sql } from '@vercel/postgres';
import { redirect } from 'next/navigation';
async function create(formData: FormData) {
  'use server';
  const { rows } = await sql`
    INSERT INTO products (name)
    VALUES (${formData.get('name')})
  `;
  redirect(`/product/${rows[0].slug}`);
}
export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

我們可以使用 Vercel Postgres 直接在 React 服務(wù)器組件內(nèi)查詢、插入、更新或刪除數(shù)據(jù)，以靜態(tài)的速度在服務(wù)器上渲染動(dòng)態(tài)內(nèi)容，并且大大減少客戶端 JavaScript 代碼

此外，它還與 Keisely 和我個(gè)人最喜歡的 Prisma ORM 庫良好地集成。

價(jià)格

• 免費(fèi)用戶，每月的計(jì)算時(shí)間 60 hours，存儲(chǔ) 256 MB。
• Pro 用戶, 每月的計(jì)算時(shí)間 100 hours 存儲(chǔ) 512 MB, 超出 1GB/$0.30 當(dāng)達(dá)到此限制時(shí)，對(duì)數(shù)據(jù)庫的請(qǐng)求將受到速率限制。

Hobby 默認(rèn)免費(fèi)使用，當(dāng)您接近使用限制時(shí)，Vercel 會(huì)向您發(fā)送電子郵件。不會(huì)為任何額外的使用付費(fèi)，我們可以選擇：

• 30 天后過期
• 升級(jí)到 Pro

Vercel Blob：文件對(duì)象存儲(chǔ)

Vercel Blob 是一種用于在云中存儲(chǔ)文件的快速、簡單且高效的解決方案。它提供了一個(gè)完全基于 Web 標(biāo)準(zhǔn)構(gòu)建的輕松而強(qiáng)大的存儲(chǔ) API，無需配置存儲(chǔ)桶或?qū)嵤┓敝氐?SDK。目前需要申請(qǐng)使用。

使用示例

import { put } from '@vercel/blob';
export const runtime = 'edge';
export async function PUT(request: Request) {
  const { url } = await put('avatars/user-12345.png', request.body, { access: 'public' });
  return Response.json({ url });
}

它基于 Cloudflare R2 并允許你將大量非結(jié)構(gòu)化數(shù)據(jù)（如圖像和 PDF 文件）存儲(chǔ)在云上。換句話說，它可以替代 S3 等存儲(chǔ)桶。SDK 非常簡單——只需調(diào)用 put 方法并傳入要上傳的文件即可返回下載 URL 。但目前存在一個(gè)限制：最大文件上傳大小為 4MB ，在測試版階段之后應(yīng)該會(huì)增加。

Edge Config

它是一種全局?jǐn)?shù)據(jù)存儲(chǔ)，使您能夠在邊緣讀取數(shù)據(jù)，而無需查詢外部數(shù)據(jù)庫或訪問上游服務(wù)器。大多數(shù)查找在不到 1ms 的時(shí)間內(nèi)返回，99%的讀取將在 10ms 以下返回。

使用示例

import { NextResponse, NextRequest } from "next/server";
import { get } from "@vercel/edge-config";
export async function middleware(request: NextRequest) {
  if (await get("showNewDashboard")) {
    return NextResponse.rewrite(new URL("/new-dashboard", request.url));
  }
}

使用場景

• 以超低延遲獲取數(shù)據(jù)。例如，你應(yīng)該將功能標(biāo)志開關(guān)存儲(chǔ)在 Edge Config 存儲(chǔ)中
• 存儲(chǔ)經(jīng)常讀取但很少更改的數(shù)據(jù)。例如，您應(yīng)該將關(guān)鍵重定向 URL 存儲(chǔ)在 Edge Config 存儲(chǔ)中
• 讀取每個(gè)區(qū)域中的數(shù)據(jù)。Edge Config 數(shù)據(jù)被主動(dòng)復(fù)制到 Vercel 邊緣網(wǎng)絡(luò)中的所有區(qū)域

小結(jié)

筆者認(rèn)為，隨著框架從單一架構(gòu)轉(zhuǎn)向可組合架構(gòu)，框架正在向服務(wù)端渲染優(yōu)先轉(zhuǎn)變。這種轉(zhuǎn)變以 React Server Component 和將流式渲染為例。后端和數(shù)據(jù)庫的選擇并不缺乏。但對(duì)于新項(xiàng)目來說，選擇仍然會(huì)讓人無從下手，雖然 Vercel 的價(jià)格可能會(huì)高于其他服務(wù)商，但對(duì)于個(gè)人或者全棧的體驗(yàn)項(xiàng)目來說無疑是最好的選擇。

以上就是詳解全棧開發(fā)Vercel數(shù)據(jù)庫存儲(chǔ)服務(wù)的詳細(xì)內(nèi)容，更多關(guān)于全棧Vercel數(shù)據(jù)庫存儲(chǔ)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論