Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

© 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 他にも多数...

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

© 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/

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

© 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/

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

© 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

© 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の場合

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

© 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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

© 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/

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

© 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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

© 2023 Ateam Inc. まとめ 45

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content