【prisma&supabase】DBを使えるようになりたい話③
前回、vercelのストレージ機能からPostgreSQLがなくなっていることに気付いた。
ローカルでDBを立ち上げて、DBの学習を進めても、vercelにアップできないのは残念だなと思い、 Next.jsでアプリケーション開発している人は、DBどうやって構築しているのか調べた。
するとNext.js、prisma、supabase、docker、vercelを組み合わせる方法を紹介している記事を見つけた。
Next.jsアプリケーションのVercel + Supabase + Prisma構成における本番環境と開発環境での環境構築ガイド
この記事を参考に、DBを使えるようになりたい話②で作成したToDoListをvercelにデプロイした。Next.jsアプリケーションのVercel + Supabase + Prisma構成における本番環境と開発環境での環境構築ガイドをほぼ丸々参考にしたので、この記事では、実際にやってみたときに忘れたくないなと思ったことをまとめる。
| 開発環境 | バージョン |
|---|---|
| Next.js | 15.2.1 |
| TypeScript | 5.0.0 |
| sass | 1.85.1 |
| prisma | ^6.4.1 |
| @prisma/client | ^6.4.1 |
| react-hook-form | ^7.54.2 |
| supabase | ^2.19.6 |
成果物
操作するたびに、DBにアクセスしているからか挙動が遅いが、ひとまずの機能は達成。
そもそもsupabaseとは（私なりにまとめる）
色々な方が記事をまとめてくださっていて、どの記事にも共通するのが、「supabaseは、BaaS（Backend
as a Service）」であること、そして、「Firebaseの代替」という表現が使用されていること。
supabaseもfirebaseもデータベースの構築やAPIの作成といったバックエンド側の機能をクラウド上で手軽に実装できるBaaS(Backend
as a
Service)である。これによりバックエンドの環境構築の手間が省かれ、フロントエンドの開発に集中することができるメリットがある。
supabaseとfirebaseの最大の違いは、FirebaseがFirestore（ドキュメント指向のNoSQLデータベース）を採用しているのに対し、SupabaseはPostgreSQL（リレーショナルデータベース）を採用している点である。そのため、「FirebaseでRDBが使えたらいいのに…」と考えていたユーザーの人気を集めているようだ。
なお、supabaseとfirebaseが全く同じ機能を有しているわけではないため、「Firebaseの代替」という表現については誤解を招かないように注意したい。
Firebaseは認証、NoSQLデータベース、サーバーレス実行環境など多機能なプラットフォームだが、SupabaseはPostgreSQLを基盤としながら、認証・ストレージ・リアルタイム機能などを拡張したサービスである。そのため、用途に応じて適切なサービスを選ぶ必要がある。
記事を参考に作業を進める中で自分なりに作業した点
docker desktopについて
ローカル環境にsupabaseをインストールし、展開するためにはdockerが必要だった。
dockerをこれまで使用したことがなかったため、docker desktopをインストールするところから作業を進めた。
docker descktopのインストールが完了したら、supabase CLIをローカル環境にインストールする。その後,dockerコンテナとして起動させることで、ローカル環境でもsupabaseを立ち上げることができた。
supabase CLIをローカル環境にインストールする手順は以下のページを参照
Local Development & CLI
supabaseをインストールするディレクトリについて
sSupabaseをローカル環境で立ち上げる際、どのディレクトリにインストールすべきか迷ったため、今回は
To Do Listのプロジェクトディレクトリに npmコマンドを使用してインストールした。
To Do Listのプロジェクトディレクトリは、Gitで管理している。ただし、Supabaseのファイルはローカル環境のみで使用し、データ量もそこそこあるため、Supabaseフォルダ配下のファイルがGitに含まれないよう.gitignore に追記した。