背景

前回以下の記事で Flutter x Supabase x PowerSync に初めて触れてみて、この構成アリだなーと思いました。

Flutter x Supabase x PowerSync で Offline First な Todo List のサンプルを動かす

しかし一点気になったことがあります。local環境で開発していく上で、localhostで起動したSupabaseに対して、同じくlocalhostで起動したPowerSyncを利用するような構成を作りたかったのですが、現段階だとPowerSyncではまだlocalhostで起動するといったことは出来ないようでした。

Supabaseの以下のドキュメントにもあるように、Supabaseではまずlocal環境で開発することを推奨しています。

https://supabase.com/docs/guides/cli/local-development

これは結構大きいかなと思うので、まずは Offline First は諦めて Supabase のみで開発し、状況が整うのを待とうかなと思いました。まあ、PowerSyncはまだBetaですしね。ただやっぱり Offline First はUX的には超大事なので、localではSupabaseのみ、ステージング環境以降ではPowerSyncも合わせて使う、といった形で現実的に運用できそうなら、そういった選択もありかなと考えています。

本記事でやること

とりあえずSupabaseのlocal環境での開発は必須なので、慣れるためにも以下のドキュメントを読みながら、Supabaseをlocal環境で構築していきます。

https://supabase.com/docs/guides/cli/local-development

CLIのインストール

以下を参考にCLIをインストールします。

https://supabase.com/docs/guides/cli/getting-started?platform=macos

$ brew install supabase/tap/supabase

ちなみに、upgradeは以下で、

$ brew upgrade supabase

upgrade後は以下のコマンドでコンテナを再起動してくれとのことです。

$ supabase stop --no-backup
$ supabase start

Supabaseへログイン

以下のコマンドでログインします。

$ supabase login
You can generate an access token from https://supabase.com/dashboard/account/tokens
Enter your access token:
Finished supabase login

上記のURLに飛ぶと、「Generate new Token」というボタンがあります。そこを押して、適当な名前を入力したらトークンが発行されました。それをターミナルにコピペしたら無事ログイン完了です。

プロジェクトフォルダ作成

$ cd workspace
$ mkdir subapase-sample
$ cd supabase-sample
$ mkdir supabase-local-dev
$ cd supabase-local-dev
$ git init

Dockerのインストール

この作業をしていて、まだこのMacにDockerをインストールしていなかったことに気づきました。以下からインストールします。

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

Dockerを起動したら、あとはダイアログの通りにポチポチやっておきます。

Supabase起動

$ supabase init
$ supabase start

http://localhost:54323 にアクセスすると、ダッシュボードを確認できるようになりました。

psqlコマンドインストール

$ brew doctor
$ brew update
$ brew install libpq
$ echo 'export PATH="/opt/homebrew/opt/libpq/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc
$ psql --version
psql (PostgreSQL) 16.0
$ psql 'postgresql://postgres:postgres@localhost:54322/postgres'

psql (16.0, server 15.1 (Ubuntu 15.1-1.pgdg20.04+1))
Type "help" for help.

postgres=>

接続まで確認できました。

DB migration

$ supabase migration new create_employees_table

上記コマンドを実行すると、migrations ディレクトリ以下に「日時_create_employees_table.sql」というファイルが作成されました。そのファイルの中に、以下の内容をコピペします。

create table
employees (
id bigint primary key generated always as identity,
name text,
email text,
created_at timestamptz default now()
);

次に、以下のコマンドでmigrationの内容を反映します。

$ supabase db reset

今度は alter table を実行します。

$ supabase migration new add_department_to_employees_table

alter table
if exists public.employees add department text default 'Hooli';

$ supabase db reset

サンプルデータの挿入

supabase/seed.sql の中に以下の内容をコピペして反映します。

insert into
public.employees (name)
values
('Erlich Bachman'),
('Richard Hendricks'),
('Monica Hall');

$ supabase db reset

psqlコマンドでスキーマとデータを確認

これは公式のドキュメントにはなかったフローですが、個人的に気になったので確認しておきます。

$ psql 'postgresql://postgres:postgres@localhost:54322/postgres'
psql (16.0, server 15.1 (Ubuntu 15.1-1.pgdg20.04+1))
Type "help" for help.

postgres=> \d

   Schema   |          Name           |   Type   |     Owner
------------+-------------------------+----------+----------------
 extensions | pg_stat_statements      | view     | supabase_admin
 extensions | pg_stat_statements_info | view     | supabase_admin
 public     | employees               | table    | postgres
 public     | employees_id_seq        | sequence | postgres
(4 rows)

postgres=> \d employees
                                  Table "public.employees"
   Column   |           Type           | Collation | Nullable |           Default
------------+--------------------------+-----------+----------+------------------------------
 id         | bigint                   |           | not null | generated always as identity
 name       | text                     |           |          |
 email      | text                     |           |          |
 created_at | timestamp with time zone |           |          | now()
 department | text                     |           |          | 'Hooli'::text
Indexes:
    "employees_pkey" PRIMARY KEY, btree (id)

postgres=> select * from public.employees;
 id |       name        | email |          created_at           | department
----+-------------------+-------+-------------------------------+------------
  1 | Erlich Bachman    |       | 2023-10-25 23:34:05.292402+00 | Hooli
  2 | Richard Hendricks |       | 2023-10-25 23:34:05.292402+00 | Hooli
  3 | Monica Hall       |       | 2023-10-25 23:34:05.292402+00 | Hooli
(3 rows)

想定通りのスキーマが作成され、データが挿入されていました。

※普段 PostgreSQL は使わないので、「psql cheat sheet」でググってヒットしたページを参考にしました。

https://postgrescheatsheet.com/#/tables

デプロイ

Supabaseのダッシュボードから新規プロジェクトを作成します。

https://supabase.com/dashboard/projects

作成されたprojectのproject-idを使ってリンクします。

$ supabase link --project-ref <project-id>
Enter your database password (or leave blank to skip): 
Finished supabase link.

localの内容を反映します。

$ supabase db push
Applying migration 20231025232236_create_employees_table.sql...
Applying migration 20231025232523_add_department_to_employees_table.sql...
Finished supabase db push.

無事スキーマが反映されました。

RLS Policy

あとは、Row Level Security Policy の設定方法について学んでおいたら、一旦使い始められる状況になると思います。こちらのYouTubeが分かりやすかったです。

https://supabase.com/docs/guides/auth/row-level-security

本記事は以上で終わりにします。次は以下の記事を参考にFlutter のアプリケーションからSupabaseのDBに接続する部分について学んだら、個人開発中のアプリに導入していこうと思います。

https://supabase.com/docs/guides/getting-started/tutorials/with-flutter