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