🌏

Supabase Edge Functions 入門

に公開
TypeScript
Deno
Supabase
tech

Supabase Edge Functions 入門

Supabase Edge FunctionsはSupabaseで実行されるDenoベースのサーバレス関数です。

https://supabase.com/docs/guides/functions

移植可能: ローカルでも、その他の Deno 互換プラットフォーム（セルフホスト型インフラストラクチャを含む）でも実行できます。

TypeScript をベースとし、WASM をサポートしています。

エッジ機能は低レイテンシを実現するためにグローバルに分散されています。

ローカルでの動作確認、Supabaseへのデプロイまでをまとめます。

1. 概要と前提条件

概要：Supabase Edge Functions は Deno ランタイム上で動く TypeScript（/JavaScript）関数で、HTTP エンドポイントを持つサーバレス機能です。ローカルで supabase start により DB/Auth等のスタックと Edge Functions ランタイムを立ち上げ、supabase functions serve で関数をホットリロード付きで実行できます。(今回はDBなど他サービスは使用しません)

前提（最低限）：

  • supabase CLI（supabase）をインストール済み
  • Docker（supabase start が内部で使うため、ローカルで Docker が必須）
  • Deno の基本知識（関数自体は Deno の Deno.serve を使います）

2. supabase CLIのインストール

例（macOS / Linux）：

# supabase CLI（Homebrew の場合）
brew install supabase/tap/supabase

# npm 経由
npm install -g supabase

詳細は公式の CLI ドキュメントを参照してください。

3. プロジェクトの初期化（ローカル）

# 既存プロジェクトで supabase を初期化する（プロジェクトルートで実行）
supabase init

プロジェクトを Supabase（クラウド）と連携して使う場合はログインしてプロジェクトを選択します。

supabase login             # ブラウザでログイン（初回のみ）
supabase link --project-ref your-project-ref   # 既存の Supabase プロジェクトにリンク

supabase start を実行すると、ローカルに Postgres / Auth / Storage / Functions ランタイムが立ち上がります。ポートはデフォルトで 54321（Functions のエンドポイントもここにマウント）です。(Supabase)

4. Edge Function の作成（サンプル）

# 新しい関数を作る
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) => {
  const { name } = await req.json()
  const data = {
    message: `Hello ${name}!`,
  }

  return new Response(
    JSON.stringify(data),
    { headers: { "Content-Type": "application/json" } },
  )
})

5. 環境変数とローカルでの起動・テスト

環境変数

関数で API キーやシークレットを使う場合は、関数ごとに .env を置くか、プロジェクトルートに .env を置いて読み込ませます。ローカルでは supabase functions serve --env-file <path> で .env を指定できます（バージョンによって挙動が変わるため、最新 CLI のドキュメントを確認してください）。(Supabase)

例 .env（ローカル）:

SUPABASE_ANON_KEY=eyJ....local_anonymous_key
OPENAI_API_KEY=sk-xxxx

セキュリティ：.env は Git にコミットしない（.gitignoreへ追加）こと。

ローカルで起動

  1. Supabase ローカルスタックを立ち上げる（DB/Auth など）:
supabase start
  1. 関数をホットリロードで立ち上げる:
# 関数名指定
supabase functions serve hello-world --env-file ./supabase/functions/hello-world/.env

# 全関数を一括で serve（CLI のバージョンでサポートされている場合）
supabase functions serve

functions serve はファイル変更検出で自動リロードが可能です。ローカルのエンドポイントは通常次のようになります：
http://localhost:54321/functions/v1/hello-world。ローカル anon key を Authorization ヘッダーに入れて curl で叩けます。(Supabase)

テスト用 curl

ローカル anon key は supabase status で確認できます（supabase start の出力にも表示されます）。

# 例
curl -i --location --request POST 'http://localhost:54321/functions/v1/hello-world' \
  --header 'Authorization: Bearer <LOCAL_ANON_KEY>' \
  --header 'Content-Type: application/json' \
  --data '{"name":"Supabase"}'

6. デプロイ（本番・Supabaseクラウドへ）

  1. ログイン（クラウド）
supabase login
  1. 関数をデプロイ
supabase functions deploy hello-world --project-ref your-project-ref
  1. デプロイ後の呼び出し（例）
curl -i --location --request POST 'https://<project>.functions.supabase.co/hello-world' \
  --header 'Authorization: Bearer <DEPLOYED_ANON_KEY>' \
  --header 'Content-Type: application/json' \
  --data '{"name":"Deployed"}'

7. トラブルシューティング

. ローカルでの認証（JWT 検証）を無効化してテストしたい

  • supabase functions serve に --no-verify-jwt を付けると、JWT 検証を無効にできる（ローカル開発時）例があります。ただし本番では必ず有効にすること。(Zenn)

8. 参考（公式 / 記事）

  • Supabase — Edge Functions（公式ガイド）. (Supabase)
  • Deploy to Production（デプロイ手順）. (Supabase)
  • Environment Variables（functions secrets / env-file）. (Supabase)
  • Testing your Edge Functions (Supabase)
  • Supabase Edge Functions 実践ガイド：認証から本番デプロイまで(Zenn)

Discussion