使用Supabase快速构建应用

Supabase是什么

BaaS（Backend as a Service，后端即服务）是指我们不再编写或管理所有服务端组件，可以使用领域通用的远程组件（而不是进程内的库）来提供服务。理解BaaS，需要搞清楚它与PaaS的区别。

PaaS需要参与应用的生命周期管理，BaaS则仅仅提供应用依赖的第三方服务。典型的PaaS平台需要提供手段让开发者部署和配置应用，例如自动将应用部署到Tomcat容器中，并管理应用的生命周期。BaaS不包含这些内容，BaaS只以API的方式提供应用依赖的后端服务，例如数据库和对象存储。BaaS可以是公共云服务商提供的，也可以是第三方厂商提供的。其次从功能上讲，BaaS可以看作PaaS的一个子集，即提供第三方依赖组件的部分。

BaaS服务还允许我们依赖其他人已经实现的应用逻辑。对于这点，认证就是一个很好的例子。很多应用都要自己编写实现注册、登录、密码管理等逻辑的代码，而对于不同的应用这些代码往往大同小异。完全可以把这些重复性的工作提取出来，再做成外部服务，而这正是Auth0和Amazon Cognito等产品的目标。它们能实现全面的认证和用户管理，开发团队再也不用自己编写或者管理实现这些功能的代码。

Firebase是一家典型的BaaS公司，它可以帮助手机以及网页应用的开发者轻松构建App。通过Firebase的框架就可以简单地开发一个App，无需服务器以及基础设施，简单来说，它就是一整套的解决方案。

Supabase 是一个开源的 Firebase 替代方案。官方表示，其正在使用企业级开源工具构建 Firebase 的功能。Supabase 可以：

• 监听数据库的变化。
• 查询你的表，包括过滤、分页和深度嵌套关系（如GraphQL）。
• 创建、更新和删除行。
• 管理你的用户和他们的权限。
• 使用一个简单的用户界面与你的数据库进行交互。

Supabase的美妙之处在于，在可能的情况下，他们选择了使用现有的库和数据库。他们没有利用最先进的技术，而是使用PostgreSQL来实现大量的功能，并使用其他库来实现其他功能。从锁定的角度来看，缺乏自定义的功能是一件好事。

下面我们通过简短的五步带你快速的开发一个无需后端服务器的web应用

开始做实验咯

克隆代码

git clond https://gitee.com/memfiredb/supabase.git

创建应用

登录memfire cloud创建应用，并获取服务地址以及token信息

Anon public是客户端API密钥。它允许“匿名访问”您的数据库，直到用户登录。登录后，密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

注意：service_role secret可以绕过任何安全策略完全访问您的数据。这些密钥必须保密，并且要在服务器环境中使用，决不能在客户端或浏览器上使用。

在后续示例代码中，需要提供REACT_APP_SUPABASE_URL和REACT_APP_SUPABASE_KEY。

配置访问秘钥

将上一步中获取的anon public和网址分别设置到REACT_APP_SUPABASE_KEY和REACT_APP_SUPABASE_URL中

supabase/examples/react-todo-list/src/lib/constants.js

创建数据表

找到该对应的数据库，点击在线sql编辑器按钮，创建表及安全策略

create table public.todos (  id bigint generated by default as identity primary key,  user_id uuid references auth.users not null,  task text check (char_length(task) > 3),  is_complete boolean default false,  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null);alter table public.todos enable row level security;create policy "Individuals can create todos." on public.todos for    insert with check (auth.uid() = user_id);create policy "Individuals can view their own todos. " on public.todos for    select using (auth.uid() = user_id);create policy "Individuals can update their own todos." on public.todos for    update using (auth.uid() = user_id);create policy "Individuals can delete their own todos." on public.todos for    delete using (auth.uid() = user_id);

运行程序

npm config set registry https://registry.npm.taobao.orgcd supabase/examples/react-todo-listnpm installnpm run start --host 0.0.0.0

程序界面如下图