詳解全棧開(kāi)發(fā)Vercel數(shù)據(jù)庫(kù)存儲(chǔ)服務(wù)
正文
Vercel 是一個(gè)流行的 React.js、Next.js 等前端應(yīng)用部署平臺(tái),我們可以一鍵將 Github 上的應(yīng)用部署上線,但它缺少一個(gè)重要部分:數(shù)據(jù)庫(kù)。不過(guò)現(xiàn)在已經(jīng)有了四種新數(shù)據(jù)庫(kù)可供選擇。
數(shù)據(jù)是 Web 應(yīng)用中不可或缺的一部分,在這之前我們可以配合使用 Heroku 的數(shù)據(jù)庫(kù)服務(wù),但后來(lái) Heroku 收費(fèi),不再提供免費(fèi)的數(shù)據(jù)庫(kù),社區(qū)中也一直尋找免費(fèi)試用的數(shù)據(jù)庫(kù)方案,現(xiàn)在我們可以直接選擇 Vercel 來(lái)上線一個(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:一種簡(jiǎn)單耐用的 serverless Redis 解決方案,由 Upstash 提供支持
- Vercel Postgres:為前端構(gòu)建的 serverless SQL 數(shù)據(jù)庫(kù),由 Neon 提供支持
- Vercel Blob:一種在邊緣上傳、提供文件對(duì)象存儲(chǔ)的解決方案,由 Cloudflare R2 提供支持
Vercel KV:持久的 Redis 數(shù)據(jù)庫(kù)
它是一種基于 Upstash E-Value 的鍵值存儲(chǔ)(類似 Redis)。操作數(shù)據(jù)庫(kù)非常容易,更重要的是它非??焖伲?yàn)榕c大多數(shù)數(shù)據(jù)庫(kù)不同,數(shù)據(jù)保存在內(nèi)存中而不是磁盤(pán)上, 這意味著它可用于持久化狀態(tài),而不會(huì)在服務(wù)器崩潰時(shí)丟失數(shù)據(jù),也就是說(shuō),在讀取方面會(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ì)因超過(guò)基本限制的按需使用而被收取費(fèi)用。
- Hobby 免費(fèi)用戶,每天的請(qǐng)求限制為 3000 次, 存儲(chǔ) 256 MB。
- Pro 用戶 512 MB - 超出 1GB/$0.20 當(dāng)達(dá)到此限制時(shí),對(duì)數(shù)據(jù)庫(kù)的請(qǐng)求將受到速率限制。
Vercel Postgres:讓復(fù)雜數(shù)據(jù)變得簡(jiǎn)單
PostgreSQL 是許多開(kāi)發(fā)人員處理關(guān)系數(shù)據(jù)的首選方式。這個(gè)數(shù)據(jù)庫(kù)好處在于它可以自動(dòng)擴(kuò)展、容錯(cuò)性強(qiáng),并且有一個(gè)易于使用的 UI 界面?;旧夏阒恍枰c(diǎn)擊一個(gè)按鈕,就可以將你的數(shù)據(jù)庫(kù)連接鏈接添加到環(huán)境中,然后就可以直接在 React Server Component 中編寫(xiě)原始 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 庫(kù)良好地集成。
價(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ù)庫(kù)的請(qǐng)求將受到速率限制。
Hobby 默認(rèn)免費(fèi)使用,當(dāng)您接近使用限制時(shí),Vercel 會(huì)向您發(fā)送電子郵件。不會(huì)為任何額外的使用付費(fèi),我們可以選擇:
- 30 天后過(guò)期
- 升級(jí)到 Pro
Vercel Blob:文件對(duì)象存儲(chǔ)
Vercel Blob 是一種用于在云中存儲(chǔ)文件的快速、簡(jiǎn)單且高效的解決方案。它提供了一個(gè)完全基于 Web 標(biāo)準(zhǔn)構(gòu)建的輕松而強(qiáng)大的存儲(chǔ) API,無(wú)需配置存儲(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ǔ)在云上。換句話說(shuō),它可以替代 S3 等存儲(chǔ)桶。SDK 非常簡(jiǎn)單——只需調(diào)用 put
方法并傳入要上傳的文件即可返回下載 URL 。但目前存在一個(gè)限制:最大文件上傳大小為 4MB ,在測(cè)試版階段之后應(yīng)該會(huì)增加。
Edge Config
它是一種全局?jǐn)?shù)據(jù)存儲(chǔ),使您能夠在邊緣讀取數(shù)據(jù),而無(wú)需查詢外部數(shù)據(jù)庫(kù)或訪問(wèn)上游服務(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)); } }
使用場(chǎng)景
- 以超低延遲獲取數(shù)據(jù)。例如,你應(yīng)該將功能標(biāo)志開(kāi)關(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ù)庫(kù)的選擇并不缺乏。但對(duì)于新項(xiàng)目來(lái)說(shuō),選擇仍然會(huì)讓人無(wú)從下手,雖然 Vercel 的價(jià)格可能會(huì)高于其他服務(wù)商,但對(duì)于個(gè)人或者全棧的體驗(yàn)項(xiàng)目來(lái)說(shuō)無(wú)疑是最好的選擇。
以上就是詳解全棧開(kāi)發(fā)Vercel數(shù)據(jù)庫(kù)存儲(chǔ)服務(wù)的詳細(xì)內(nèi)容,更多關(guān)于全棧Vercel數(shù)據(jù)庫(kù)存儲(chǔ)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS實(shí)現(xiàn)重新加載當(dāng)前頁(yè)面或者父頁(yè)面的幾種方法
本文介紹了JS實(shí)現(xiàn)重新加載當(dāng)前頁(yè)面或者父頁(yè)面的幾種方法.需要的朋友可以參考下2016-11-11基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析
這篇文章主要介紹了基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09javascript arguments 傳遞給函數(shù)的隱含參數(shù)
眾所周知,js是腳本語(yǔ)言,腳本語(yǔ)言的一個(gè)特點(diǎn)就是極其靈活。有時(shí)“靈活”到使我這種習(xí)慣c系主流語(yǔ)言的人不得不佩服腳本的強(qiáng)大。比如這里要講到的 arguments參數(shù)。2009-08-08