Next.js + Supabase の運用で Edge Function を動かした備忘録です。
Supabase Edge Function とは
Deno (TypeScript/JavaScript) ベースのサーバレス関数 (FaaS) で、HTTP リクエストや Cron で指定コードを実行出来る仕組みです。
試した環境
- Windows11
- Next.js v15.1.6
- Supabase CLI 2.15.8
- Docker 27.4.0
そして通常そうなってると思うので「JWT認証が有効」という前提にしてます。
事前準備
前述「試した環境」にあるように Docker と Supabase CLI が必要です。
既に環境が出来てる場合は読み飛ばして下さい。
Windows だと Docker Desktop の導入となりますがここでは割愛します。
Supabase CLI は
npm install supabase --save-dev
とでもすればインストールされると思います。
何かエラーが出た場合は --legacy-peer-deps など必要かもしれませんがこれもここでは割愛します。
尚上記のインストール例はグローバルインストールではないので以下 supabase コマンドは npx で呼び出してますが、グローバルインストールされてる場合は良しなに読み替えて下さい。
docker --version
npx supabase --version
などでバージョン表記されればインストールは出来てます。
確認出来たら Supabase CLI を初期化しておきましょう。
npx supabase init
そして起動します。必要に応じて --debug オプションを付けても良いでしょう。
npx supabase start
成功すると各種 URL や Key が表示されるので控えておきます。後で使います。
失念しても stop した後に再度 start すればまた表示されるので大丈夫。
ここまで済んだら docker から supabase_cli のコンテナが動作している事も確認しておくと良いかと思います。
Project ID の確認
通常 .env.local に記述していると思いますが、https://{ProjectID}.supabase.co となっている事と思います。Supabase のダッシュボードからも確認出来ます。
以降 {ProjectID} と表記します。
Supabase プロジェクト情報をリンクする
最初の1回だけローカルプロジェクトに Supabase プロジェクトの情報をリンクする必要があります。
プロジェクトのルートディレクトリで以下のように入力します。
npx supabase link --project-ref {ProjectID}
Enter your database password (or leave blank to skip):
と出たらデータベースパスワードを設定出来るようですが私は設定してないのでそのままエンターでスキップしました。
Deno コード入力
それでは Hello World を作成しましょう。
npx supabase functions new hello-world
このコマンドで supabase/functions/hello-world/index.ts が作成されるのでこれを編集します。
import "jsr:@supabase/functions-js/edge-runtime.d.ts"
console.log("Hello from Functions!")
Deno.serve(async (req) => {
return new Response(JSON.stringify({ message: "Hello from Edge Function!" }), {
headers: { "Content-Type": "application/json" },
});
})
単にメッセージを返すだけのコードですね。
ローカルサーバー起動
ローカルで hello-world を実行させる為にサーバーを起動します
npx supabase functions serve hello-world
成功すると
Setting up Edge Functions runtime...
Serving functions on http://127.0.0.1:54321/functions/v1/<function-name>
Using supabase-edge-runtime-1.67.2 (compatible with Deno v1.45.2)
のように表示されるので http://127.0.0.1:54321/functions/v1/hello-world をブラウザで開けば良い気もしますがこれでは認証が通りません。
認証に必要なキーは先ほど supabase start した際に表示された anon key です。以降 {LocalAnonKey} と表記します。
Authorization ヘッダを付与する為には別コンソールから curl を使います。
curl -X POST http://127.0.0.1:54321/functions/v1/hello-world -H "Authorization: Bearer {LocalAnonKey}" --data "{\"name\":\"Functions\"}"
問題なければ
{"message":"Hello from Edge Function!"}
というレスポンスが表示されます。
サーバー側は
serving the request with supabase/functions/hello-world
[Info] Hello from Functions!
とログが出てると思います。
[Info] は console.log で出力したものですね。
これで Edge Function として動作する Deno コードが実行出来ました。
デプロイ
環境変数を使用してないのでこのままデプロイすれば動作します。
(環境変数を使う覚書は次回に続く予定です)
npx supabase functions deploy hello-world
と入力するとバンドル情報の後に
Deployed Functions on project {ProjectID}: hello-world
You can inspect your deployment in the Dashboard: https://supabase.com/dashboard/project/{ProjectID}/functions
と表示されてデプロイが完了します。
supabase のダッシュボードにも登録されているので確認してみましょう。
実行
ここでもやはり https://{ProjectID}.supabase.co/functions/v1/hello-world をブラウザで開いても認証が通りません。
先ほどと同じように curl を使いますが、今度は本番の Anon Key を使用します。
supabase のダッシュボードからも確認出来ますが .env.local にも記述されていると思います。
ここでは {AnonKey} と表記します。
curl -X POST https://{ProjectID}.supabase.co/functions/v1/hello-world -H "Authorization: Bearer {AnonKey}" --data "{\"name\":\"Functions\"}"
先ほどと同じように
{"message":"Hello from Edge Function!"}
が返って来ます。
これで Supabase Edge Function の実行を試す事が出来ました。
この最初の一手で意外と躓く事もあるかもしれませんが、記事が何かの助けになると幸いです。
環境変数を設定したりデータベースにアクセスしたり Cron で定期実行させたりする覚書は今後投稿予定です。
続きを投稿しました
Supabase の Edge Function を定期実行させる覚書
https://qiita.com/jackalope/items/64a10e498a354dd42c94
Supabase の Edge Function で Web Push する覚書
https://qiita.com/jackalope/items/44ec19c216497f2d4906