Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 38 Ad

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

Download to read offline

Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
それぞれの特徴について、実装例を見ながら確認していく

Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
それぞれの特徴について、実装例を見ながら確認していく

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

More from 虎の穴 開発室 (20)

Recently uploaded (20)

Advertisement

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

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

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

  3. 3. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. News

  4. 4. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. News
 - Supabase とNetlify が deno deployをインフラとしたサービスを 公開 
 
 
 
 参考: https://deno.com/blog 

  5. 5. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. アジェンダ
 - Supabase Edge Functions 触ってみる - Netlify Edge Functions 触ってみる - まとめ
 

  6. 6. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. Supabase Edge Functions 触ってみる

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

  8. 8. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. Supabase Edge Functions とは?
 - Supabase が提供してくれるエッジコンピューティング
 - Supabase Edge Functions のインフラは、
 Deno Deploy 上に構築されている
 
 すなわち、Deno Deploy + バックエンドインフラのサービス

  9. 9. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 触ってみましょう

  10. 10. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 前提
 - Supabase には、アカウントを持っているものとします
 - supabase CLI は、インストール済みとします

  11. 11. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. Function の作成
 コマンドを実行して関数を作成

  12. 12. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. supabase/functions/first-function/index.ts 

  13. 13. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. デプロイ
 一旦 Supabase へログイン
 
 
 続けてデプロイ

  14. 14. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. アクセスする
 
 
 test-function.ts の記述通りの結果が返ってきます

  15. 15. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. データベースにアクセスしてみる

  16. 16. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 準備
 supabase の Table editor で適当なテーブルを作ります。
 
 

  17. 17. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 実装
 
 
 
 
 
 
 supabaseのリソースアクセスに必要な値を環境変数として
 提供してくれます

  18. 18. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. アクセス
 
 
 
 supabaseが提供するデータベースから情報を取得できました

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

  20. 20. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. Netlify Edge Functions 触ってみる

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

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

  23. 23. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 触ってみましょう

  24. 24. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 前提
 - Netlify にアクセス済みで、サイトが作成されていること
 - github もしくは、何かのリポジトリサービスと連携済みであること

  25. 25. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. Function の作成 1
 以下の構成で、ディレクトリとファイルを作成します

  26. 26. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. Function の作成 2
 関数本体 netlify/edge-functions/test-function.ts
 
 
 関数とパスを関連付けする netlify.toml

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

  28. 28. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. これだけです
 Supabase Edge Functions では「サーバーアプリケーション」を書きました
 Netlify Edge Functions では、「関数」をデフォルトエクスポートするだけです 

  29. 29. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 少し掘り下げ
 デフォルトエクスポートする関数は、次のようにする必要があります
 
 
 
 
 ポイントになるのは Context オブジェクト

  30. 30. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 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

  31. 31. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 実装例 geo の利用
 geo を使って、アクセス元の情報は、次のように取得できます
 
 
 
 
 
 
 https://superb-khapse-e6709a.netlify.app/geo-cookies

  32. 32. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 実装例 geo の利用
 geo を使って、アクセス元の情報は、次のように取得できます
 
 
 
 
 
 
 https://superb-khapse-e6709a.netlify.app/geo-cookies

  33. 33. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 実装例 ルーティング
 ルーティングは、次のように処理できます
 
 
 
 
 
 

  34. 34. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 実装例 ルーティング
 パスと、関数の関連付けは、ワイルドカードを使用します。
 
 
 
 
 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

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

  36. 36. Copyright  (C) 2021 Toranoana Inc. All Rights Reserved. 実装例 tsx/jsx
 https://main--superb-khapse-e6709a.netlify.app/tsx
 

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

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


×