5分でわかる！Supabase CLIを使いこなすための開発フロー
概要
Supabase はとても便利ですが、コマンドを使いこなすにはちょっとコツが要ります。
特に最初のセットアップがちょっと大変です。ローカル環境とリモート環境を用意していた場合、どのような開発フローで進めるべきか、ちょっと悩みます。
公式ドキュメントをよく読み解けば分かるようになっているのですが、自分にとって最適な手順を見つけるのに３日間くらい掛かりました。
そのため、後続の方が役立つように「 5 分でわかる！」ようにまとめてみたいと思います。🐘
結論
Supabase CLI を使いこなすには次の 5 つのコマンドを覚えておけば OK！
supabase db dump --local -f supabase/schema.sql
supabase gen types typescript --local > types/supabase.ts
supabase db dump -f supabase/seed.sql --data-only --local
supabase db pull --local
supabase db push
これらが全体の開発フローの中で何を意味しているのかについて順番に説明します。
解説
0. コマンド操作をする前に
まずは GUI でテーブルを作成します。
ローカル環境の Supabase Studio を使って、ちょちょいとテーブルを作成しましょう。
テーブル作成ボタンをクリックします。
あとは、テーブル名やカラム名を入力して、テーブルを作成するだけで OK。簡単です。
1. schema.sql を作成する
supabase db dump --local -f supabase/schema.sql
このコマンドが実行されると、Supabase のテーブル定義が supabase/schema.sql に保存されます。
先ほど GUI で作成したテーブルの定義がここに保存されます。
2. 型定義ファイル（TypeScript）を作成する
supabase gen types typescript --local > types/supabase.ts
このコマンドでは、Supabase のテーブル定義から TypeScript の型定義ファイルを生成します。
型定義ファイルがあることによって、コードを書く際に型安全に書くことができます。
例えばこんな感じに型を利用できて便利です ↓
3. シードデータを作成する
supabase db dump -f supabase/seed.sql --data-only --local
これをおこなうと、GUI 上で作成したデータが supabase/seed.sql に保存されます。
（マイグレーションファイルを作成後であれば、supabase db resetを実行した際に、データを復元することができます。）
4. マイグレーションファイルを作成する
supabase db pull --local
このコマンドを実行すると、GUI 上でのテーブル定義とローカルのテーブル定義を比較し、差分をマイグレーションファイルとして作成します。
このマイグレーションファイルを作成することで、後の手順でリモートに反映させることができます。
また、上述のように、supabase db resetを実行することで、データも復元することができるようになります。
5. リモートにマイグレーションファイルを反映させる
supabase db push
このコマンドを実行することで、ローカルで作成したマイグレーションファイルをリモートに反映させられます。
つまり、ローカルでの変更をリモートに反映できます！ これで一覧の開発フローが完了します。
おわりに
Supabase CLI を使いこなすためには、以下の３つの状態を頭に入れておくと分かりやすいです。
- ローカル環境の Docker 上に構築された Supabase の状態
- Supabase Studio (GUI) でテーブル作成
- ローカル環境のコードの状態
- schema.sql
- supabase.ts
- seed.sql
- マイグレーションファイル
- リモート環境の Supabase の状態
- マイグレーションファイルの反映
3 つの状態を GUI や CLI で行き来することで、一連の開発フローが完了します。
Supabase はかなり使いやすいです。Row Level Security についても書きたかったのですが、長くなりそうなので今回は割愛します。
みなさんもぜひ使ってみてください ⚡️
Discussion