2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Supabaseのブランチング機能が便利!GitHub+Vercel+Supabaseでプレビュー環境を使ってみた感想

Last updated at Posted at 2025-02-28

最近、Supabaseがリリースしたブランチング機能を試してみたのですが、これが想像以上に便利だったので感想をまとめます。
特に、GitHubリポジトリのブランチに応じて自動で新しいSupabase環境を作れる という点と、Vercelのプレビュー機能と簡単に組み合わせられる ところに惹かれました。

もともと、Next.js+Supabase+Vercelという構成で開発しており、Pull Requestベースのフローを取り入れていました。そこに Supabaseのブランチング機能 を導入すると、ブランチごとに独立したデータベースやAuth、ストレージが使えるプレビュー環境 が手軽に作れます。
おかげで、本番環境への影響を気にせず大幅なDBスキーマ変更を試せる ようになったり、複数ブランチで開発が並行していても衝突しない 点がとても助かっています。

image.png

ブランチング機能の概要

  • 有料プラン (Proプラン以上) で利用可能
  • GitHubリポジトリと連携し、ブランチ単位で 新しいSupabase環境 を自動生成
  • 本番環境とは別の「プレビュー環境」が作られるので、DBスキーマ変更やEdge Functionsの検証 を安全に実施可能

さらに、VercelのプレビューURL とセットで運用すると、PRが立ち上がるたびにフロントエンドもバックエンドも同期された状態でテスト環境 を準備できます。
複数の開発ブランチを並行して進めるチームであれば、かなり相性がいいと思います。

実際に使ってみて便利だと感じたポイント

1. 本番環境からの完全分離

「ステージング用のSupabaseプロジェクト」を別途用意する必要がなく、1つのプロジェクト内で本番とプレビュー環境を切り替え られます。
ブランチが増えるたびに新しいDBやAuth情報を設定する手間が減り、大きな開発が入っても本番を壊す心配なく動作確認できます。

2. DBマイグレーションをブランチ単位で検証

GitHubリポジトリの ./supabase/migrations にSQLファイルを置いておくと、プレビュー環境生成時にそのブランチ用のマイグレーションが自動適用されます。
「本番にはないテーブルやカラムを試す」 といったことが容易にできて、PRレビューもしやすくなりました。

3. Vercelプレビューとの組み合わせでURLが自動生成

Pull Request を作ると、VercelがプレビューURLを発行 → Supabaseもブランチ用の環境を起動 → それぞれの環境変数(NEXT_PUBLIC_SUPABASE_URLとANON_KEYなど)を紐づけるだけ で動くので、導入障壁が低いです。
フロントエンドとバックエンドが同じブランチ状態を参照し合うので、余計な設定ミスが減って 助かっています。

4. 複数のSupabaseプロジェクトを管理せずに済む

開発ブランチが増えるたびに新規プロジェクトを作るのは手間ですが、ブランチング機能では1つのProプランプロジェクト内で複数ブランチを発生させる だけなので、プロジェクトの乱立 を防げます。

気になる料金や注意点

  • Proプラン以上 の契約が必要で、プレビュー環境1つあたり1日0.32 USD 程度の課金がかかります。
  • プレビュー環境は5分間リクエストがないと自動的に休止(コールドスタート)するため、再開時は少し遅延が発生 することがあります。
  • 放置しているブランチが多いと、その分料金が積み上がるのでこまめにブランチを整理 しましょう。

まとめ

実際に使ってみて、Supabaseのブランチング機能は開発チームにとって非常に有用 だと感じました。

  • 本番環境への影響を抑えつつ ダイナミックにDBスキーマをいじれる
  • Vercelのプレビュー と合わせると、PR単位で独立したテスト環境 を簡単に準備
  • 複数のSupabaseプロジェクトを作る必要なし で管理コストも削減

もちろん有料機能なので、チームの開発規模や利用頻度によってコスト対効果を考える必要はあります。ただ、PRベースの開発フローを採用している のであれば、かなり導入の価値があると思います。

もし気になる方がいれば、ぜひ一度試してみてください!

参考リンク

以上、Supabaseのブランチング機能を使ってみた感想 でした。皆さんの開発にも役立てば嬉しいです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?