🍷

Firebaseを置き換える？新時代baas supabaseを触ってみた

2021/10/02に公開

Firebase

動機

techcrunchの記事にてfirebaseを置き換えると意気込んでいる、supabaseが資金調達をしたというニュースを見かけ、個人的にbackend as a serviceに興味があったので触ってみました。

GetStart

詳しく知りたい方はdocumentを見てください。自分の記事では実際に触ってみた感想を記述していきたいと思います。
https://supabase.io/docs

料金

基本無料、データベースのバックアップなど取りたい、さらにスケールさせたい場合は月25ドルです。
個人開発の規模なら無料枠でも大丈夫そうです。
https://supabase.io/pricing

プロジェクトの立ち上げ

データベースの名前とpasswordを入力してリージョンに東京を選択します。
これだけでプロジェクトを立ち上げて、数分でデータベース(PostgreSQL)が用意されます。

プロジェクトトップページをみるとデータベースだけではなく、認証とストレージが使用できる模様です。

Table editorを開くと、データベーススキーマを編集することができます。

名前とカラム名を入力して新しいテーブルを追加する。csvからインポートもできるらしく、自分は既存プロジェクトのデータをcsvに落としてきてインポートしました。カラム名の自動検出だけではなくTypeもしっかり認識してくれるようです。csvに記載されていたデータは初期データとしてしっかりと登録されました。

登録したテーブルがこのような形で閲覧できる。編集機能ももちろんついていて管理画面としても利用できます。

データを登録するとドキュメントまで生成してくれる。
基本的なデータの取得方法等が記載されている。変更の検出などもできます。

Next.jsに導入してみる

ドキュメントガイドはこちら。Next.js以外にもsampleやguidesが充実していてとても良い感じです。

npm install @supabase/supabase-js

Unpacked Size
153 kB

パッケージのサイズは150kb、firebaseと比較するとかなり軽い。firebaseにもtreeshakingができるようになったとまたの噂で聞いたり、機能的にも単純比較はできないですがよさそうです。

npm install firebase

Unpacked Size
26.3 MB

設定をしてクライアント側でコードを書きます。

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  "hoge",
  "fuga"
)

取得するコード

  const [blog, setBlog] = useState<any[]>();

  useEffect(() => {
    async function fetchSupabase() {
      const { data: blogs, error } = await supabase
      .from('blogs')
      .select('*');
      setBlog(blogs);
    }
    fetchSupabase();
  }, [])

取得することができました。速度も今の所問題なさそうです。(高々120件のデータ取得ですが)

そのほか

認証は各種プロバイダ(Twitter, Google)を網羅しています。
UIも全体的にわかりやすくできておりとても使いやすいです。

感想

個人的に気になっているのはGraphql対応。スキーマをクライアントと共有してコードと型生成したいなと思っています。
VS graphqlの部分にsupabaseでもsingle round-tripで取得できるよとは記載されていますが、graphqlサーバー立てたい場合はデータベースに接続して自分で作ってねという感じでした。新機能としてCRUDだけじゃなくてGraphqlも追加されるのか期待です。(この説明を見る限りなさそう?)

VS firebase

firebaseとの比較では、NoSQLかRDBかが差別点。
firestoreの設計と権限・認証に手こずっている人もいると思うので、慣れ親しんだRDBなら設計もしやすいのではないかと思います。権限周りは厳しいのは、Baasの宿命な気がしています。

以前firestoreでアプリを組んだときにやはりレスポンスが通常のサーバーより遅いなと感じたことがあります(定量的な指標は記録していません🙇‍♂️)、supabaseはそこらへんがどうなのか気になります。(今のところは問題なさそうです)

VS hasura

類似サービスでいうとhasuraがあげられます。こちらはHerokuのDBを無料で立ち上げてGraphql Serverを自動生成してくれるサービスです。使い心地はsupabaseとほとんど一緒ですがGraphqlがやはり優秀。個人的にはcsvをインポートしてデータの追加などができないので少し痒い所に手が届かない感があります(その機能があったらごめんなさい)。

https://hasura.io/

まとめ

Backend as a serviceはどれもクライアントのコードを書くだけでwebサービスを開発することができとても夢を感じます。vercel+next+baasで既にかなり簡単に立ち上げられるようになってきている流れはとてもいいなと思っています。

クライアントからデータベースを触れるツールは、人数や時間などの影響で作業量があまり取れない際には大活躍しそうな反面、ビジネスロジックをどこに書くの問題やデータベースを触る関係上の認証や権限の複雑さなどまだまだ欠点があると思います。
実際に業務で本格的に本番稼働させるのもまだ難しそうですが、†バックエンドエンジニア†の仕事が奪われる時が楽しみです。