こんにちは、Webエンジニアのまさぴょんです！
今回は、Supabaseのlocal開発・環境構築とSupabase CLI について解説していきます🐱
Supabaseとは？
Supabaseは、Firebase代替として注目を集めているオープンソースのBaaS(BackEnd as a Service)です。
PostgreSQLを基盤としており、データベース管理、認証、ストレージ、Vector Store、リアルタイムのデータ更新、サーバーレス関数などの機能が提供されています。
開発者はSupabaseを使用することで、自動生成されるRESTful APIを介してデータベースとやり取りして、リアルタイムのデータ同期やユーザー認証を簡単に実装できます。
また、オープンソースであるため、コードを自由にカスタマイズすることも可能です。
Supabase DocsのTopを見れば、多機能であることや、さまざまなフレームワークに対応していることがすぐにわかります👀🌟
Supabaseのlocal開発環境構築のための前提条件
Supabaseのlocal開発・環境構築を始めるにあたり、次の2つが必須になります👀
- Dockerのインストール
- SupabaseはDockerコンテナ上で動作するため、Docker のインストールが必須です。
- Supabase CLIのインストール
- Supabase CLIはローカル開発を容易にするためのツールです。
npmを使用する場合
npm install -g supabase
Homebrewを使用する場合（macOS）
brew install supabase/tap/supabase
Supabase local環境構築の手順
ここからは、順を追って、Supabaseのlocal環境を構築していきます💪🥺🔥
1. 新しいプロジェクトの作成
mkdir my-supabase-project && cd my-supabase-project
# Local Supabase 環境を作成する
supabase init
supabase initコマンドを実行することで、supabaseディレクトリと設定ファイルが生成されます。
my-supabase-project % tree
.
└── supabase
└── config.toml
2 directories, 1 file
2. Supabase スタックを起動
次のコマンドで、Supabase スタックを起動することができます。
supabase start
すべての Supabase サービスが実行されると Local Supabase の認証情報を含む、次のような情報が出力されます👀✨
API, DB, Studio, Inbucketなどの Local Supabase Stackが起動していることがわかります🌟
Started supabase local development setup.
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
JWT secret: ・・・ 省略 ・・・
anon key: eyJh......
service_role key: eyJh......
service_role key: eyJh......
S3 Access Key: ・・・ 省略 ・・・
S3 Secret Key: ・・・ 省略 ・・・
S3 Region: local
3. Supabase Studioへのアクセス
ローカル開発環境には、データベースを操作するためのグラフィカル インターフェイスである Supabase Studio (http://localhost:54323) が含まれています。
Supabase Studio では、データベースや認証設定などを確認することができます。
4. アプリケーションからの接続について
アプリケーションとの接続の際は、.envに接続情報を記載して、接続します。
SUPABASE_URL=http://localhost:54321
SUPABASE_ANON_KEY=...
SUPABASE_SERVICE_ROLE_KEY=...
その他のSupabase CLIでの操作について
ここでは、上記の環境構築では触れなかった Supabase CLI について記載します🌟
Supabase Stackの停止
supabase startコマンドで起動したSupabase Stack をまとめて停止したい場合は、次のコマンドを使用します。
supabase stop
Supabaseのローカル環境変数の状態を表示する
supabase statusは、Supabaseのローカル環境変数の状態を表示するコマンドです。
supabase status
Supabase CLI help確認
supabase -h
追加設定
ポートの変更
デフォルトのポートを変更する場合は、supabase/config.tomlを編集します。
まとめ
Supabase の local 環境構築は手軽にできることがわかりました🙌
Supabaseを活用して、さらに記事を書いていきたいと思います💪🥺🔥
参考・引用
Discussion