4. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
News
- Supabase とNetlify が deno deployをインフラとしたサービスを
公開
参考: https://deno.com/blog
5. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
アジェンダ
- Supabase Edge Functions 触ってみる
- Netlify Edge Functions 触ってみる
- まとめ
6. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Supabase Edge Functions 触ってみる
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. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Supabase Edge Functions とは?
- Supabase が提供してくれるエッジコンピューティング
- Supabase Edge Functions のインフラは、
Deno Deploy 上に構築されている
すなわち、Deno Deploy + バックエンドインフラのサービス
16. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
準備
supabase の Table editor で適当なテーブルを作ります。
17. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実装
supabaseのリソースアクセスに必要な値を環境変数として
提供してくれます
18. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
アクセス
supabaseが提供するデータベースから情報を取得できました
19. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
いいところ/気がついたこと
- 用意されているリソースへのアクセスがとにかく容易
- 特定のリソースへのアクセスに関わる処理はある程度まとめた単位で
の実装が向いていそう
- バックエンドサービスとしての API 提供が目的とされているDeno
Deploy を直接使うと可能なブラウザ向けのページ生成/配信には向か
ない
- supabase functions new sub/same-function のような、サブディレクトリ
で関数を作成できない
20. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Netlify Edge Functions 触ってみる
21. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Netlify とは?
- ‘Build the future of the web’ を掲げる、
静的サイトホスティングサービスを代表とする 企業
- 静的 Web サイトホスティングサービス、
だけでなくサーバーレス実行環境を提供
参考:https://www.netlify.com/
24. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
前提
- Netlify にアクセス済みで、サイトが作成されていること
- github もしくは、何かのリポジトリサービスと連携済みであること
25. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Function の作成 1
以下の構成で、ディレクトリとファイルを作成します
26. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Function の作成 2
関数本体 netlify/edge-functions/test-function.ts
関数とパスを関連付けする netlify.toml
27. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
デプロイ
github へ push を行うと、作成したNetlifyのサイトに展開されます。
こちらは、ブラウザでアクセスできます。
[デモ用のURLは後で貼ります。youtube live のタイムラインにも乗せ
てもらいます]
28. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
これだけです
Supabase Edge Functions では「サーバーアプリケーション」を書きました
Netlify Edge Functions では、「関数」をデフォルトエクスポートするだけです
29. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
少し掘り下げ
デフォルトエクスポートする関数は、次のようにする必要があります
ポイントになるのは Context オブジェクト
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. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実装例 geo の利用
geo を使って、アクセス元の情報は、次のように取得できます
https://superb-khapse-e6709a.netlify.app/geo-cookies
32. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実装例 geo の利用
geo を使って、アクセス元の情報は、次のように取得できます
https://superb-khapse-e6709a.netlify.app/geo-cookies
33. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実装例 ルーティング
ルーティングは、次のように処理できます
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. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実装例 tsx/jsx
Netlify Edge Functions は、tsx/jsxを実行する対象の関数として読み
込んでくれていないようです。
ts/js で記述し、tsx/jsxを呼び出すようにする必要がありました。
36. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実装例 tsx/jsx
https://main--superb-khapse-e6709a.netlify.app/tsx
37. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
いいところ/気がついたところ
- cookiesや、jsonでのレスポンスなど Web API として欲しい機能が
デフォルトで導入済み
- 独自拡張として、アクセス元の取得などができる
- 関数単位での実装ができる => スコープが小さい
比較した supabase は、supabase Edge Servers といえるくらいに、最
小の関数をデプロイする思想