こんにちは、技術部のYです！
はじめに
BaaSであるSupabaseの、Edge Functionsという機能のQuickStartを進めます。 ローカルでプロジェクトを作成し、本番へのデプロイを行います。
動作環境
macOS Ventura 13.4.1 supabase 1.145.4
Supabaseとは
公式サイト オープンソースのFirebase代替として注目されているBaaSです。
データベース、認証、ストレージ、リアルタイムの変更通知など、ウェブやモバイルアプリ開発に必要なバックエンド機能を提供しています。
Firestore(Firebaseで使用されるDB)はNoSQLデータベースですが、SupabaseはRDS(PostgreSQL)が用意されているのも特徴の1つのようです。
Supabaseに関してはこちらの記事がわかりやすかったです。
Edge Functionsとは
Supabaseで提供されている機能の1つです。
TypeScrptで書けて、ユーザーに近い位置で動かすことのできる軽量のプログラムという認識です。
DenoというJavaScriptとTypeScriptの実行環境を使用して開発されているみたいです。
Denoの説明に関してはこちらの記事がわかりやすかったです。
さわってみた
QUICKSTARTを参考にサンプルのプロジェクトを作成してデプロイまでしてみます。
事前準備
MacにSupabase CLIをインストールします。
bash
brew install supabase/tap/supabase
作業するフォルダを作成し、プロジェクトを初期化します。
mkdir supabase-tutorial && cd supabase-tutorial
VSCodeの設定ファイルを作成されるか聞かれるのでyを選択。 
VSCodeの拡張機能「Deno」もインストールします。
VSCodeを開くと雛形のファイルが作成されています。
ローカルで実行
hello-worldという関数を作成します。
関数の命名はURLフレンドリーであるため、ケバブケースが推奨されているみたいです。
supabase functions new hello-world
hello-worldというフォルダの下にindex.tsが作成されました。
リクエストから受け取った名前に対して、「Hello 名前」とJSONを返すプログラムになっています。
ts:supabase/functions/hello-world/index.ts
Deno.serve(async (req) => {
const { name } = await req.json()
const data = {
message: `Hello ${name}!`,
}
return new Response(
JSON.stringify(data),
{ headers: { "Content-Type": "application/json" } },
)
})
Edge Functionsを作成する上で、いくつかの推奨事項が紹介されていました。
- 小さな関数をたくさん作るより大きな関数をいくつか作ること。
- 関数間で共有されるコードはアンダースコア(_)から始まるフォルダに作成すること。
- テストのフォルダは分けて、関数名の後に接尾辞としてtestを使用すること。
└── supabase
├── functions
│ ├── import_map.json # A top-level import map to use across functions.
│ ├── _shared
│ │ ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key.
│ │ └── supabaseClient.ts # Supabase client with ANON key.
│ │ └── cors.ts # Reusable CORS headers.
│ ├── function-one # Use hyphens to name functions.
│ │ └── index.ts
│ └── function-two
│ │ └── index.ts
│ └── tests
│ └── function-one-test.ts
│ └── function-two-test.ts
├── migrations
└── config.toml
ローカル開発環境でSupabaseのプロジェクトを起動します。
以下のコマンドを実行するとDockerのコンテナが立ち上がり、API URLやDB URLといったエンドポイントやanon key, service_role keyなどの鍵などが生成されます。
bash
supabase start
関数を起動します。
このコマンドにはホットリロード機能がついているため、ファイルを変更するとサーバーが再起動され、即時に変更が反映されます。
bash
supabase functions serve
ローカル環境で動作確認をします。
SUPABASE_ANON_KEYはsupabase statusで確認することができます。
bash
curl --request POST 'http://localhost:54321/functions/v1/hello-world' \
--header 'Authorization: Bearer SUPABASE_ANON_KEY' \
--header 'Content-Type: application/json' \
--data '{ "name":"Functions" }'
結果
bash
{"message":"Hello Functions!"}
本番環境へのデプロイ
次に、関数をデプロイしていきます。
CLIにログインします。
supabase login
プロジェクトをこちらから作成します。
プロジェクトの一覧を表示します。
supabase projects list
bash:結果
LINKED │ ORG ID │ REFERENCE ID │ NAME │ REGION │ CREATED AT (UTC)
─────────┼──────────────────────┼──────────────────────┼───────────────────┼────────────────────────┼──────────────────────
│ ljswcathavsqpwmktbch │ tmuxiwsozqvfnduhnlpk │ supabase-tutorial │ Northeast Asia (Tokyo) │ 2024-02-13 23:51:19
ローカルのプロジェクトとSupabaseのプロジェクトをリンクさせます。 your-project-idには上記で確認したREFERENCE IDを指定します。
supabase link --project-ref your-project-id
関数をデプロイします。
deployの引数を指定しない場合、すべての関数がデプロイされます。
supabase functions deploy hello-world
数秒でデプロイされました。
bash:結果
Bundling hello-world
Deploying hello-world (script size: 2.635kB)
Deployed Function hello-world on project tmuxiwsozqvfnduhnlpk
You can inspect your deployment in the Dashboard: https://supabase.com/dashboard/project/tmuxiwsozqvfnduhnlpk/functions/hello-world/details
動作確認をします。
ANON_KEYは、デプロイ結果に出力されているSupabaseのプロジェクトの詳細ページから確認することができます。
bash
curl --request POST 'https://<project_id>.supabase.co/functions/v1/hello-world' \
--header 'Authorization: Bearer ANON_KEY' \
--header 'Content-Type: application/json' \
--data '{ "name":"Functions" }'
bash:結果
{"message":"Hello Functions!"}%
関連記事
- 2024-02-26
- テクノロジー