Loading...

2023-11-03(金) 15:00

⚙️ Supabase CLIとSupabaseのローカル開発環境をセットアップする

Supabase
Supabase CLIをmacOSで使えるようにし、Supabaseをローカル環境に構築するまでの手順を解説します。

目次

前提と注意事項

この記事では以下を前提としています。

  • Docker Desktop を使用します
  • Git を使用します
  • macOS を使用します（Windows、Linux の場合は別方法で可）
  • Homebrew を使用します

この記事のゴール

ローカル環境の中で Supabase を起動して、ブラウザからローカル環境の Supabase にアクセスするところまでをゴールとしています。 以下はsupabase.com上のダッシュボードではなく、自身の PC 内（ローカル環境、localhost）で動かしている Supabase のダッシュボードになります。

ローカル環境のSupabaseダッシュボード

Supabase はローカル環境の中に Web ダッシュボード含めて Docker コンテナとして起動することができ、ローカルで開発してその内容をリモートにデプロイすることができます。 なお、この記事の内容は 以下の Supabase の公式ドキュメントに従っています。

Supabase CLI

The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.

supabase.com

Local Development

How to use Supabase on your local development machine.

supabase.com

Supabase CLI を使ったローカル環境での開発は何が嬉しいか

Supabase CLI をインストールしていくつかのコマンドを実行するだけで、自分の PC 上（ローカル環境）で Supabase 全体をローカルで実行できます。 そのため、ローカル環境でデータベースを作成して実際にテストデータを投入して動作確認し、その上で本番環境の Supabase 上にデプロイしたり、データベースのマイグレーションを管理したり、データベーススキーマから直接テーブルを生成することも可能です。 これによりデータベース関連の管理と開発が大変楽になります。

Supabase CLI を macOS にインストール

公式ドキュメントに従って、Supabase CLI を macOS に従ってインストールします。以下を実行します。 なお、公式ドキュメントには Windows、Linux へのインストール方法、npmを使ったインストール方法も記載されています。

ターミナル
$ brew install supabase/tap/supabase

以上で Supabase CLI のインストールは完了です。以下のようにsupabaseコマンドでバージョンを確認できれば問題なくインストールされています。

ターミナル
$ supabase -v
1.110.1

Supabase CLI のためのアクセストークンを作成する

Supabase CLI を使って Supabase のプロジェクトを操作するためには、Supabase のアクセストークンが必要です。 まず、Supabase のダッシュボードにログインします。 ログインすると、以下のようにサイドバーにAccess Tokensというメニューがあるのでこれをクリックします。

Supabaseのダッシュボード

Access Tokensのページに移動すると、以下のようにGenerate new tokenというボタンがあるので、これをクリックします。

SupabaseのAccess Tokensページ

以下のようにアクセストークンの名前を入力するダイアログが表示されるので、適当な名前を入力してGenerate tokenをクリックします。

Access Tokenの名前を入力するダイアログ

Generate tokenをクリックすると以下のように指定した名前で新しいアクセストークンが作成されます。

新規作成したAccess Token

上記画像内の緑枠の中に表示されているsbp_***************************のような文字列がアクセストークンです。この文字列をコピーしておきます。なお、このアクセストークンはここでコピーして大切に保存しておかないと二度と表示できない値になります。 もし万が一アクセストークンを紛失してしまった場合は、再度アクセストークンを作成する必要があります。 このアクセストークンを後ほど Supabase CLI を使うために使用します。

Supabase CLI でログインする

Supabase CLI を使い始めるために、まずは作成したアクセストークンを使って自身の Supabase プロジェクトにログインします。 なお、ここからは Supabase を使うプロジェクト（Next.js や Flutter など Supabase を使用するプロジェクト）のルートディレクトリでコマンドを実行します。
ここではmy-projectがそのルートディレクトリとします。また、事前準備としてgit initを実行して Git 管理下に置いておきます。その後supabase loginを実行します。

./my-project
$ cd my-project
$ git init
$ supabase login

supabase loginを実行すると、以下のようにアクセストークンの入力を要求されるので、先ほど作成したアクセストークンを入力して Enter を押下します。

./my-project
$ supabase login
You can generate an access token from https://app.supabase.io/account/tokens.
Enter your access token: sbp_1uj93uh9dn0813804j08d0183je0d8qjd08130hr
Finished supabase login.

正常にログインできると上記のようにFinished supabase loginと表示されると思います。 これで Supabase CLI を使う準備が整いました。

プロジェクトを初期化する

続いて Supabase CLI を使ってプロジェクトを初期化します。ここでの初期化は Supabase のプロジェクトを作成するわけではなく、Supabase CLI を使うための設定ファイルを作成するという意味です。 以下のコマンドを実行します。

./my-project
$ supabase init

以下が実行結果です。

./my-project
$ supabase init
Generate VS Code workspace settings? [y/N] y
Open the my-web.code-workspace file in VS Code.
Finished supabase init.

Generate VS Code workspace settingsは VSCode を使っている場合に VSCode 用の設定ファイルを作成するかの質問になります。ここではyを入力して Enter を押下します。 Finished supabase initが表示されれば正常に初期化が完了しています。

supabase initが完了すると、プロジェクトのルートディレクトリに以下の内容のsupabaseディレクトリが作成されます。

./my-project/supabase
.
├── .gitignore
├── config.toml
├── functions
│   └── .vscode
│       ├── extensions.json
│       └── settings.json
└── seed.sql

これでプロジェクトの初期化が完了しました。

ローカル開発環境の起動と停止

Supabase CLI を使ってローカル開発環境を起動するには、以下のコマンドを実行します。

./my-project
$ supabase start

実行すると以下のように Supabase の Docker コンテナのダウンロードと起動が開始されます。これは初回だとネット環境によってそれなりに時間がかかります。（数分〜数十分）

./my-project
$ supabase start
10.2.0.100: Pulling from supabase/postgres
82d728d38b98: Downloading [======>                                            ]  3.168MB/25.97MB
6ce57be9ced3: Downloading [====>                                              ]  4.195MB/51.51MB
337c8d2e192a: Downloading [==>                                                ]  4.324MB/81.37MB
46ee4ecbf8c1: Waiting
9403beb3387b: Waiting
256e52a16eb3: Waiting
584015c8b72b: Waiting
9b62793e50ad: Waiting
640a5b417e65: Waiting
c6976f1a6843: Waiting
208b2985eeb2: Waiting
a85622667b18: Waiting
7b6f9040b3ad: Waiting
a5d7f896a8e8: Waiting
6deb962d5f64: Waiting
8630dc6ca20e: Waiting
bba7952b36bd: Waiting
c5b10ae49763: Waiting
fa632c0929b1: Waiting
7222fda62d41: Waiting
7a46818b7686: Waiting
39f992dbfa16: Waiting
fbd7ab61253c: Waiting
⢿ Starting database...

正常に起動すると、以下のように表示されます。

my-project
 
# ...省略...
 
1bc163a14ea6: Already exists
c0b8eb3421ba: Pull complete
1c6518ed2e78: Pull complete
615c2409379e: Pull complete
325367a969d5: Pull complete
b63261765e31: Pull complete
ec9488303db3: Pull complete
42beb6b02e8b: Pull complete
d4ce31ea57db: Pull complete
110e505f63ae: Pull complete
Digest: sha256:sdjf0w4j0t8jiawefdoaw0de89h082h340taoweuknfjkdalnsdkfjcas
Status: Downloaded newer image for public.ecr.aws/supabase/studio:20231023-7e2cd92
Started supabase local development setup.
 
         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
          DB URL: postgresql://postgres:[email protected]:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU

上記に表示されている各 URL、JWT secretやanon key、service_role keyは自身がローカルで開発する Web アプリケーションやモバイルアプリからローカルの Supabase にアクセスする際に必要になる情報です。

試しにブラウザで上記のStudio URLに続いて表示されている URLhttp://127.0.0.1:54323にアクセスしてみると、以下のように Supabase のダッシュボードと同様の画面が表示されます。

ローカル環境のSupabaseダッシュボード

これで Supabase CLI とローカル環境で動く Supabase のセットアップが完了しました。

停止方法

ローカルの Supabase を停止したい場合は以下のようにsupabase stopを使用します。

./my-project
$ supabase stop

もしローカル環境のデータベースをリセットして停止したい場合は以下のように--no-backupを使用します。

./my-project
$ supabase stop --no-backup

Cannot connect to the Docker daemon エラー

自身のローカル環境で Docker が起動していないと、supabase startを実行すると以下のようなエラーが表示されます。

./my-project
$ supabase start
Cannot connect to the Docker daemon at unix:///Users/username/.docker/run/docker.sock. Is the docker daemon running?
  in github.com/supabase/cli/internal/utils.AssertDockerIsRunning:52
  in github.com/supabase/cli/internal/start.Run:38
Try rerunning the command with --debug to troubleshoot the error.

このエラーが表示された場合は、Docker がローカル環境にインストールされて起動していることを確認してみてください。

port is already allocated エラー

もしすでにローカル環境で起動している Supabase がある場合や、もしくは何かしらのサービスが Supabase が使用したいポート番号（54322など）を使用している場合は、
以下のようなBind for 0.0.0.0:54322 failed: port is already allocatedエラーが表示されます。
他に起動している Supabase を停止するか、他のサービスが使用しているポート番号を変更するなどして解決が必要です。

./my-project
✗ supabase start
10.2.0.100: Pulling from supabase/postgres
82d728d38b98: Pull complete
6ce57be9ced3: Pull complete
337c8d2e192a: Pull complete
46ee4ecbf8c1: Pull complete
9403beb3387b: Pull complete
256e52a16eb3: Pull complete
584015c8b72b: Pull complete
9b62793e50ad: Pull complete
640a5b417e65: Pull complete
c6976f1a6843: Pull complete
208b2985eeb2: Pull complete
a85622667b18: Pull complete
7b6f9040b3ad: Pull complete
a5d7f896a8e8: Pull complete
6deb962d5f64: Pull complete
8630dc6ca20e: Pull complete
bba7952b36bd: Pull complete
c5b10ae49763: Pull complete
fa632c0929b1: Pull complete
7222fda62d41: Pull complete
7a46818b7686: Pull complete
39f992dbfa16: Pull complete
fbd7ab61253c: Pull complete
Digest: sha256:9j0248jt08ef0284j0qj8340jd0239j0j9rq2038jf0q8ej3r0fr8q34t
Status: Downloaded newer image for public.ecr.aws/supabase/postgres:20.1.0.100
Error response from daemon: driver failed programming external connectivity on endpoint supabase_db_my-web (ss08j048jt0qj8024rf0q29j0d920j904d9q02j4t): Bind for 0.0.0.0:54322 failed: port is already allocated
Try rerunning the command with --debug to troubleshoot the error.

まとめ

Supabase CLI を使ってローカル環境に Supabase 環境を構築するところまでを解説しました。 ここまでは何も恩恵はないですが、Supabase CLI を使ってデータベースを作成したりテーブルに変更加えたり、様々ことが可能です。 そしてローカルで開発したデータベースを本番環境にデプロイするときにも、Supabase CLI を使ってデータベースのマイグレーションを行うことができます。