Supabase の Edge Function で Hello World する覚書

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 が表示されるので控えておきます。後で使います。
![supabase_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026777/a8657aa2-6036-41a1-8d4c-6c998e45c094.png)

失念しても 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` が作成されるのでこれを編集します。
```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 のダッシュボードにも登録されているので確認してみましょう。
![EdgeFunctions.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026777/4b3963c3-cd76-4144-b019-b2da26bae91d.png)

#### 実行
ここでもやはり `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