Supabase検証用プロジェクト

管理者がアカウントを発行して運用するアプリケーションを想定しています。

Getting Started

Node.js のインストール（既に終わっている場合は省略）

20 系の最新安定版を利用します。

asdf などを使ってバージョン管理を出来るようにするのがオススメです。

Docker Desktopのインストール（既に終わっている場合は省略）

以下からインストールを行います。

https://matsuand.github.io/docs.docker.jp.onthefly/desktop/mac/install/

https://supabase.com/docs/guides/cli/local-development にも記載がありますが OrbStack 等の別のツールでも利用出来るようです。（筆者は未確認）

依存Packageのインストール

npm ci

Supabaseの起動

以下のコマンドを実行します。

npm run supabase:start

環境変数の設定

以下の環境変数を設定します。

NEXT_PUBLIC_SUPABASE_URL=Supabaseの "API URL" を設定
NEXT_PUBLIC_SUPABASE_ANON_KEY=Supabaseの "anon key" を設定

具体的な値の確認は以下のコマンドを実行すると確認できます。

npm run supabase:status

アプリケーションの起動

以下のコマンドを実行します。

http://localhost:24000 にアクセスするとアプリケーションが表示されます。

npm run dev

メールの受信確認について

http://localhost:24000/login/magiclink にアクセスするとMagicLinkによるログインが実行可能です。

しかしローカル環境ではメールの送信は行われない為、Inbucket というツールでメールの内容確認を実施します。

以下のURLでツールにアクセス可能です。

http://127.0.0.1:54324

npm run supabase:status を実行すると Inbucket URL という項目があるのでそこからもURLを確認可能です。

Supabaseの停止

以下のコマンドを実行します。

npm run supabase:stop

SupabaseのMigration実行（ローカル環境）

以下でMigrationを実行します。

npm run supabase:db:reset

このコマンドは一度DBをリセットしてからMigrationを実行するのでローカル開発環境のデータが消えてしまう点にご注意ください。

SupabaseのMigration実行（開発、本番環境）

Vercelで運用されているので、Vercel上で以下のnpm scriptが実行されるようになっています。

• supabase:login
• supabase:link
• supabase:db:push
• vercel:build

以下の環境変数を設定する事でローカルからでも本番環境のSupabaseプロジェクトへのMigrationが可能です。

しかし誤って本番環境のデータを破壊してしまうリスクがある為、緊急時以外の利用は非推奨となります。

• SUPABASE_PROJECT_ID
• SUPABASE_ACCESS_TOKEN
• SUPABASE_DB_PASSWORD

以下のトリガーで実行されます。（Vercelへのデプロイタイミングと同時です）

開発環境用SupabaseプロジェクトへのMigration

main Branch以外へのPushが行われた場合に実行されます。

本番環境用SupabaseプロジェクトへのMigration

main BranchへのPushが行われた場合に実行されます。

SupabaseのMigrationファイル作成

以下のように実行します。

npm run supabase:migration:new create_triggers_functions_refresh_updated_at
npm run supabase:migration:new create_table_users
npm run supabase:migration:new create_triggers_on_users

supabase/migrations/20240529151715_create_table_users.sql のようなファイルが作成されます。

Migrationファイルの命名規則

トリガー関数

create_triggers_functions_トリガー関数名 という命名規則に従います。

例えば refresh_updated_at というトリガー関数を作成する場合、以下のように実行します。

npm run supabase:migration:new create_triggers_functions_refresh_updated_at

テーブル作成

create_table_テーブル名 という命名規則に従います。

例えば users というテーブルを作成する場合、以下のように実行します。

npm run supabase:migration:new create_table_users

トリガー設定

create_triggers_on_テーブル名 という命名規則に従います。

例えば users というテーブルにトリガーを設定する場合、以下のように実行します。

npm run supabase:migration:new create_triggers_on_users