はじめに
BaaSのsupabaseを使用し、個人開発を行っている。
経緯
今まではローカル環境のアプリからweb上のsupabaseプロジェクトのAPIを呼び出してデータのやり取りをしていたが、supabase CLIを使うことで、ローカル上にsupabaseと同等の環境をセットアップし、好きに使えるということを知ったので、やってみた。
前提
ローカルでReactアプリケーションを構築しており、任意の操作をすることでsupabaseのAPIを呼ぶロジックまで実装済である。
導入方法
上記URLに記載の手順を行えばすぐに導入できる。
プロジェクトのルートディレクトリで以下のコマンドを実行。
npm install supabase --save-dev
npx supabase init
これを行うことで、ルートディレクトリにsupabaseディレクトリが作成される。この中のconfig.tomlファイルがローカルのsupabase設定ファイルとなるが、詳しく知らなくてもよい。
この状態で、Docker Desktopを起動する。
DockerDesktopが起動している状態で、プロジェクトのルートディレクトリで以下のコマンドを実行する。
npx supabase start
しばらくすると、supabaseコンテナの立ち上げが完了し、コマンドラインに以下のような出力がされる。
╭──────────────────────────────────────╮
│ 🔧 Development Tools │
├─────────┬────────────────────────────┤
│ Studio │ http://127.0.0.1:54323 │
│ Mailpit │ http://127.0.0.1:54324 │
│ MCP │ http://127.0.0.1:54321/mcp │
╰─────────┴────────────────────────────╯
╭──────────────────────────────────────────────────────╮
│ 🌐 APIs │
├────────────────┬─────────────────────────────────────┤
│ Project URL │ http://127.0.0.1:54321 │
│ REST │ http://127.0.0.1:54321/rest/v1 │
│ GraphQL │ http://127.0.0.1:54321/graphql/v1 │
│ Edge Functions │ http://127.0.0.1:54321/functions/v1 │
╰────────────────┴─────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────╮
│ ⛁ Database │
├─────┬─────────────────────────────────────────────────────────┤
│ URL │ postgresql://postgres:postgres@127.0.0.1:54322/postgres │
╰─────┴─────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────╮
│ 🔑 Authentication Keys |
├─────────────┬────────────────────────────────────────────────┤
│ Publishable │ sb_publishable_XXXXXXXXXXXXX |
│ Secret │ sb_secret_XXXXXXXXXXX |
╰─────────────┴────────────────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────────────────────╮
│ 📦 Storage (S3) │
├────────────┬──────────────────────────────────────────────────────────────────┤
│ URL │ http://127.0.0.1:54321/storage/v1/s3 │
│ Access Key │ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx │
│ Secret Key │ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx │
│ Region │ local │
╰────────────┴──────────────────────────────────────────────────────────────────╯
色々出てくるが、全て理解しなくても問題ない。
Development Tools-StudioのURL(http://127.0.0.1:54323)にアクセスすると、Webのsupabase Dashboardそのままの画面が表示され、そこからテーブルの定義などが行える。
この後は、コードの修正を行う必要はなく、.envのsupabase関係の環境変数をコマンドライン出力のもの(Project URL,Authentication Keys)に置き換えれば、そのままローカルでsupabaseを使用できる。
データベースの他にも、StorageやEdgeFunctionなども利用可能らしい。
また、Web上のsupabaseプロジェクトとのリンクも行えるらしい。これはまだ触ってないので、また別の機会に記事を描く。
コンテナを停止するときは、npx supabase stopを実行する。Docker Desktopで直接止めようとしても、うまくいかない。
まとめ
ローカルでsupabaseが使用できることの利点はかなり大きいと感じた。（ローカル上なら、バッチ処理による大量のデータ投入、大量のクエリを行っても、Web上のプロジェクトの制限にはかからないため）
また、Dockerで別のアプリケーションコンテナを立ち上げている場合も容易にローカルのsupabaseと連携が取れるため、ローカルでの開発は基本的にsupabaseコンテナを立てて行うようにする。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼