Supabaseについてまとめ

https://no-code.media/2023/01/08/post-5133/

機能

（2023年1月時点）

• Database・・データベース
• Storage・・画像、GIF、およびビデオなどの大容量ファイルの格納
• API・・外部とサービスをつなぐAPIを生成
• Auth・・認証、User権限を付与することができる。SNS認証（Google,Facebookなど）
• Edge Function・・AWS LambdaやAzure Functionsのようなサーバーレスアーキテクチャ
• Observabillty・・監視ログのトレースとデバッグ

利用方法

• Supabaseクラウド
• Docker
• Kubernetes

https://qiita.com/kabochapo/items/6a2a391832825d17af7d

プラン

Free

下表のとおり制限がありますが、試したり少人数で利用したりする分には充分です。

このプランではプロジェクトの数は二つとなっていますが、停止した状態では無制限です！
停止/起動して同時稼働を二つまでに抑えれば三つ以上のプロジェクトを使うことができます。

Pro

プロジェクトあたり月額 $25 です。

Read/Write 数が料金に影響しないのが嬉しいところです。
予想外の高額になる心配が無用で、非正規化やカウントのために Functions を組み合わせたり Read 削減に苦労したりしなくて済みます。

Free プランと違い、「～まで込み」と書いている部分では追加料金で制限を超えて利用できます。

Edge Functions は従量制のようには書かれていないので $25 に含まれていると思われます。

Enterprise

https://zenn.dev/buenotheebiten/articles/31b33ef0687339

https://zenn.dev/youcangg/articles/66b75ccba6b58a#typescript

1. supabase
2. Javascript Client Library
   • supabase start
     • Supabase をローカルで実行
   • supabase migration
     • データベースの移行を管理
   • supabase db push
     • 本番環境にリリースするための CI/CD:
   • supabase projects
     • Supabase プロジェクトを管理
   • supabase gen types
     • データベース スキーマから型を直接生成
3. supabase cli
4. Database
   1. Table View
   2. Database Functions
   3. Database Webhooks
      • テーブルイベントが発生するたびに、データベースから他のシステムにリアルタイムでデータを送信することができる
   4. 全文検索
   5. データベースのテスト
      • Supabase CLI を使用してデータベースをテストできる
   6. サーバーレスAPI
      • データベーススキーマから直接3種類のAPIを自動生成
        - REST: レストフルインターフェースを介してデータベースと対話
        - Realtime: データベースの変更をリスニング
        - GraphQL: ベータ版
   7. 拡張機能
      • ダッシュボードからぽちぽちするだけで追加できる
5. Auth
   1. 認証
      • Email & password.
      • Magic links (one-click logins).
      • Social providers.
      • Phone logins.
   2. 認可
      • Row Level Security
      • ユーザー管理
6. Edge Functions
7. RealTime
   1. Broadcast
   2. Presence
   3. Postgres Changes
8. Storage
9. 開発フロー
   1. ローカル
   2. スキーマの差分作成
   3. 移行のデプロイ
10. TypeScript
    • CLIでschemaから型生成できる

https://note.com/libproc/n/n0c07e54bf72b

Supabase Auth

ユーザ登録に使うコード：

const { data, error } = await supabase.auth.signUp({
  email: 'example@email.com',
  password: 'example-password',
})

OAuthの場合：

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github'
})

Supabase Storage

画像のアップロード：

const { data, error } = await supabase.storage.from('bucket_name').upload('file_path', file)

画像の提供：

supabase.storage.from('bucket').getPublicUrl('image.jpg')

画像のリサイズ：

supabase.storage.from('bucket').getPublicUrl('image.jpg', {
  transform: {
    width: 500,
    height: 600,
  },
})

Edge Functions

• ユーザにもっとも近い地域（エッジ）からバックエンドの関数を提供する機能

• JavaScriptやTypeScriptのランタイムであるDenoが利用されているため、これらの言語でコードを作成するならば、高速でサービスを提供できる

• Edge Functionsのユースケース：

  • Stripeの決済機能

Realtime

• ユースケース
  • リアルタイム性の高いオンラインゲームの実装

AI & Vectors

• もしAI関連のデータをDBで扱いたい場合は、通常のDBではなく『ベクターデータ』を効率的に扱えるDBでなければいけません。
• SupabaseのDBはPostgreSQLベースのRDB（リレーショナル・データベース）ではありますが、pgvectorというライブラリを利用してベクターデータベース化することができます。

https://ritaiz.com/articles/setup-supabase

この記事では Supabase にログインしてプロジェクトを作成するところまでの手順を解説します。
Supabase でプロジェクトを作成すると以下のようにProject URL（プロジェクトの URL）とAPI Keyを取得でき、実際に Next.js や Flutter などのアプリケーションから Supabase を利用することができます。

https://giginc.co.jp/blog/giglab/supabase-nextjs

Supabaseを使えば、バックエンドをほぼ実装せずとも、認証機能やデータベース操作をする機能をWebアプリケーションに実装できます。

https://qiita.com/kabochapo/items/6a2a391832825d17af7d

リージョン

北南米、ヨーロッパ、アジア、オセアニアに 12 のリージョンがあります。

東京リージョンは五月頃に追加されました。

• West US (North California)
• East US (North Virginia)
• Canada (Central)
• West EU (Ireland)
• West EU (London)
• Central EU (Frankfurt)
• South Asia (Mumbai)
• Southeast Asia (Singapore)
• Northeast Asia (Tokyo)
• Northeast Asia (Seoul)
• Oceania (Sydney)
• South America (São Paulo)

https://qiita.com/kabochapo/items/26b1bb753116a6904664

記事公開より後に Dart 用パッケージが v1.0.0 に達し、そこからさらに改善されてきています。
エラーのハンドリング方法など大きく変わっている部分がありますので、ドキュメントをよくご確認ください。

テーブル結合

ちょっと癖があります。
使う前にここを読んでおくと入っていきやすいと思います。

https://zenn.dev/chot/articles/ddd2844ad3ae61

https://github.com/wadeen/supabase-chat-app

https://note.com/shift_tech/n/n5191b5f19c9b

作成するアプリケーションには、以下機能を持たせていきます。

• ログインページにて、Eメールアドレスとパスワードによるユーザー登録及びログインを行う
• ゲーム終了時の成績（順位と点数）を、ログイン後のメインページで登録/閲覧できる
• ユーザーの成績は、他ユーザーからは閲覧できない

作成時の言語バージョンは以下です。

• React 18.2
• Node.js 16.14
• supabase_js 1.35.4

https://corp.langcore.org/media/gpts

今回は、電話受付GPTsを作るという想定を考えます。

電話受付GPTsは、かかってきた電話の「お名前、電話番号、用件」を聞きだす、という想定で行きます。

URL : https://chat.openai.com/g/g-9I3vEJLgJ-dian-hua-fan-gpts

所要時間20分程度でActionsを連携させたGPTsができました。

https://zenn.dev/sh1n4ps/articles/34df41ddc9957e

「Supabaseのリージョンが東京の時はVercelのFunction Regionも東京にしようね」です。」

https://qiita.com/kaho_eng/items/8a7faf77222a599fb31c

1. supabaseのプロジェクトを作成しよう！
2. vercelプロジェクトの作成とGitHub連携をしよう！
3. VercelとSupabaseを連携しよう！
4. GitHubのリポジトリをクローンしよう！
5. Vercelの環境変数を取得しよう！
6. Supabaseのデータベースに接続しよう！

https://zenn.dev/suin/scraps/23d4355df14a42

https://qiita.com/Kenta_Kobayashi/items/ba445245ecd357dd19d7#比較表

比較表