Zenn
Open11

Supabaseのローカル環境を構築する + Google OAuthでログイン（2023/01)

Next.js
Google
Supabase
Nariaki IwataniNariaki Iwatani

ログイン

supabase login

アクセストークンの入力を求められる。
SupabaseダッシュボードのOrgページ（プロジェクト内ではない）の左メニューにAccess Tokenがある

Nariaki IwataniNariaki Iwatani

supabase startするとdockerが走ってない旨のエラーが出たのでインストールして実行してから再度
https://docs.docker.com/engine/install/

エラー
$ supabase start
Error: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
いけた
$ supabase start
15.1.0.21: Pulling from supabase/postgres
4b7f5b2a3113: Pull complete 
8b00aed68edc: Pull complete 
...
...
...

Started supabase local development setup.

         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: ...
service_role key: ...

Dockerは正直なところ雰囲気で使っている・・・。

Nariaki IwataniNariaki Iwatani

リモートDBを先に構成していたのでそれとリンク

supabase link --project-ref [project-id]

プロジェクトIDはProject Settings ->General settings -> Reference ID

コマンドを実行するとパスワードを聞かれる。
Database Settings -> Connection info に欄があるが、[The password you provided when you created this project]とのこと。
しるかー！と思ったがパスワードマネージャに残っていたのでセーフ。。

Nariaki IwataniNariaki Iwatani

リモートのスキーマをローカルに反映

supabase db remote commit
supabase db reset

スキーマという言葉は雰囲気で使っている。。

Nariaki IwataniNariaki Iwatani

supabase startした際に出力されたStudio URL(http://localhost:54323/)にアクセスするとウェブのダッシュボードのようなものが現れる

Nariaki IwataniNariaki Iwatani

プロジェクトで使う値を更新する
多分毎回固定？

.env.local
NEXT_PUBLIC_SUPABASE_URL="http://localhost:54321"
NEXT_PUBLIC_SUPABASE_REDIRECT_URL="http://localhost:54321/auth/v1/callback"
NEXT_PUBLIC_SUPABASE_ANON_KEY="..."
Nariaki IwataniNariaki Iwatani

Google Authを使っているのでその設定

supabase/config.toml
...
...

[auth.external.google]
enabled = true
client_id = "..."
secret = "..."
# Overrides the default auth redirectUrl.
redirect_uri = ""
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""

supabaseを再起動

supabase stop
supabase start
Nariaki IwataniNariaki Iwatani

GCPのコンソールで「承認済みのリダイレクト URI」を追加
http://localhost:54321/auth/v1/callback

注: 設定が有効になるまで 5 分から数時間かかることがあります
5分程度待ってから確認すると動いた

Nariaki IwataniNariaki Iwatani

次回以降はDocker Desktopを起動すれば勝手にsupabaseも走ってくれているよう

Nariaki IwataniNariaki Iwatani

ローカルのsupabaseのschemeの変更をリモートに適用する方法

  1. supabase db diff -f [migration_name]でローカルの変更を新しいmigrationファイルに書き込み
    [migration_name]はコミットメッセージだと思えば良さそう
  2. supabase db resetでローカルに反映（不要かも？）
  3. supabase db pushでリモートに反映