ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう

2023/03/24 エイチーム×レバレジーズ フロントエンド勉強会 の発表資料です

https://ateam.connpass.com/event/276968/

Transcript

1. © 2023 Ateam Inc.
   ビギナー向け エッジランタイムのすすめ
   ~エッジランタイムを意識した開発をはじめよう~
   エイチーム×レバレジーズ フロントエンド勉強会
   

   View Slide

2. © 2023 Ateam Inc.
   自己紹介
   Who am I ?
   Name: Aiji Uejima
   Twitter: aiji42_dev
   Github: aiji42
   株式会社エイチームライフデザイン技術開発室所属
   リードエンジニア
   直近はサービス開発からは離れていますが、少し前までRemixでのサービス開発を進めていました。
   最近興味があるのはこの発表の通りエッジランタイム。
   毎日プライベートでGithubに草生やしながら頑張ってます！
   2
   

   View Slide

3. © 2023 Ateam Inc.
   おしながき
   1. エッジランタイム/エッジコンピューティングとはなにか
   2. エッジコンピューティングはなぜ流行っているのか？
   3. エッジコンピューティングで具体的に何ができるのか？
   4. エッジランタイムで開発する上での留意点
   3
   

   View Slide

4. © 2023 Ateam Inc.
   エッジランタイム/エッジコンピューティング
   とはなにか
   4
   

   View Slide

5. © 2023 Ateam Inc.
   エッジランタイム/エッジコンピューティングとは？
   CDNロケーションに配置されたコンピューティングリソースおよびその実行環境
   5
   ※一般的に「エッジ」が指すものは文脈によって異なります
   この発表では上の画像のイメージで話します
   edge
   edge
   edge
   origin
   

   View Slide

6. © 2023 Ateam Inc.
   エッジランタイム/エッジコンピューティングとは？
   各CDNベンダーのエッジコンピューティング
   6
   ベンダー 名称 エンジン/言語
   Cloudflare Cloudflare Workers Javescript/V8
   Fastly Fastly Compute@Edge Wasm/Wasmtime (Javascriptも動く)
   Vercel Vercel Edge Function Javascript/V8 (内部はCF Workers)
   Akamai Akamai EdgeWorkers Javascript/V8
   他にも多数...
   

   View Slide

7. © 2023 Ateam Inc.
   エッジランタイム/エッジコンピューティングとは？
   なぜV8/Javascript構成が採用されるのか
   7
   1. パフォーマンス
   V8エンジンは最適化されたJITコンパイラを使用し、Javascriptをネイティブマシンコードに変換する。
   そのため、低遅延が重要視されるエッジランタイムでの採用が盛ん
   

   View Slide

8. © 2023 Ateam Inc.
   エッジランタイム/エッジコンピューティングとは？
   なぜV8/Javascript構成が採用されるのか
   8
   2. 独立性
   エッジランタイムではV8 isolateという機構が取られる。
   独自のメモリ空間を持ち分離されるため、複数ユーザ・アプリケーションが同一物理リソース上にあっても、
   セキュリティや安定性が担保される。また、isolateの作成と破棄が早いことが魅力的
   https://developers.cloudflare.com/workers/learning/how-workers-works/
   

   View Slide

9. © 2023 Ateam Inc.
   エッジランタイム/エッジコンピューティングとは？
   Cloudflare がゼロコールドスタートを謳う仕組み
   9
   ハンドシェイク中にV8 isolateにWorkerコードをローディングすることによって、実質起動速度0msを実現している。
   (他のベンダーでも同じ仕組みが取られているかもしれません)
   逆にハンドシェイク中の5msの間にコードをロードしないといけないので、厳し目のバンドルサイズの制限が敷かれている(後述)
   従来のCF Workers 及び古典的なサーバレスコンピューティング 現在のCF Workers (TLSのネゴシエーション中に立ち上げる)
   https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/
   

   View Slide

10. © 2023 Ateam Inc.
    なぜエッジコンピューティングが流行っているのか？
    10
    

    View Slide

11. © 2023 Ateam Inc.
    なぜ流行っているのか
    Core Web Vitals との関連性
    11
    https://akshayranganath.github.io/Understanding-And-Using-Core-Web-Vitals/
    

    View Slide

12. © 2023 Ateam Inc.
    なぜ流行っているのか
    Core Web Vitals との関連性
    12
    LCP/FIDの時間を短縮させるためにTTFBに着目すると、オリジンの応答速度・オリジンとの距離が注目される。
    CDNでの静的ファイル配信はもちろんのこと、リアルタイム処理も含めると、オーバーヘッドが少ないエッジランタイムは
    魅力的。
    https://www.keycdn.com/support/what-is-ttfb
    

    View Slide

13. © 2023 Ateam Inc.
    なぜ流行っているのか
    オリジンへリクエストするよりもエッジでレスポンスを返せたほうが早い
    13
    edge
    edge
    edge
    origin
    

    View Slide

14. © 2023 Ateam Inc.
    なぜ流行っているのか
    キャッシュハンドリングの柔軟性と敷居の低下
    Next.jsのISRに代表されるように、キャッシュの破棄までを含
    めた設計が重要視されるようになった。
    かつてはFastlyのVernish(VCL)がその領域を代表していたが、
    アプリケーションエンジニアやフロントエンドエンジニアに
    はハードルが高かった。
    Cloudflare Workersの登場により、Javascriptでアプリケーショ
    ン感覚で構築できるようになり一気にハードルが下がった。
    14
    https://www.facebook.com/FastlyEdgeCloudJapan/videos/
    using-vcl-on-our-devhub/611247286543080/
    

    View Slide

15. © 2023 Ateam Inc.
    なぜ流行っているのか
    開発体験の向上
    - デプロイ速度がとても早い(数百ms~30s)
    - プロダクションと同等の開発がローカルで再現できる(miniflare/Wokerd/edge-runtimeなど)
    故にJest/Vitestなどでのテストが容易
    - そしてなにより、Typescriptで書ける
    Next.js なら config で切替可能
    15
    

    View Slide

16. © 2023 Ateam Inc.
    なぜ流行っているのか
    エコシステムの加速
    16
    エッジでの動作が保証されているフロントエンドフレームワーク
    エッジで動作するExpress相当のサーバー
    その他周辺サービス/ライブラリ
    KV/R2/D1/DuableObjects (Cloudflare Workers)
    

    View Slide

17. © 2023 Ateam Inc.
    なぜ流行っているのか
    エコシステムの加速
    17
    #edge_studyでのCloudflareのセッションより
    

    View Slide

18. © 2023 Ateam Inc.
    エッジコンピューティングで具体的に何ができるのか
    18
    

    View Slide

19. © 2023 Ateam Inc. 19
    エッジの主なユースケース
    キャッシュの柔軟なハンドリング
    Next.jsのISRと同じもの実現したり、
    記事の作成者本人にはリアルタイムでレンダリングし、
    その他多数のユーザにはキャッシュしたコンテンツを返すみたいなことができる。
    KV
    記事作成者
    その他ユーザ
    🍪
    🍪
    キャッシュ
    SSR
    Token verify
    キャッシュを返却した後に再検証
    

    View Slide

20. © 2023 Ateam Inc. 20
    エッジの主なユースケース
    実際のエイチームでの例
    CSRがメインのサービスをSSRに移行する過程で、ヘッドレスブラウザでレンダリングした結果をKVにキャッシュし、
    社外(一般ユーザ)アクセスの場合はレンダリング結果(キャッシュ)を返却しSSGぽく振る舞わせる。
    社内アクセスの場合はキャッシュせずリアルタイムのコンテンツを返却ということをしていた。
    https://speakerdeck.com/aiji42/saibouzuhurontoendomansuri-number-26-eitimu
    サイボウズフロントエンドマンスリー #26
    CSRなサイトを(擬似的な)ISRに変更した話
    

    View Slide

21. © 2023 Ateam Inc. 21
    エッジの主なユースケース
    ABテストのルーティング
    CDNでリクエストをルーティングできるため、チャレンジャー用のコードをオリジナルに含めなくて良くなる
    original
    に着弾したユーザ
    challenger
    に着弾したユーザ
    🍪
    🍪
    original vs challenger
    original
    main branch
    (original)
    challenger
    branch
    challenger
    deploy
    deploy
    

    View Slide

22. © 2023 Ateam Inc. 22
    エッジの主なユースケース
    エイチームでの例
    Vercelのpreview deployとNext.jsのmiddlewareを使用したABテストのルーティング
    Next.js middleware: Vercelにデプロイするとエッジに展開され、Next.jsのサーバ到達前に処理を差し込むことができる
    original
    に着弾したユーザ
    challenger
    に着弾したユーザ
    🍪
    🍪
    main branch
    (original)
    challenger
    branch
    challenger
    (example.challenger.vercel.dev)
    preview deploy
    production deploy
    original
    (example.com)
    middleware
    rewrite to challenger
    スクリプトやデータは
    ダイレクトにリクエスト
    https://github.com/aiji42/next-with-split
    

    View Slide

23. © 2023 Ateam Inc. 23
    エッジの主なユースケース
    レンダリング (Edge as Origin)
    エッジでコンテンツをレンダリングして返却する。
    オリジンへの物理的な距離を短縮できるため、高速にリアルタイムなコンテンツを返却できる。
    D1やKVなどの周辺サービスを利用すれば、SSRでTTFB100msを切るようなコンテンツデリバリも可能。
    🚫
    D1
    

    View Slide

24. © 2023 Ateam Inc. 24
    エッジの主なユースケース
    3rd party scriptの実行 (Cloudflare Zaraz)
    GoogleTabManagerやGoogleAnalyticsなどのアド系・分析計のスクリプトを、
    ユーザのクライアントではなくエッジで動作させることで、
    クライアント側のパフォーマンス改善やプライバシーリスクに対処できる。
    zaraz用のスクリプトが
    自動挿入される
    3rd party script
    がエッジで実行される
    🚫
    代わりにzaraz event
    がプッシュされる
    クライアントでの
    3rd party scriptのロードが不要に
    ベンダーに情報
    が送信される
    

    View Slide

25. © 2023 Ateam Inc.
    エッジコンピューティングは
    キャッシュハンドリングやルーティング
    のためのものではなくなっている
    25
    

    View Slide

26. © 2023 Ateam Inc.
    限りなくクライアントに近いオリジンであり、
    ユーザにとってのもう一つのクライアントでもある
    26
    

    View Slide

27. © 2023 Ateam Inc.
    エッジランタイムで開発したくなってきた？
    27
    

    View Slide

28. © 2023 Ateam Inc.
    何から始めればいいか
    どんなことに留意すればいいのか
    (※Cloudflare/Vercelの話題が多めになりますがご容赦ください)
    28
    

    View Slide

29. © 2023 Ateam Inc.
    何から始める？
    Next.js/Vercelを使っているのであれば...
    - middlewareを使ってみる
    Advanced Features: Middleware | Next.js
    リダイレクト・リライトを設定してみたり、
    Cookieを読み取ってアクセス制御をアプリケーション到達前にやってみるなど
    オリジンを変えてしまえば、外部にプロキシすることもできる
    29
    

    View Slide

30. © 2023 Ateam Inc.
    何から始める？
    Next.js/Vercelを使っているのであれば...
    - ページスクリプトのランタイムを切り替えてみる
    React 18: Switchable Runtime | Next.js
    API RoutesもPagesも export const config で簡単にランタイムの切り替えができる
    デプロイしてみてブラウザのコンソールを見るとTTFBが大きく異なることがわかるはず
    (VercelのNode runtimeはLambdaなので、物理的な距離による遅延+コールドスタートの遅延もある)
    30
    pagesDirの場合 appDirの場合
    

    View Slide

31. © 2023 Ateam Inc.
    Next.jsのAPIルートで、同じコードをruntimeを切り替えて比較
    何から始める？
    応答速度の比較
    31
    (コールドスタート)
    Vercel Serverless (Lambda in Tokyo)
    (ホットスタンバイ)
    Vercel Edge runtime
    

    View Slide

32. © 2023 Ateam Inc.
    何から始める？
    他のフレームワークを使うなら...
    エッジに対応しているフレームワークなら、簡単にエッジランタイムでの開発/デプロイができる
    - Deploy a Remix site · Cloudflare Pages docs
    - Remix on the Edge – Vercel
    - Deploy a Svelte site · Cloudflare Pages docs
    - SvelteKit at the Edge – Vercel
    ベンダーはCloudflareかVercelが(個人的には)おすすめ
    Cloudflare はドキュメントや事例が多い、Vercelは設定が簡単
    32
    

    View Slide

33. © 2023 Ateam Inc.
    何から始める？
    エッジランタイムでAPIエンドポイントを作ってみる
    Hono x Cloudflare Workersがおすすめ
    https://hono.dev/
    Typescriptでのルーターの書き味と、デプロイコマンドを叩いてから公開されるまでの速度に感動するはず
    ある程度書けるようになったら
    KVやD1などのデータストアも使ってみるとよい
    33
    https://hono.dev/
    

    View Slide

34. © 2023 Ateam Inc.
    何から始める？
    デプロイの速さ
    34
    Hono の最小構成スクリプトを Cloudflare Workers に wrangler でデプロイ
    

    View Slide

35. © 2023 Ateam Inc.
    とりあえずデプロイの速さと
    応答速度(TTFB)を体感してほしい
    35
    

    View Slide

36. © 2023 Ateam Inc.
    一方で結構ハードルもある
    36
    

    View Slide

37. © 2023 Ateam Inc.
    留意しなければいけないこと
    Node APIは動かない
    エッジランタイム初心者はみなこのハードルにぶつかる
    - fs などのNode依存なAPIは使用できない
    使用できるのはWeb標準API (DOMの操作を除くブラウザで使用できるAPI)
    - 故に現状使用できないnpmライブラリが多くあるので、代替ライブラリ探しの旅がつきもの
    例) JWTを処理するためのNPMライブラリ jsonwebtoken (観測している限りで一番DL数が多い)は
    NodeAPI依存のためエッジランタイムでは動かない => 代替は jose
    探すときにおすすめなのは、package.json の exports を見てみること。
    37
    

    View Slide

38. © 2023 Ateam Inc.
    留意しなければいけないこと
    ライブラリがエッジに対応しているかチェックできるサイトを作ることに
    38
    乞うご期待🚀
    

    View Slide

39. © 2023 Ateam Inc.
    留意しなければいけないこと
    Node専用のAPIは動かない
    - Cloudflare Workersを使うのであれば、--node-compat を使ってみる
    Configure wrangler.toml - Workers
    ビルド時にpolyfillが入り、Bufferなどはウェブ標準なものに置き換えられる
    ※ あくまで、一部のウェブ標準なAPIでpolyfill可能なもののみ。fsなどは置き換えられない。
    - あとはライブラリのIssueにリクエストを登録してみましょう
    39
    

    View Slide

40. © 2023 Ateam Inc.
    留意しなければいけないこと
    Node専用のAPIは動かない
    と、書いたそばから、ビルドタイムではなくランタイムにpolyfillを入れたとの発表があった(2023/03/23)
    設定ファイル(wrangler.toml)に
    compatibility_flags = [ "nodejs_compat" ]
    を追加すると互換モードで動かすことができる
    対応APIは順次追加されていく予定
    40
    https://blog.cloudflare.com/workers-node-js-asynclocalstorage/
    

    View Slide

41. © 2023 Ateam Inc.
    留意しなければいけないこと
    外部へのTCP接続はできない
    - Postgres/MysqlなどのDBや、Redisなどとは直接は接続できない
    例えば Prisma のネイティブ接続のモードではDBアクセスはできない
    - Cloudflareであれば、KV や D1、Duable Objects などの使用をおすすめします
    41
    

    View Slide

42. © 2023 Ateam Inc.
    留意しなければいけないこと
    外部へのTCP接続はできない
    - あるいはfetchを利用しているライブラリ・HTTPリクエストで返却できるリソースを選択しましょう
    例) Supabase + @supabae/supabase-js: 内部的にはPostgREST という REST を利用してデータリクエストができる
    Planetscale + @planetscale/database: Supabase同様 REST APIに変換される
    Prisma Data Ploxy: Prisma Cloudが提供するプロキシサーバが間に入ることで HTTP リクエストに変換される
    ※ エッジがマルチロケーションなのに対して、基本的にはDBはシングルロケーションであることが多い
    そうなると、着弾するエッジによってはラウンドトリップが無視できなくなる可能性があることに注意
    42
    5ms
    Tokyo Tokyo
    100ms
    Oregon
    

    View Slide

43. © 2023 Ateam Inc.
    留意しなければいけないこと
    バンドルサイズ・CPUタイムのリミットに注意
    - バンドルサイズの制限はLambda等と比較するとかなり厳しい (理由は起動速度のスライドで説明の通り)
    43
    

    View Slide

44. © 2023 Ateam Inc.
    留意しなければいけないこと
    バンドルサイズ・CPUタイムのリミットに注意
    - CPUタイムも厳しめ
    ※カウントされるのはCPUを使用している時間のみ、fetchでのリクエスト待ちの時間などはカウントに入らない
    ヘビーなこと(画像の生成とか圧縮とか)をしない限りは、リミッタを超えることはそうそうないが、
    リミットを超えても通知は基本的にないので、ダッシュボード等を要確認
    (ベンダーによって一定時間エラーになったり、課金が始まったりする)
    44
    

    View Slide

45. © 2023 Ateam Inc.
    まとめ
    45
    

    View Slide

46. © 2023 Ateam Inc.
    エッジコンピューティングは
    限りなくクライアントに近いオリジンであり、
    ユーザにとってのもう一つのクライアントでもある
    46
    

    View Slide

47. © 2023 Ateam Inc.
    エコシステムなどもかなり加速しており
    今後もますます発展していく
    47
    

    View Slide

48. © 2023 Ateam Inc.
    エッジコンピューティングの採用シーンの数や
    プライオリティも上がっていくかもしれない
    48
    

    View Slide

49. © 2023 Ateam Inc.
    ただし
    既存のクラウドコンピューティングを
    完全に置き換えるものではなさそう
    49
    

    View Slide

50. © 2023 Ateam Inc.
    おそらく
    今後求められるのは
    両立やコラボレーション、適材適所な選択
    50
    

    View Slide

51. © 2023 Ateam Inc.
    そして
    今は発展のために痛みを伴っている状態
    51
    

    View Slide

52. © 2023 Ateam Inc.
    発展のスピードに対して
    情報や人手も足りていない
    52
    

    View Slide

53. © 2023 Ateam Inc.
    この状況に投資・参画するか
    一歩引いて俯瞰するかはあなた次第
    53
    

    View Slide

54. © 2023 Ateam Inc.
    Let's enjoy edge runtime!
    54
    

    View Slide

55. View Slide