- Node.js
- Docker (ローカルで Supabase を使う際に必要になります)
Mac や WSL では mise 等を経由してインストールすることをお勧めします。
このプロジェクトをクローンしたら、まずは pnpm を使えるようにするために以下のコマンドを実行してください。
corepack enable次に、依存関係をインストールします。このコマンドは依存関係が更新された際にも必要なため、pull した後などにも実行が必要な場合があります。
pnpm install次に、Supabase の設定を行います。ローカルの Supabase を使う場合は、以下のコマンドを実行して Supabase を起動してください。(要 Docker)
pnpm supabase startしばらくすると、Supabase の各種パラメータが表示されるため、API URLとanon keyを.envファイルに設定してください。また、 http://127.0.0.1:54323 で Supabase のダッシュボードにアクセスできます。
リモートの Supabase を使う場合は、Supabase のダッシュボードから取得したAPI URLとanon keyを.envファイルに設定してください。
開発サーバーを起動するには以下のコマンドを実行してください。
pnpm run devブラウザから http://localhost:5173 でアクセスできます。ファイルの変更を検知して自動でリロードされます。
Biome を用いてコードのチェックを行います。VSCode で Biome 拡張をインストールしておくと、エディタ上でエラーを確認できます。
pnpm run lintBiome を用いてコードのフォーマットを行います。
pnpm run fmt以下のコマンドでプロジェクトをビルドできます。基本的にデプロイ時に自動で行われるので、手動でビルドする必要はありません。
pnpm run buildSupabase のテーブルを編集する場合はローカルの Supabase が必要となります。セットアップの手順に従ってローカルの Supabase を起動してください。
pnpm supabase start参考: https://supabase.com/docs/guides/local-development/overview
pnpm supabase stopマイグレーションからやり直されるため、認証情報も含めてテーブル内のすべてのデータが消去されます。
pnpm supabase db resetテーブルを編集したい場合はマイグレーションファイルを使用します。以下のコマンドで新しいマイグレーションファイルを作成できます。
pnpm supabase migration new <マイグレーション名>実行すると、supabase/migrations ディレクトリに新しいマイグレーションファイルが作成されます。このファイルを編集して、テーブルの変更を記述してください。
マイグレーションファイルが完成したらデータリセットを行うことでマイグレーションが行えます。
なお、テーブルに変更を加えた場合は TypeScript の型を再生成する必要があります。
pnpm supabase gen types --lang=typescript --local > app/libs/database.ts忘れずにコミットしてください。
マイグレーションを反映する場合は以下のコマンドを実行してください。
# ログインする
# 一回だけでOK
pnpm supabase login
# プロジェクトをリンクする
# 一回だけでOK
# project-id は Supabase のダッシュボードから取得してください
pnpm supabase link --project-ref <project-id>
pnpm supabase db pushCaution
マイグレーションを実行した場合、リモートのデータベースに変更が加えられます。場合によってはデータが消失する可能性があるため、十分に注意をしてください。 このコマンドは頻繁に実行されることはありません。通常は今からマージされる PR のブランチ上で実行されるはずです。
main にマージすると Cloudflare へデプロイされるよう設定する予定です。main からブランチを切り、プルリクエスト経由でmainへマージしてください。