Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
2022/04/27 
toranoana.deno #6  
 
虎の穴ラボ 
奥谷一陽 
Supabase Edge Functions と Netlify Edge Functions 
を使ってみる 
– 機能とその比較 –

自己紹介 
奥谷一陽 
所属：虎の穴ラボ株式会社 
担当：とらコインSHOPなど新規事業系の開発 
興味：TypeScript、Deno 
おすすめコンテンツ： 
　　『プラネテス』 
　　『暴太郎戦隊ドンブラザーズ』 
 
Twitter：@okutann88

News

News 
- Supabase とNetlify が deno deployをインフラとしたサービスを
公開
 
 
 
 
参考: https://deno.com/blog

アジェンダ 
- Supabase Edge Functions 触ってみる
- Netlify Edge Functions 触ってみる
- まとめ

Supabase Edge Functions 触ってみる

Supabase とは? 
- ‘The Open Source Firebase Alternative’ を掲げる
BasS(Backend As A Service) 
- postgress データベースや、認証、ストレージなどの機能を提供し
てくれる 
参考: https://supabase.com/

Supabase Edge Functions とは？ 
- Supabase が提供してくれるエッジコンピューティング 
- Supabase Edge Functions のインフラは、 
Deno Deploy 上に構築されている 
 
すなわち、Deno Deploy + バックエンドインフラのサービス

触ってみましょう

前提 
- Supabase には、アカウントを持っているものとします 
- supabase CLI は、インストール済みとします

Function の作成 
コマンドを実行して関数を作成

supabase/functions/first-function/index.ts

デプロイ 
一旦 Supabase へログイン 
 
 
続けてデプロイ

アクセスする 
 
 
test-function.ts の記述通りの結果が返ってきます

データベースにアクセスしてみる

準備 
supabase の Table editor で適当なテーブルを作ります。

実装 
 
 
 
 
 
 
supabaseのリソースアクセスに必要な値を環境変数として 
提供してくれます

アクセス 
 
 
 
supabaseが提供するデータベースから情報を取得できました

いいところ/気がついたこと 
- 用意されているリソースへのアクセスがとにかく容易 
- 特定のリソースへのアクセスに関わる処理はある程度まとめた単位で
の実装が向いていそう 
- バックエンドサービスとしての API 提供が目的とされているDeno
Deploy を直接使うと可能なブラウザ向けのページ生成/配信には向か
ない 
- supabase functions new sub/same-function のような、サブディレクトリ
で関数を作成できない

Netlify Edge Functions 触ってみる

Netlify とは? 
- ‘Build the future of the web’ を掲げる、 
静的サイトホスティングサービスを代表とする企業 
- 静的 Web サイトホスティングサービス、 
だけでなくサーバーレス実行環境を提供 
参考：https://www.netlify.com/

Netlify Edge Functions とは？ 
- Netlify が提供するエッジコンピューティング 
- Netlify Edge Functions のインフラは、Deno Deploy 上に構築され
ている 
- 現在 Beta 公開 
強化されているのは、Web サイト/ページとしての要素 
サーバレスWebアプリ/ページを作ることを前提とした、 
より簡潔な記述の支援と機能

前提 
- Netlify にアクセス済みで、サイトが作成されていること 
- github もしくは、何かのリポジトリサービスと連携済みであること

Function の作成 1 
以下の構成で、ディレクトリとファイルを作成します

Function の作成 2 
関数本体 netlify/edge-functions/test-function.ts 
 
 
関数とパスを関連付けする netlify.toml

デプロイ 
github へ push を行うと、作成したNetlifyのサイトに展開されます。 
こちらは、ブラウザでアクセスできます。 
 
[デモ用のURLは後で貼ります。youtube live のタイムラインにも乗せ
てもらいます]

これだけです 
Supabase Edge Functions では「サーバーアプリケーション」を書きました 
Netlify Edge Functions では、「関数」をデフォルトエクスポートするだけです

少し掘り下げ 
デフォルトエクスポートする関数は、次のようにする必要があります 
 
 
 
 
ポイントになるのは Context オブジェクト

Context オブジェクトが、Netlify Edge Functions の特徴 
Contextオブジェクトには、次のものが含まれている 
- cookies 
- geo 
- json(value) 
- log(...values) 
- next() 
- rewrite(url) 
参考
：https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/
api/#netlify-specific-context-object

実装例 geo の利用 
geo を使って、アクセス元の情報は、次のように取得できます 
 
 
 
 
 
 
https://superb-khapse-e6709a.netlify.app/geo-cookies

実装例ルーティング 
ルーティングは、次のように処理できます

実装例ルーティング 
パスと、関数の関連付けは、ワイルドカードを使用します。 
 
 
 
 
https://superb-khapse-e6709a.netlify.app/route/a/
https://superb-khapse-e6709a.netlify.app/route/b/
https://superb-khapse-e6709a.netlify.app/route/c/123

実装例 tsx/jsx 
Netlify Edge Functions は、tsx/jsxを実行する対象の関数として読み
込んでくれていないようです。 
ts/js で記述し、tsx/jsxを呼び出すようにする必要がありました。

実装例 tsx/jsx 
https://main--superb-khapse-e6709a.netlify.app/tsx

いいところ/気がついたところ 
- cookiesや、jsonでのレスポンスなど Web API として欲しい機能が
デフォルトで導入済み 
- 独自拡張として、アクセス元の取得などができる 
- 関数単位での実装ができる => スコープが小さい 
比較した supabase は、supabase Edge Servers といえるくらいに、最
小の関数をデプロイする思想

まとめ 
- Deno Deploy ベースのインフラを使った、特色の異なるサービスが公開されま
した 
- Deno Deploy が単純に使われているわけではないサービスとしての特色を
持っています 
- 用途がかなり異なるので、何をしたいのか？を検討が必要 
- Deno Deploy 本体で十分なケースもあり得る 
- Netlify Edge Functions で、NextやNuxt、SvelteKit などが、動作がすると紹介
されているので、期待してます

Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –

Recommended

More Related Content

What's hot (20)

Similar to Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 – (20)

More from 虎の穴開発室 (20)