Supabaseのアカウントを作って、すこし管理画面を触ってみた覚書

先日Supabaseの方に開発者イベントへお誘い頂きました。触らずに登壇するのも気が引けるので、アカウント作成や簡単に管理画面を触ってみた時の覚書です。

Supabaseとは

Supabaseはオープンソース版firebaseと、そのホスティングサービスです。Postgresデータベースを利用して、認証やデータの保存とフロントから呼び出せるSDKの提供などを行なっています。

「PostgresのDBがあれば、自前でホストもできる」点が、データのポータビリティなどを考えるとかなりありがたいなと感じたのが第一印象でした。（なお、SQLはまだまだ勉強中）

とりあえずアカウントを作ってみましょう。GitHubアカウントを使ってログインもできる様子です。

今回はGitHubアカウントを利用しましょう。

OAuthの認可画面が出るので、一応権限を確認してAuthorizeしましょう。メールアドレスの読み込みだけっぽいので、そこまで気にすることもないかなと思います。

ダッシュボードに入れたら、作成完了です。無料で試せることもあり、かなり簡単にアカウントが作れますね。

認証機能やDB・エッジ関数などをまとめて「プロジェクト」として扱うことができる・・・様子です。あと、Organizationも作れるみたいなので、チームで運用する際はこちらも使うことになりそうですね。

プロジェクト作成時は、プランや名前・DBのパスワードとサーバーを配置するリージョンが選べます。

日本も選べました。ありがたいですね。

[Create new project]すると、APIキーなどの情報が表示されている画面に移ります。これで完了っぽいですね。

ページをスクロールすると、クライアントライブラリやサンプルプロジェクトの一覧が出てきました。「DB作ってみたけど・・・どうしよう？」となった時に、こういうガイドがあるのはかなり頼もしいなと思います。

せっかくなので、ダッシュボードの機能を少し触ってみましょう。

Table EditorではDBのテーブルをGUIから作成したり編集することができる様子です。WordPressやLaravelユーザーだと、phpMyAdminがイメージに近いかもしれません。

helloworldテーブルを作ってみました。idとcreated_atだけのテーブルができあがっていますね。

Insertボタンをクリックすると、row / columnそれぞれへのデータ追加操作が行える様子です。CSVからimportできるのが、地味にありがたそうですね。

Insert rowを選ぶと、こんな感じの画面が開きます。created_atは空欄だと現在時刻(now()の結果)を入れる様子です。

Saveすると、もうデータが増えました。DBの入門とかにも使えるかもしれませんね。

カラムの追加やデフォルト値の追加なども、Table Editorでできました。

すでにレコードがある場合は、「NULLを許可する」か「デフォルト値を設定して必須にする」かのどちらかになるっぽいです。

データベースまわりはかなり学習を後回しにしていたのですが、ここまでGUIが整っているなら、なんとかなりそうかなという印象を受けました。

とはいえ、これでリレーションとか外部キーまわりなどをどうやるのかとかを考え始めると、やはりPrismaやDoctorineなどの出番もでてきるかなとは思いますので、SQLはいい加減覚えていかないとなぁと思います。