Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

AijiUejima
March 24, 2023

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

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

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

AijiUejima

March 24, 2023
Tweet

More Decks by AijiUejima

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  45. © 2023 Ateam Inc.
    まとめ
    45

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide