前端秒變?nèi)珬ue3 Supabase 三小時(shí)交付完整應(yīng)用后端一行不寫(xiě)【免費(fèi)下載鏈接】supabaseThe Postgres development platform. Supabase gives you a dedicated Postgres database to build your web, mobile, and AI applications.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/supa/supabase我只寫(xiě)前端后端怎么辦這是無(wú)數(shù) Vue 開(kāi)發(fā)者在個(gè)人項(xiàng)目、獨(dú)立出海、內(nèi)部工具、黑客松 Demo 上反復(fù)撞見(jiàn)的墻。傳統(tǒng)方案要么引入 Node 服務(wù)端把工程復(fù)雜度翻倍要么使用云函數(shù)把邏輯拆得七零八落要么退回 Firebase 接受鎖死生態(tài)和 SQL 能力閹割。Supabase 給出的答案是另一條路讓 PostgreSQL 自己成為后端。它把數(shù)據(jù)庫(kù)、REST API、實(shí)時(shí)訂閱、認(rèn)證、對(duì)象存儲(chǔ)和邊緣函數(shù)打包成一套開(kāi)箱即用的 BaaS前端只要裝一個(gè) JS SDK 就能拿到完整的后端能力。這個(gè)定位讓它在 2025–2026 年踩中了風(fēng)口——社區(qū)討論中它被稱作Vibe Coding 的默認(rèn)后端估值已突破百億美元還以 1.5 億美元融資收購(gòu)了數(shù)據(jù)庫(kù)公司 Turso把目光投向AI 智能體需要數(shù)百萬(wàn)個(gè)獨(dú)立數(shù)據(jù)庫(kù)的下一程。本文不再?gòu)?fù)述營(yíng)銷(xiāo)話術(shù)而是直接打開(kāi) Supabase 官方倉(cāng)庫(kù)supabase/supabase中真實(shí)的 Vue 3 示例代碼從項(xiàng)目初始化、數(shù)據(jù)庫(kù)表設(shè)計(jì)、認(rèn)證、CRUD、文件存儲(chǔ)到本地聯(lián)調(diào)與上線部署把三小時(shí)交付完整應(yīng)用的完整鏈路拆給你看并交代每一環(huán)背后為什么能這么省的機(jī)制原理。一張表就是一套 APIBaaS 的底氣從哪來(lái)先看倉(cāng)庫(kù)里最核心的示例examples/user-management/vue3-user-management。這是一個(gè)官方維護(hù)的完整 Vue 3 用戶管理應(yīng)用功能清單極其克制卻覆蓋了全棧應(yīng)用的三大命脈通過(guò) Magic Link郵箱魔法鏈接登錄無(wú)需密碼讀取、更新用戶檔案數(shù)據(jù)數(shù)據(jù)庫(kù) CRUD上傳、回顯頭像圖片對(duì)象存儲(chǔ)。整個(gè)項(xiàng)目的前端依賴只有兩個(gè)見(jiàn) package.jsondependencies: { supabase/supabase-js: ^2, vue: ^3.5.30 }沒(méi)有 Express、沒(méi)有 ORM、沒(méi)有鑒權(quán)中間件。后端能力的秘密藏在架構(gòu)里Supabase 在 PostgreSQL 之上疊了一層PostgREST——一個(gè)把數(shù)據(jù)庫(kù)表直接暴露為 RESTful API 的網(wǎng)關(guān)。你在數(shù)據(jù)庫(kù)里建一張表PostgREST 就自動(dòng)生成GET/POST/PATCH/DELETE端點(diǎn)你在表上定義行級(jí)安全RLS策略這個(gè) API 就自帶權(quán)限語(yǔ)義。前端拿到的supabase.from(profiles).select(...)這樣的鏈?zhǔn)秸{(diào)用底層打的正是這些自動(dòng)生成的 HTTP 接口。這也解釋了為什么倉(cāng)庫(kù)的 Docker 自托管編排docker/docker-compose.yml里躺著十來(lái)個(gè)相互咬合的服務(wù)Studio 控制臺(tái)、基于 Envoy 的 API 網(wǎng)關(guān)api-gw、負(fù)責(zé) JWT 認(rèn)證的authGoTrue、把 Postgres 變成 REST API 的 PostgREST、負(fù)責(zé) WebSocket 廣播的 Realtime、對(duì)象存儲(chǔ) Storage、連接池 Supavisor 等等。開(kāi)發(fā)者感知到的一個(gè) BaaS其實(shí)是一套企業(yè)級(jí)開(kāi)源組件堆疊出的平臺(tái)——這也是它與 Firebase 最本質(zhì)的區(qū)別底層是標(biāo)準(zhǔn) SQL 和你能完全掌控的 Postgres。第一步腳手架、環(huán)境變量與數(shù)據(jù)庫(kù)表設(shè)計(jì)按官方 Quickstartapps/docs/content/guides/getting-started/quickstarts/vue.mdx的流程從零初始化一個(gè) Vue 應(yīng)用只需三行命令npm create vitelatest supabase-vue-3 -- --template vue cd supabase-vue-3 npm install supabase/supabase-js然后把項(xiàng)目 URL 與 publishable key 寫(xiě)入.env參考示例中的 .env.exampleVITE_SUPABASE_URLhttps://your-project-ref.supabase.co VITE_SUPABASE_PUBLISHABLE_KEYyour-publishable-key初始化客戶端的代碼全項(xiàng)目只有五行的量級(jí)見(jiàn) src/supabase.jsimport { createClient } from supabase/supabase-js const supabaseUrl import.meta.env.VITE_SUPABASE_URL const supabasePublishableKey import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY export const supabase createClient(supabaseUrl, supabasePublishableKey)值得注意這兩個(gè)變量會(huì)暴露在瀏覽器里官方文檔對(duì)此的注釋是這沒(méi)問(wèn)題因?yàn)閿?shù)據(jù)庫(kù)開(kāi)啟了行級(jí)安全RLS。這句話是整篇文章的安全主線后面會(huì)展開(kāi)。接下來(lái)是整條鏈路里唯一一次寫(xiě)后端的環(huán)節(jié)——但用的不是編程語(yǔ)言而是 SQL。示例 READMEREADME.md給出了完整的建表腳本核心是一張profiles表create table profiles ( id uuid references auth.users not null, updated_at timestamp with time zone, username text unique, avatar_url text, website text, primary key (id), unique(username), constraint username_length check (char_length(username) 3) );三個(gè)細(xì)節(jié)值得工程師品一品主鍵直接引用auth.usersid是 UUID 且外鍵指向 Supabase 內(nèi)置的認(rèn)證用戶表登錄用戶與業(yè)務(wù)數(shù)據(jù)的綁定關(guān)系由數(shù)據(jù)庫(kù)約束兜底約束寫(xiě)在數(shù)據(jù)庫(kù)里username唯一、長(zhǎng)度不小于 3這類校驗(yàn)不需要前端或中間層重復(fù)實(shí)現(xiàn)任何繞過(guò) UI 的請(qǐng)求都在數(shù)據(jù)庫(kù)層被攔截表結(jié)構(gòu)即 API 契約建完表PostgREST 立即暴露對(duì)應(yīng)的 REST 端點(diǎn)select、insert、update全部可用——這就是后端一行不寫(xiě)的字面含義。建表動(dòng)作既可以在云端的 SQL Editor 里執(zhí)行也可以在本地supabase migration new生成的遷移文件中維護(hù)后者讓表結(jié)構(gòu)像前端代碼一樣進(jìn)入版本管理。認(rèn)證打通Magic Link 登錄與登錄態(tài)管理認(rèn)證是新手最容易寫(xiě)崩的部分密碼哈希、會(huì)話令牌、過(guò)期刷新、安全 Cookie……Supabase Auth 把這些全部?jī)?nèi)置。示例使用郵箱魔法鏈接前端交互代碼只有Auth.vue一個(gè)組件src/components/Auth.vueconst handleLogin async () { try { loading.value true const { error } await supabase.auth.signInWithOtp({ email: email.value }) if (error) throw error alert(Check your email for the login link!) } catch (error) { if (error instanceof Error) { alert(error.message) } } finally { loading.value false } }用戶提交郵箱后Auth 服務(wù)簽發(fā)一次性鏈接發(fā)送到郵箱點(diǎn)擊即完成登錄。而當(dāng)前是否已登錄的全局狀態(tài)由 src/App.vue 監(jiān)聽(tīng)維護(hù)onMounted(() { supabase.auth.getClaims().then(({ data }) { claims.value data.claims }) supabase.auth.onAuthStateChange(async () { const { data } await supabase.auth.getClaims() claims.value data.claims }) })Account v-ifclaims :claimsclaims / Auth v-else /getClaims()讀取 JWT 中的聲明onAuthStateChange訂閱登錄/登出事件——登錄態(tài)在頁(yè)面刷新、跨標(biāo)簽頁(yè)、Token 過(guò)期等場(chǎng)景下都由 SDK 自動(dòng)維護(hù)。需要社交登錄時(shí)官方倉(cāng)庫(kù)還提供了 GitHub OAuth 的完整配置流程社區(qū)文章對(duì)此也有大量實(shí)踐原理一致在 GitHub 側(cè)創(chuàng)建 OAuth App把回調(diào)地址填進(jìn) Supabase 控制臺(tái)前端一行signInWithOAuth即可。這里有一層值得 Vue 開(kāi)發(fā)者留意的機(jī)制JWT 的sub聲明用戶 UUID與數(shù)據(jù)庫(kù) RLS 中的auth.uid()是同一枚 Token 的兩種讀取視角。前端從claims.sub拿用戶 ID 去查詢自己的檔案數(shù)據(jù)庫(kù)策略用auth.uid()校驗(yàn)請(qǐng)求歸屬——兩端基于同一簽名體系這就是無(wú)需后端代碼卻能完成身份鑒權(quán)的底層密碼。CRUD 與安全底線RLS 是一切的根基登錄之后檔案的讀取與更新落在 src/components/Account.vue兩段代碼分別是讀和寫(xiě)let { data, error, status } await supabase .from(profiles) .select(username, website, avatar_url) .eq(id, claims.value.sub) .single()const updates { id: claims.value.sub, username: username.value, website: website.value, avatar_url: avatar_url.value, updated_at: new Date(), } let { error } await supabase.from(profiles).upsert(updates)select加.eq(id, ...)過(guò)濾、upsert一鍵插入或更新——標(biāo)準(zhǔn)的前端鏈?zhǔn)秸{(diào)用沒(méi)有一行服務(wù)端邏輯。但真正決定誰(shuí)能讀、誰(shuí)能寫(xiě)的是建表時(shí)跟著寫(xiě)下的那三條 RLS 策略alter table profiles enable row level security; create policy Public profiles are viewable by everyone. on profiles for select using ( true ); create policy Users can insert their own profile. on profiles for insert with check ( (select auth.uid()) id ); create policy Users can update own profile. on profiles for update using ( (select auth.uid()) id );語(yǔ)義一目了然檔案公開(kāi)可讀只有auth.uid()等于記錄id的用戶本人能插入和更新自己的檔案。RLS 是 Postgres 原生機(jī)制策略在數(shù)據(jù)庫(kù)內(nèi)部執(zhí)行任何途徑REST API、直接 SQL 連接、未來(lái)新增的客戶端都無(wú)法繞過(guò)——這正是publishable key 可以安全暴露在瀏覽器里的前提。反過(guò)來(lái)忽略這一層就會(huì)付出真實(shí)代價(jià)2025 年 UpGuard 安全團(tuán)隊(duì)的研究發(fā)現(xiàn)全網(wǎng)有16,326 個(gè) Supabase 項(xiàng)目暴露了公開(kāi)可讀取的數(shù)據(jù)庫(kù)表其中不少包含個(gè)人數(shù)據(jù)TechCrunch 等媒體對(duì)此做了報(bào)道。這些項(xiàng)目的共性失誤高度一致——建了表、接入了 SDK卻忘了enable row level security和策略。把 RLS 當(dāng)作可選的進(jìn)階功能是 BaaS 時(shí)代最危險(xiǎn)的認(rèn)知偏差在你寫(xiě)下create table之后的第一件事就應(yīng)該是打開(kāi) RLS。文件存儲(chǔ)三行代碼搞定頭像上傳檔案里還躺著一個(gè)avatar_url字段對(duì)應(yīng)存儲(chǔ)層的能力。頭像上傳組件 src/components/Avatar.vue 展示了 Storage 的完整閉環(huán)——上傳與下載let { error: uploadError } await supabase.storage .from(avatars) .upload(filePath, file)const { data, error } await supabase.storage .from(avatars) .download(path.value) src.value URL.createObjectURL(data)上傳用的是隨機(jī)文件名下載后在瀏覽器側(cè)URL.createObjectURL生成本地預(yù)覽避免每次渲染都走一遍網(wǎng)絡(luò)。桶Bucket的權(quán)限同樣在 SQL 中聲明insert into storage.buckets (id, name) values (avatars, avatars); create policy Avatar images are publicly accessible. on storage.objects for select using ( bucket_id avatars ); create policy Anyone can upload an avatar. on storage.objects for insert with check ( bucket_id avatars );Storage 對(duì)公眾開(kāi)放讀頭像需要公開(kāi)訪問(wèn)、放行登錄用戶上傳權(quán)限模型和數(shù)據(jù)庫(kù)表完全一致地由策略驅(qū)動(dòng)。更進(jìn)階的做法是把上傳 URL 簽名化、給對(duì)象加防盜鏈或接入 CDN 做邊緣緩存——能力都在只是按需開(kāi)啟。至此認(rèn)證、CRUD、文件存儲(chǔ)三大件已經(jīng)全部打通。把Auth、Account、Avatar三個(gè)組件組裝進(jìn)App.vuenpm run dev啟動(dòng) Vite 開(kāi)發(fā)服務(wù)器瀏覽器打開(kāi)localhost:5173一個(gè)完整的用戶管理應(yīng)用就出現(xiàn)在眼前——這正是官方教程with-vue-3.mdx里At this stage you have a fully functional application!的由來(lái)。順帶一提這套用戶管理腳手架在倉(cāng)庫(kù)里以九種技術(shù)棧平行存在——React、Svelte、Swift、Flutter、Angular、Ionic乃至 Solid 和 Nuxt——它們共享同一套數(shù)據(jù)庫(kù)、同一份 RLS 策略、同一套 Storage 配置。后端能力與前端框架徹底解耦這是前端秒變?nèi)珬Ｗ钣辛Φ淖⒛_你學(xué)的不是某個(gè)框架綁定的后端而是一套可復(fù)用的后端資產(chǎn)。從本地聯(lián)調(diào)到上線部署兩條路線都講清楚應(yīng)用寫(xiě)完了接下來(lái)是工程師最關(guān)心的最后一公里。Supabase 給了兩條部署路線恰好對(duì)應(yīng)不同的控制欲與運(yùn)維成本。路線 A托管云默認(rèn)路徑。在控制臺(tái)創(chuàng)建項(xiàng)目、執(zhí)行建表 SQL、拿到 URL 和 key 之后前端npm run build產(chǎn)出靜態(tài)資源部署到任意靜態(tài)托管Vercel、Netlify、自有服務(wù)器即可。數(shù)據(jù)庫(kù)、Auth、Storage 全部由平臺(tái)托管自動(dòng)備份、免運(yùn)維。這也是三小時(shí)交付最順滑的路徑——本地開(kāi)發(fā)與生產(chǎn)環(huán)境共享同一套 API除了環(huán)境變量不同代碼路徑完全一致。路線 B自托管Docker Compose。倉(cāng)庫(kù)根目錄的 docker/ 提供了官方自托管編排。它把完整服務(wù)棧收進(jìn)一份docker-compose.ymlStudio 控制臺(tái)、Envoy API 網(wǎng)關(guān)、Auth、PostgREST、Realtime、Storage、Postgres 元數(shù)據(jù)管理、Postgres 本體、Edge Runtime、日志鏈路Logflare Vector和連接池 Supavisor。社區(qū)里的 Windows 部署與本地聯(lián)調(diào)文章走的也是這條路——裝好 Docker 與 Supabase CLIsupabase start即可拉起本地實(shí)例.env指向localhost完成聯(lián)調(diào)。日常運(yùn)維則被封裝成腳本docker/run.shsh run.sh start # docker compose up -d --wait sh run.sh status # docker compose ps sh run.sh logs auth # 跟蹤指定服務(wù)日志 sh run.sh secrets # 打印密鑰與 API Key sh update.sh # 備份后升級(jí)整套服務(wù)自托管的代價(jià)在 docker/README.md 里被寫(xiě)得很直白——默認(rèn)配置不安全不能直接上生產(chǎn)必須更換所有默認(rèn)密碼與密鑰、復(fù)查 CORS 配置、在服務(wù)前方架設(shè) HTTPS 反向代理、并建立備份機(jī)制。托管云替你承擔(dān)了這部分運(yùn)維風(fēng)險(xiǎn)自托管則把控制權(quán)與責(zé)任同時(shí)交還給你。對(duì)大多數(shù)個(gè)人項(xiàng)目和早期產(chǎn)品路線 A 是正確的默認(rèn)選擇對(duì)數(shù)據(jù)主權(quán)敏感或需要深度定制的場(chǎng)景路線 B 才是答案。三小時(shí)背后的工程真相復(fù)盤(pán)整條鏈路會(huì)發(fā)現(xiàn)三小時(shí)交付不是營(yíng)銷(xiāo)話術(shù)而是有清晰機(jī)制支撐的工程事實(shí)表即 APIPostgREST 把 DDL 變成 REST 端點(diǎn)省掉一整層路由與序列化代碼數(shù)據(jù)庫(kù)內(nèi)嵌鑒權(quán)RLS 策略讓權(quán)限邏輯沉淀在數(shù)據(jù)層任何客戶端路徑都無(wú)法繞過(guò)狀態(tài)與會(huì)話由 SDK 接管onAuthStateChange、getClaims、Token 刷新都藏在supabase-js內(nèi)部存儲(chǔ)與數(shù)據(jù)庫(kù)共用同一權(quán)限心智一條policy同時(shí)約束表和桶學(xué)習(xí)成本被壓縮到最小。當(dāng)然邊界也要說(shuō)清楚。BaaS 能覆蓋的是標(biāo)準(zhǔn)的 CRUD 認(rèn)證 存儲(chǔ)形態(tài)當(dāng)業(yè)務(wù)邏輯復(fù)雜到需要跨表事務(wù)編排、定時(shí)任務(wù)、第三方回調(diào)簽名驗(yàn)證時(shí)就需要 Supabase Edge Functions基于 Deno 的云端函數(shù)或直接在數(shù)據(jù)庫(kù)里寫(xiě)存儲(chǔ)過(guò)程——這些依然是后端只是換了一種更貼近數(shù)據(jù)層的寫(xiě)法。RLS 是最后一道防線也意味著它必須成為第一道防線——那 1.6 萬(wàn)個(gè)裸奔的數(shù)據(jù)庫(kù)就是給所有只寫(xiě)前端的開(kāi)發(fā)者上的最貴一課。如果你正打算用 Vue 3 做一個(gè)帶賬號(hào)體系的完整應(yīng)用不妨直接把examples/user-management/vue3-user-management拉下來(lái)跑一遍初始化、建表、魔法鏈接登錄、檔案 CRUD、頭像上傳再到npm run dev看到完整應(yīng)用在 5173 端口跑起來(lái)——這條路徑上的每一步倉(cāng)庫(kù)里都有真實(shí)可運(yùn)行的代碼等著你。剩下的三小時(shí)里你會(huì)發(fā)現(xiàn)自己省下的不是寫(xiě)后端的時(shí)間而是整整一類工程問(wèn)題?！久赓M(fèi)下載鏈接】supabaseThe Postgres development platform. Supabase gives you a dedicated Postgres database to build your web, mobile, and AI applications.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/supa/supabase創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考