对于想快速实现一个产品而言,如果使用传统开发,又要兼顾前端开发,同时又要花费时间构建后端服务。然而有这么一个平台(Baas Backend as a service)后端即服务,能够让开发人员可以专注于前端开发,而无需花费大量时间和精力来构建和维护后端基础设施。
对于只会前端的人来说,这是一个非常好的选择。后端即服务的平台使得开发人员能够快速构建应用程序,更快地将其推向市场。当然了,你可以将你的后端应用接入 Baas,这样你就无需配置数据库,编写复杂的身份效验。
如果你想了解 Baas,我想这篇文章或许对你有所帮助。
什么是 Supabase?
在摘要部分也介绍到名词 BaaS (Backend as a Service) ,意思为后端即服务。这个概念是在我接触 Serverless 的时候了解到的,更准确来说是腾讯云开发。当时在编写小程序的时候,只需要专注与应用业务逻辑,而不用编写数据存储,身份验证,文件存储等后端服务,这些统统由 BaaS 平台所提供。 通常会配合 Serverless 函数使用,通常也叫 FaaS(Function as a Service)。通常来说,FaaS 会依赖于 BaaS 平台。
而 Supabase 便是 BaaS 的平台之一。Supabase 是一个开源的 Firebase 替代品。使用 Postgres 数据库、身份验证、即时 API、边缘函数、实时订阅和存储启动项目。
你也许听过 Firebase,由 Google 提供的私有云服务,但开发者无法修改和扩展其底层代码。而 Supabase 是开源的,提供了类似 Firebase 的功能,且定价灵活,并且官方自称为 Firebase的替代品。
BaaS 与 CMS 有何不同?
BaaS 通常只专注于应用的后端服务,而 CMS 则是专注与内容管理。不过 BaaS 比较依赖云服务,而 CMS 通常只依赖于 web 后端技术。如果你想搭建一个内容站点(视频,音频,文章),并且作为网站管理员,那么 CMS 就是一个很好的选择,并且有相当多的主题模板。反之,不想搭建后端服务,减少运营程序,那么毫不犹豫的选择 BaaS。
注册 Supabase
进入 supabase 登录界面 选择 Continue With Github
输入 Github 账号密码进入主页面,新建一个项目
为该项目起名,设置数据库密码,以及分配地区。
创建 supabase 项目对密码要求非常严格,像 a123456 这种根本无法通过,像 ●●●●●●●●●● 密码就可以。
地区方面优先就近原则,而最近的也就是日本与韩国,很无奈 supabase 在大陆和港澳台并未设立服务器。
等待片刻,你将拥有一个免费的后端服务!
supabase 会提供一个二级域名供开发者访问,也就是这里 Project Configuration 的 URL,对应的这个二级域名 azlbliyjwcxxxxx 也就是你这个项目的唯一标识 Reference ID(下文称 项目 id)。你可以到 https://app.supabase.com/project/你的项目 id/settings/api 中查看相关配置。
体验一下
这里参考到了官方文档 Serverless APIs。
首先,创建一个 todos 表,并新增字段(列)task 为 varchar 类型,Save 保存。
Insert row 添加一行记录,id 为 1,task 为 code。
现在有了数据后,正常来说我们应该做什么?请求一下数据看看?不不不,应该是设置数据的权限。
打开到下图界面,我们要为 todos 数据新增一个 policy 策略。
supabase 针对不同的场景提供了相应的策略方案模板,你也可以根据你的需求进行设置,这里作为演示不考虑太复杂,选择第一个允许任何人都可以请求到 todos 数据。
接着下一步即可
此时就新增了一个所有用户都可查询的 todo 的策 略,同样的你还可以添加只有授权用户才能够创建更新删除 todo,更新与删除只能操作属于自己的 todo 资源。
这时候设置好了数据的权限后,就可以尝试去请求了,打开下图页面,将 URL 与 apikey 复制下来。
选择你一个 http 请求工具,这里我选用 hoppscotch,将信息填写上去,请求将会得到一开始所创建的 todo 数据。
除了 restful api 风格,还支持 graphql 风格,可查阅文档 Using the API
使用类库
正常情况肯定不会像上面那样去使用,而是通过代码的方式进行登录,CRUD。这里使用 Javascript Client Library,替我们封装好了 supabase 的功能。
首先,安装依赖
npm install @supabase/supabase-js
创建 客户端实例
import { createClient } from '@supabase/supabase-js'
此时准备好上述的 URL 与 apikey,用于创建 supabase 实例,不过 supabase 还提供 type 类型支持,可以将生成的 database.types.ts
导入到实例中,如
import { createClient } from '@supabase/supabase-js'
import { Database } from 'lib/database.types'
const supabase = createClient<Database>(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)
此时有了 supabse 对象后,就能够请求数据了,像上述通过 http 的方式获取 todos 数据,在这里对应的代码为
const { data, error } = await supabase.from('todos').select()
官方的演示例子 非常清晰,这里就不在演示新增更新等示例。