Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
Search
AijiUejima
March 24, 2023
Technology
14
5.4k
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
2023/03/24 エイチーム×レバレジーズ フロントエンド勉強会 の発表資料です
https://ateam.connpass.com/event/276968/
AijiUejima
March 24, 2023
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
aiji42
7
4.9k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
1.9k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.7k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.4k
Cloudflare Fonts試してみた🔤
aiji42
2
710
Hyperdrive試してみた🛸
aiji42
3
1.2k
Workers Browser Rendering API について
aiji42
0
470
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.4k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
820
Other Decks in Technology
See All in Technology
kargoの魅力について伝える
magisystem0408
0
210
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.3k
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
Qiita埋め込み用スライド
naoki_0531
0
5.1k
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
230
祝!Iceberg祭開幕!re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
3
260
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
200
.NET 9 のパフォーマンス改善
nenonaninu
0
900
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
36
13k
Featured
See All Featured
It's Worth the Effort
3n
183
28k
Mobile First: as difficult as doing things right
swwweet
222
9k
How GitHub (no longer) Works
holman
311
140k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Making Projects Easy
brettharned
116
5.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Transcript
© 2023 Ateam Inc. ビギナー向け エッジランタイムのすすめ ~エッジランタイムを意識した開発をはじめよう~ エイチーム×レバレジーズ フロントエンド勉強会
© 2023 Ateam Inc. 自己紹介 Who am I ? Name:
Aiji Uejima Twitter: aiji42_dev Github: aiji42 株式会社エイチームライフデザイン技術開発室所属 リードエンジニア 直近はサービス開発からは離れていますが、少し前までRemixでのサービス開発を進めていました。 最近興味があるのはこの発表の通りエッジランタイム。 毎日プライベートでGithubに草生やしながら頑張ってます! 2
© 2023 Ateam Inc. おしながき 1. エッジランタイム/エッジコンピューティングとはなにか 2. エッジコンピューティングはなぜ流行っているのか? 3.
エッジコンピューティングで具体的に何ができるのか? 4. エッジランタイムで開発する上での留意点 3
© 2023 Ateam Inc. エッジランタイム/エッジコンピューティング とはなにか 4
© 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは? CDNロケーションに配置されたコンピューティングリソースおよびその実行環境 5 ※一般的に「エッジ」が指すものは文脈によって異なります この発表では上の画像のイメージで話します edge
edge edge origin
© 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 他にも多数...
© 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは? なぜV8/Javascript構成が採用されるのか 7 1. パフォーマンス V8エンジンは最適化されたJITコンパイラを使用し、Javascriptをネイティブマシンコードに変換する。
そのため、低遅延が重要視されるエッジランタイムでの採用が盛ん
© 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは? なぜV8/Javascript構成が採用されるのか 8 2. 独立性 エッジランタイムではV8
isolateという機構が取られる。 独自のメモリ空間を持ち分離されるため、複数ユーザ・アプリケーションが同一物理リソース上にあっても、 セキュリティや安定性が担保される。また、isolateの作成と破棄が早いことが魅力的 https://developers.cloudflare.com/workers/learning/how-workers-works/
© 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/
© 2023 Ateam Inc. なぜエッジコンピューティングが流行っているのか? 10
© 2023 Ateam Inc. なぜ流行っているのか Core Web Vitals との関連性 11
https://akshayranganath.github.io/Understanding-And-Using-Core-Web-Vitals/
© 2023 Ateam Inc. なぜ流行っているのか Core Web Vitals との関連性 12
LCP/FIDの時間を短縮させるためにTTFBに着目すると、オリジンの応答速度・オリジンとの距離が注目される。 CDNでの静的ファイル配信はもちろんのこと、リアルタイム処理も含めると、オーバーヘッドが少ないエッジランタイムは 魅力的。 https://www.keycdn.com/support/what-is-ttfb
© 2023 Ateam Inc. なぜ流行っているのか オリジンへリクエストするよりもエッジでレスポンスを返せたほうが早い 13 edge edge edge
origin
© 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/
© 2023 Ateam Inc. なぜ流行っているのか 開発体験の向上 - デプロイ速度がとても早い(数百ms~30s) - プロダクションと同等の開発がローカルで再現できる(miniflare/Wokerd/edge-runtimeなど)
故にJest/Vitestなどでのテストが容易 - そしてなにより、Typescriptで書ける Next.js なら config で切替可能 15
© 2023 Ateam Inc. なぜ流行っているのか エコシステムの加速 16 エッジでの動作が保証されているフロントエンドフレームワーク エッジで動作するExpress相当のサーバー その他周辺サービス/ライブラリ
KV/R2/D1/DuableObjects (Cloudflare Workers)
© 2023 Ateam Inc. なぜ流行っているのか エコシステムの加速 17 #edge_studyでのCloudflareのセッションより
© 2023 Ateam Inc. エッジコンピューティングで具体的に何ができるのか 18
© 2023 Ateam Inc. 19 エッジの主なユースケース キャッシュの柔軟なハンドリング Next.jsのISRと同じもの実現したり、 記事の作成者本人にはリアルタイムでレンダリングし、 その他多数のユーザにはキャッシュしたコンテンツを返すみたいなことができる。
KV 記事作成者 その他ユーザ 🍪 🍪 キャッシュ SSR Token verify キャッシュを返却した後に再検証
© 2023 Ateam Inc. 20 エッジの主なユースケース 実際のエイチームでの例 CSRがメインのサービスをSSRに移行する過程で、ヘッドレスブラウザでレンダリングした結果をKVにキャッシュし、 社外(一般ユーザ)アクセスの場合はレンダリング結果(キャッシュ)を返却しSSGぽく振る舞わせる。 社内アクセスの場合はキャッシュせずリアルタイムのコンテンツを返却ということをしていた。
https://speakerdeck.com/aiji42/saibouzuhurontoendomansuri-number-26-eitimu サイボウズフロントエンドマンスリー #26 CSRなサイトを(擬似的な)ISRに変更した話
© 2023 Ateam Inc. 21 エッジの主なユースケース ABテストのルーティング CDNでリクエストをルーティングできるため、チャレンジャー用のコードをオリジナルに含めなくて良くなる original に着弾したユーザ
challenger に着弾したユーザ 🍪 🍪 original vs challenger original main branch (original) challenger branch challenger deploy deploy
© 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
© 2023 Ateam Inc. 23 エッジの主なユースケース レンダリング (Edge as Origin)
エッジでコンテンツをレンダリングして返却する。 オリジンへの物理的な距離を短縮できるため、高速にリアルタイムなコンテンツを返却できる。 D1やKVなどの周辺サービスを利用すれば、SSRでTTFB100msを切るようなコンテンツデリバリも可能。 🚫 D1
© 2023 Ateam Inc. 24 エッジの主なユースケース 3rd party scriptの実行 (Cloudflare
Zaraz) GoogleTabManagerやGoogleAnalyticsなどのアド系・分析計のスクリプトを、 ユーザのクライアントではなくエッジで動作させることで、 クライアント側のパフォーマンス改善やプライバシーリスクに対処できる。 zaraz用のスクリプトが 自動挿入される 3rd party script がエッジで実行される 🚫 代わりにzaraz event がプッシュされる クライアントでの 3rd party scriptのロードが不要に ベンダーに情報 が送信される
© 2023 Ateam Inc. エッジコンピューティングは キャッシュハンドリングやルーティング のためのものではなくなっている 25
© 2023 Ateam Inc. 限りなくクライアントに近いオリジンであり、 ユーザにとってのもう一つのクライアントでもある 26
© 2023 Ateam Inc. エッジランタイムで開発したくなってきた? 27
© 2023 Ateam Inc. 何から始めればいいか どんなことに留意すればいいのか (※Cloudflare/Vercelの話題が多めになりますがご容赦ください) 28
© 2023 Ateam Inc. 何から始める? Next.js/Vercelを使っているのであれば... - middlewareを使ってみる Advanced Features:
Middleware | Next.js リダイレクト・リライトを設定してみたり、 Cookieを読み取ってアクセス制御をアプリケーション到達前にやってみるなど オリジンを変えてしまえば、外部にプロキシすることもできる 29
© 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の場合
© 2023 Ateam Inc. Next.jsのAPIルートで、同じコードをruntimeを切り替えて比較 何から始める? 応答速度の比較 31 (コールドスタート) Vercel
Serverless (Lambda in Tokyo) (ホットスタンバイ) Vercel Edge runtime
© 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
© 2023 Ateam Inc. 何から始める? エッジランタイムでAPIエンドポイントを作ってみる Hono x Cloudflare Workersがおすすめ
https://hono.dev/ Typescriptでのルーターの書き味と、デプロイコマンドを叩いてから公開されるまでの速度に感動するはず ある程度書けるようになったら KVやD1などのデータストアも使ってみるとよい 33 https://hono.dev/
© 2023 Ateam Inc. 何から始める? デプロイの速さ 34 Hono の最小構成スクリプトを Cloudflare
Workers に wrangler でデプロイ
© 2023 Ateam Inc. とりあえずデプロイの速さと 応答速度(TTFB)を体感してほしい 35
© 2023 Ateam Inc. 一方で結構ハードルもある 36
© 2023 Ateam Inc. 留意しなければいけないこと Node APIは動かない エッジランタイム初心者はみなこのハードルにぶつかる - fs
などのNode依存なAPIは使用できない 使用できるのはWeb標準API (DOMの操作を除くブラウザで使用できるAPI) - 故に現状使用できないnpmライブラリが多くあるので、代替ライブラリ探しの旅がつきもの 例) JWTを処理するためのNPMライブラリ jsonwebtoken (観測している限りで一番DL数が多い)は NodeAPI依存のためエッジランタイムでは動かない => 代替は jose 探すときにおすすめなのは、package.json の exports を見てみること。 37
© 2023 Ateam Inc. 留意しなければいけないこと ライブラリがエッジに対応しているかチェックできるサイトを作ることに 38 乞うご期待🚀
© 2023 Ateam Inc. 留意しなければいけないこと Node専用のAPIは動かない - Cloudflare Workersを使うのであれば、--node-compat を使ってみる
Configure wrangler.toml - Workers ビルド時にpolyfillが入り、Bufferなどはウェブ標準なものに置き換えられる ※ あくまで、一部のウェブ標準なAPIでpolyfill可能なもののみ。fsなどは置き換えられない。 - あとはライブラリのIssueにリクエストを登録してみましょう 39
© 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/
© 2023 Ateam Inc. 留意しなければいけないこと 外部へのTCP接続はできない - Postgres/MysqlなどのDBや、Redisなどとは直接は接続できない 例えば Prisma
のネイティブ接続のモードではDBアクセスはできない - Cloudflareであれば、KV や D1、Duable Objects などの使用をおすすめします 41
© 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
© 2023 Ateam Inc. 留意しなければいけないこと バンドルサイズ・CPUタイムのリミットに注意 - バンドルサイズの制限はLambda等と比較するとかなり厳しい (理由は起動速度のスライドで説明の通り) 43
© 2023 Ateam Inc. 留意しなければいけないこと バンドルサイズ・CPUタイムのリミットに注意 - CPUタイムも厳しめ ※カウントされるのはCPUを使用している時間のみ、fetchでのリクエスト待ちの時間などはカウントに入らない ヘビーなこと(画像の生成とか圧縮とか)をしない限りは、リミッタを超えることはそうそうないが、
リミットを超えても通知は基本的にないので、ダッシュボード等を要確認 (ベンダーによって一定時間エラーになったり、課金が始まったりする) 44
© 2023 Ateam Inc. まとめ 45
© 2023 Ateam Inc. エッジコンピューティングは 限りなくクライアントに近いオリジンであり、 ユーザにとってのもう一つのクライアントでもある 46
© 2023 Ateam Inc. エコシステムなどもかなり加速しており 今後もますます発展していく 47
© 2023 Ateam Inc. エッジコンピューティングの採用シーンの数や プライオリティも上がっていくかもしれない 48
© 2023 Ateam Inc. ただし 既存のクラウドコンピューティングを 完全に置き換えるものではなさそう 49
© 2023 Ateam Inc. おそらく 今後求められるのは 両立やコラボレーション、適材適所な選択 50
© 2023 Ateam Inc. そして 今は発展のために痛みを伴っている状態 51
© 2023 Ateam Inc. 発展のスピードに対して 情報や人手も足りていない 52
© 2023 Ateam Inc. この状況に投資・参画するか 一歩引いて俯瞰するかはあなた次第 53
© 2023 Ateam Inc. Let's enjoy edge runtime! 54
None