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

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

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

Transcript

1. © 2023 Ateam Inc. ビギナー向け エッジランタイムのすすめ ~エッジランタイムを意識した開発をはじめよう~ エイチーム×レバレジーズ フロントエンド勉強会
2. © 2023 Ateam Inc. 自己紹介 Who am I ? Name: Aiji Uejima Twitter: aiji42_dev Github: aiji42 株式会社エイチームライフデザイン技術開発室所属 リードエンジニア 直近はサービス開発からは離れていますが、少し前までRemixでのサービス開発を進めていました。 最近興味があるのはこの発表の通りエッジランタイム。 毎日プライベートでGithubに草生やしながら頑張ってます！ 2
3. © 2023 Ateam Inc. おしながき 1. エッジランタイム/エッジコンピューティングとはなにか 2. エッジコンピューティングはなぜ流行っているのか？ 3. エッジコンピューティングで具体的に何ができるのか？ 4. エッジランタイムで開発する上での留意点 3
4. © 2023 Ateam Inc. エッジランタイム/エッジコンピューティング とはなにか 4
5. © 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは？ CDNロケーションに配置されたコンピューティングリソースおよびその実行環境 5 ※一般的に「エッジ」が指すものは文脈によって異なります この発表では上の画像のイメージで話します edge edge edge origin
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 他にも多数...
7. © 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは？ なぜV8/Javascript構成が採用されるのか 7 1. パフォーマンス V8エンジンは最適化されたJITコンパイラを使用し、Javascriptをネイティブマシンコードに変換する。 そのため、低遅延が重要視されるエッジランタイムでの採用が盛ん
8. © 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは？ なぜV8/Javascript構成が採用されるのか 8 2. 独立性 エッジランタイムではV8 isolateという機構が取られる。 独自のメモリ空間を持ち分離されるため、複数ユーザ・アプリケーションが同一物理リソース上にあっても、 セキュリティや安定性が担保される。また、isolateの作成と破棄が早いことが魅力的 https://developers.cloudflare.com/workers/learning/how-workers-works/
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/
10. © 2023 Ateam Inc. なぜエッジコンピューティングが流行っているのか？ 10
11. © 2023 Ateam Inc. なぜ流行っているのか Core Web Vitals との関連性 11 https://akshayranganath.github.io/Understanding-And-Using-Core-Web-Vitals/
12. © 2023 Ateam Inc. なぜ流行っているのか Core Web Vitals との関連性 12 LCP/FIDの時間を短縮させるためにTTFBに着目すると、オリジンの応答速度・オリジンとの距離が注目される。 CDNでの静的ファイル配信はもちろんのこと、リアルタイム処理も含めると、オーバーヘッドが少ないエッジランタイムは 魅力的。 https://www.keycdn.com/support/what-is-ttfb
13. © 2023 Ateam Inc. なぜ流行っているのか オリジンへリクエストするよりもエッジでレスポンスを返せたほうが早い 13 edge edge edge origin
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/
15. © 2023 Ateam Inc. なぜ流行っているのか 開発体験の向上 - デプロイ速度がとても早い(数百ms~30s) - プロダクションと同等の開発がローカルで再現できる(miniflare/Wokerd/edge-runtimeなど) 故にJest/Vitestなどでのテストが容易 - そしてなにより、Typescriptで書ける Next.js なら config で切替可能 15
16. © 2023 Ateam Inc. なぜ流行っているのか エコシステムの加速 16 エッジでの動作が保証されているフロントエンドフレームワーク エッジで動作するExpress相当のサーバー その他周辺サービス/ライブラリ KV/R2/D1/DuableObjects (Cloudflare Workers)
17. © 2023 Ateam Inc. なぜ流行っているのか エコシステムの加速 17 #edge_studyでのCloudflareのセッションより
18. © 2023 Ateam Inc. エッジコンピューティングで具体的に何ができるのか 18
19. © 2023 Ateam Inc. 19 エッジの主なユースケース キャッシュの柔軟なハンドリング Next.jsのISRと同じもの実現したり、 記事の作成者本人にはリアルタイムでレンダリングし、 その他多数のユーザにはキャッシュしたコンテンツを返すみたいなことができる。 KV 記事作成者 その他ユーザ 🍪 🍪 キャッシュ SSR Token verify キャッシュを返却した後に再検証
20. © 2023 Ateam Inc. 20 エッジの主なユースケース 実際のエイチームでの例 CSRがメインのサービスをSSRに移行する過程で、ヘッドレスブラウザでレンダリングした結果をKVにキャッシュし、 社外(一般ユーザ)アクセスの場合はレンダリング結果(キャッシュ)を返却しSSGぽく振る舞わせる。 社内アクセスの場合はキャッシュせずリアルタイムのコンテンツを返却ということをしていた。 https://speakerdeck.com/aiji42/saibouzuhurontoendomansuri-number-26-eitimu サイボウズフロントエンドマンスリー #26 CSRなサイトを(擬似的な)ISRに変更した話
21. © 2023 Ateam Inc. 21 エッジの主なユースケース ABテストのルーティング CDNでリクエストをルーティングできるため、チャレンジャー用のコードをオリジナルに含めなくて良くなる original に着弾したユーザ challenger に着弾したユーザ 🍪 🍪 original vs challenger original main branch (original) challenger branch challenger deploy deploy
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
23. © 2023 Ateam Inc. 23 エッジの主なユースケース レンダリング (Edge as Origin) エッジでコンテンツをレンダリングして返却する。 オリジンへの物理的な距離を短縮できるため、高速にリアルタイムなコンテンツを返却できる。 D1やKVなどの周辺サービスを利用すれば、SSRでTTFB100msを切るようなコンテンツデリバリも可能。 🚫 D1
24. © 2023 Ateam Inc. 24 エッジの主なユースケース 3rd party scriptの実行 (Cloudflare Zaraz) GoogleTabManagerやGoogleAnalyticsなどのアド系・分析計のスクリプトを、 ユーザのクライアントではなくエッジで動作させることで、 クライアント側のパフォーマンス改善やプライバシーリスクに対処できる。 zaraz用のスクリプトが 自動挿入される 3rd party script がエッジで実行される 🚫 代わりにzaraz event がプッシュされる クライアントでの 3rd party scriptのロードが不要に ベンダーに情報 が送信される
25. © 2023 Ateam Inc. エッジコンピューティングは キャッシュハンドリングやルーティング のためのものではなくなっている 25
26. © 2023 Ateam Inc. 限りなくクライアントに近いオリジンであり、 ユーザにとってのもう一つのクライアントでもある 26
27. © 2023 Ateam Inc. エッジランタイムで開発したくなってきた？ 27
28. © 2023 Ateam Inc. 何から始めればいいか どんなことに留意すればいいのか (※Cloudflare/Vercelの話題が多めになりますがご容赦ください) 28
29. © 2023 Ateam Inc. 何から始める？ Next.js/Vercelを使っているのであれば... - middlewareを使ってみる Advanced Features: Middleware | Next.js リダイレクト・リライトを設定してみたり、 Cookieを読み取ってアクセス制御をアプリケーション到達前にやってみるなど オリジンを変えてしまえば、外部にプロキシすることもできる 29
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の場合
31. © 2023 Ateam Inc. Next.jsのAPIルートで、同じコードをruntimeを切り替えて比較 何から始める？ 応答速度の比較 31 (コールドスタート) Vercel Serverless (Lambda in Tokyo) (ホットスタンバイ) Vercel Edge runtime
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
33. © 2023 Ateam Inc. 何から始める？ エッジランタイムでAPIエンドポイントを作ってみる Hono x Cloudflare Workersがおすすめ https://hono.dev/ Typescriptでのルーターの書き味と、デプロイコマンドを叩いてから公開されるまでの速度に感動するはず ある程度書けるようになったら KVやD1などのデータストアも使ってみるとよい 33 https://hono.dev/
34. © 2023 Ateam Inc. 何から始める？ デプロイの速さ 34 Hono の最小構成スクリプトを Cloudflare Workers に wrangler でデプロイ
35. © 2023 Ateam Inc. とりあえずデプロイの速さと 応答速度(TTFB)を体感してほしい 35
36. © 2023 Ateam Inc. 一方で結構ハードルもある 36
37. © 2023 Ateam Inc. 留意しなければいけないこと Node APIは動かない エッジランタイム初心者はみなこのハードルにぶつかる - fs などのNode依存なAPIは使用できない 使用できるのはWeb標準API (DOMの操作を除くブラウザで使用できるAPI) - 故に現状使用できないnpmライブラリが多くあるので、代替ライブラリ探しの旅がつきもの 例) JWTを処理するためのNPMライブラリ jsonwebtoken (観測している限りで一番DL数が多い)は NodeAPI依存のためエッジランタイムでは動かない => 代替は jose 探すときにおすすめなのは、package.json の exports を見てみること。 37
38. © 2023 Ateam Inc. 留意しなければいけないこと ライブラリがエッジに対応しているかチェックできるサイトを作ることに 38 乞うご期待🚀
39. © 2023 Ateam Inc. 留意しなければいけないこと Node専用のAPIは動かない - Cloudflare Workersを使うのであれば、--node-compat を使ってみる Configure wrangler.toml - Workers ビルド時にpolyfillが入り、Bufferなどはウェブ標準なものに置き換えられる ※ あくまで、一部のウェブ標準なAPIでpolyfill可能なもののみ。fsなどは置き換えられない。 - あとはライブラリのIssueにリクエストを登録してみましょう 39
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/
41. © 2023 Ateam Inc. 留意しなければいけないこと 外部へのTCP接続はできない - Postgres/MysqlなどのDBや、Redisなどとは直接は接続できない 例えば Prisma のネイティブ接続のモードではDBアクセスはできない - Cloudflareであれば、KV や D1、Duable Objects などの使用をおすすめします 41
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
43. © 2023 Ateam Inc. 留意しなければいけないこと バンドルサイズ・CPUタイムのリミットに注意 - バンドルサイズの制限はLambda等と比較するとかなり厳しい (理由は起動速度のスライドで説明の通り) 43
44. © 2023 Ateam Inc. 留意しなければいけないこと バンドルサイズ・CPUタイムのリミットに注意 - CPUタイムも厳しめ ※カウントされるのはCPUを使用している時間のみ、fetchでのリクエスト待ちの時間などはカウントに入らない ヘビーなこと(画像の生成とか圧縮とか)をしない限りは、リミッタを超えることはそうそうないが、 リミットを超えても通知は基本的にないので、ダッシュボード等を要確認 (ベンダーによって一定時間エラーになったり、課金が始まったりする) 44
45. © 2023 Ateam Inc. まとめ 45
46. © 2023 Ateam Inc. エッジコンピューティングは 限りなくクライアントに近いオリジンであり、 ユーザにとってのもう一つのクライアントでもある 46
47. © 2023 Ateam Inc. エコシステムなどもかなり加速しており 今後もますます発展していく 47
48. © 2023 Ateam Inc. エッジコンピューティングの採用シーンの数や プライオリティも上がっていくかもしれない 48
49. © 2023 Ateam Inc. ただし 既存のクラウドコンピューティングを 完全に置き換えるものではなさそう 49
50. © 2023 Ateam Inc. おそらく 今後求められるのは 両立やコラボレーション、適材適所な選択 50
51. © 2023 Ateam Inc. そして 今は発展のために痛みを伴っている状態 51
52. © 2023 Ateam Inc. 発展のスピードに対して 情報や人手も足りていない 52
53. © 2023 Ateam Inc. この状況に投資・参画するか 一歩引いて俯瞰するかはあなた次第 53
54. © 2023 Ateam Inc. Let's enjoy edge runtime! 54