10分で完全に理解出来る Cloudflare Workers + HyperDrive / Cloudflare Workers + HyperDrive: You Might Understand It in Just 10 Minutes

社内勉強会向け資料

Transcript

1. Cloudflare Workers + Hyperdrive Taiyu Yoshizawa
2. Cloudflare Workers + Hyperdrive Taiyu Yoshizawa
3. 10分で完全に理解出来る Cloudflare Workers + Hyperdrive Taiyu Yoshizawa
5. ダ二ング・クルーガー効果 完全に理解した ちょっとわかる 何もわからない
6. ダ二ング・クルーガー効果 完全に理解した ちょっとわかる 前半 何もわからない
7. ダ二ング・クルーガー効果 完全に理解した ちょっとわかる 後半 何もわからない
8. Cloudflare とは DNSやCDN、DDoS防御やWAF、Zero Trustなどネット ワーク関係のサービスを幅広くを提供している会社 Registrarにも2021年からはなっていて、ほぼ原価でドメイ ンを買えるとても珍しいRegistrar 最近だとWebRTCやStreamなどの映像系のサービスにも力 を入れ始めている
9. Cloudflare Workersとは Cloudflare が持つグローバル ネットワーク(CDN)上で動く エッジコンピューティング インフラ自体の設定も保守も基 本不要で理論上無制限にスケー リングするサーバーレス基盤 無料から利用可能で100万件の リクエストあたり0.3 USD
10. Cloudflare Workersとは Cloudflare が持つグローバル ネットワーク(CDN)上で動く エッジコンピューティング インフラ自体の設定も保守も基 本不要で理論上無制限にスケー リングするサーバーレス基盤 無料から利用可能で100万件の リクエストあたり0.3 USD
11. Cloudflare Workersとは ！ ん ー ら か わ か る て っ 言 何 Cloudflare が持つグローバル ネットワーク(CDN)上で動く エッジコンピューティング インフラ自体の設定も保守も基 本不要で理論上無制限にスケー リングするサーバーレス基盤 無料から利用可能で100万件の リクエストあたり0.3 USD
12. CDN とは？ Content Delivery Network の略で、コンテンツを効率よ く配信するためのネットワークのこと。 サーバー (Origin) と クライアントの間に立って、キャッ シュやネットワークの最適化をしてくれる AkamaiやFastly などの会社も同様の仕組みを提供している AWS で言うと CloudFront
13. CDN とは？ Japan America クライアント サーバー
 (Origin) クライアントとサーバーが地理的に遠いので 遅くなってしまう
14. CDN とは？ Japan Japan America クライアント エッジサーバー
 (CDN) サーバー
 (Origin) CDNが間に立って静的なコンテンツを キャッシュしてくれるので体感早くなる
15. CDN とは？ Japan Japan America エッジサーバー
 (CDN) サーバー
 (Origin) IP Anycast クライアント Cloudflareの場合は、DNS とくっついて提供されている かつTLS 終端を行うReverse Proxy としての役目がある
16. エッジコンピューティングとは？ ユーザーに近いエッジロケーションでデータ処理を行う技 術・コンピューティングリソースのこと さっきのCDNの例で出ていたエッジサーバーがこれに当 たる サーバー(Edge)とクライアントの地理的距離が近いので、パ フォーマンスが向上する Fastly や Deno も似たようなサービスを提供している AWS だと CloudFront Functions or Lambda@Edge
17. エッジコンピューティングとは？ クライアント エッジサーバー
 (CDN) サーバー
 (Origin) 毎回Originサーバーまで到達する必要があり、 パフォーマンスが悪い & Origin サーバーに負荷が集中する
18. エッジコンピューティングとは？ クライアント エッジサーバー
 (CDN) サーバー
 (Origin) エッジまでのネットワークで良くなるのでパフォーマンスが良い & 各ユーザーの近い位置のエッジサーバーで処理するので負荷が分散する
19. ちなみに
20. Cloudflare Workersとは Cloudflare が持つグローバル ネットワーク(CDN)上で動く エッジコンピューティング インフラ自体の設定も保守も基 本不要で理論上無制限にスケー リングするサーバーレス基盤 無料から利用可能で100万件の リクエストあたり0.3 USD
23. ない！！！！
26. Cloudflare Workersの仕組み Workers の根幹は JavaScript エンジンである V8 にある Isolate という仕組みによって動いている V8 はブラウザにも Node.js にも使われて居る isolateの仕組みと、外側のSandbox環境によってセキュリ ティ的に守られている 要するに JavaScript が Chromium で使われている JavaScript エンジンの上で動いている
27. Node.js じゃないの？
28. Kubernetes上のPodで Node.jsを動かす場合は、 一つの仮想化された占有領域に 一つのユーザーコードを動かす 必要がある コールドスタートな 実際のコードの どの実行時に支払う 実行領域 オーバーヘッド
29. isolate アプローチでは、一度 作り出した JavaScript Runtime から isolate を何千 個と作り出してユーザーコード を実行できる コールドスタートな 実際のコードの どの実行時に支払う 実行領域 オーバーヘッド
30. Cloudflare Workersの仕組み Workers の根幹は JavaScript エンジンである V8 にある Isolate という仕組みによって動いている V8 はブラウザにも Node.js にも使われて居る isolateの仕組みと、外側のSandbox環境によってセキュリ ティ的に守られている 要するに JavaScript が Chromium で使われている JavaScript エンジンの上で動いている
31. 早い！ （仮想化領域を占有しないので価格設定が）安い！ （なんかよくわからんけどたぶん）うまい！ （コールドスタートがなくEdgeで動くので）
32. 最高のサービス見つけちまったぜ！
33. ！ い な は 話 い ま う に な ん そ最高のサービス見つけちまったぜ！
34. Cloudflare Workers による制約
35. Cloudflare Workersの制約 isolateの上で動くため、メモリの内容がそのまま引き継がれ るとは限らない fsは利用できない Node.jsの標準ライブラリは利用できない（最近は解消され つつある） バイナリが必要(node-gyp) なライブラリは使えない wasmは必ずisolateのinitalize時にロードされる必要がある etc.....
36. Cloudflare Developer Platform AI Analytics Engine Assets Browser Rendering D1 Durable Objects Hyperdrive Images KV Queues R2 Rate Limiting Service Bindings Tail Workers Vectorize Workflows
37. Cloudflare Developer Platform AI Analytics Engine Assets Browser Rendering D1 Durable Objects Hyperdrive Images KV Queues R2 Rate Limiting Service Bindings Tail Workers Vectorize Workflows
38. KV グローバルで低レイテンシな Key-Value データストア 書き込み時は集中型のデータセンターにデータを保存する & エッジにキャッシュを保管する or Purgeする 読み込み時はエッジにキャッシュがあればそれを、無けれ ば集中型のデータセンターにデータを取得しに行く 各エッジでは結果整合性を持っているが、他のエッジに伝搬 するまでに60秒以上かかることがある AWS だと DynamoDB Global Table みたいなもの
39. Durable Object グローバルで一意な状態・ストレージを持つ低レイテンシな Workers と Storage を組み合わせたもの ステートフルなサーバーレスアプリケーションをつくるのに利 用することができる。 WebSocket の Connection を持っておいたり、ユーザー セッションを持っておく場合などに利用できる。 KVと異なり強力な一貫性を持ち、JSのObjectを持つことが 出来る。
40. D1 グローバルで利用できるSQLite互換のデータベース プライマリロケーションがあり、書き込みはそのロケー ションで行われるが、読み込みは最も近いエッジから行わ れる 書き込みは強い一貫性を持つが、リードレプリカには結果整 合性があり、伝搬に時間がかかることがある トランザクションなど、一部の機能が利用できない
41. Hyperdrive 既存のデータベースとWorkersの間に入って、コネクション の最適化やクエリのキャッシュを行ってくれるサービス Postgres, MySQL とそのExtension はもちろん、 CockroachDB や Timescaleなどにも対応している 既存のコードそのままで、クエリキャッシュやコネクション の最適化の恩恵を受けられるのが特徴
42. 題 本 く や よう Hyperdrive
43. Hyperdriveがない場合 300ms Request Handle! TCP Handshake (3-way) Authorization Connection established! Query Result Query Request
44. Hyperdriveがない場合 300ms Request Handle! TCP Handshake (3-way) Workerが落ちるたびに これをやる Authorization Connection established! Query Result Query Request
45. Hyperdriveがない場合 300ms Request Handle! Serverless じゃなければコネクションプールによって、解決される TCP Handshake (3-way) Authorization Connection established! Query Result Query Request
46. HyperdriveがないときのPros / Cons Pros これまで通りとくに悩むこともなく、使うことは出来る 間に何かが挟まる訳ではないので素直な挙動になる Cacheに悩まされることはない
47. HyperdriveがないときのPros / Cons Cons 毎回コネクションをつくり直すので、オーバーヘッドが大きく なる コネクションをそれぞれのWorker isolateが持とうとするた め、コネクション数が爆発的に増加する DBとWorkerの地理的距離によるネットワークコストが直接 的にレスポンスに影響する クエリはそのまますべてDBに流れる
48. Hyperdriveがある場合 10ms 300ms TCP Handshake Authorization Request Handle! Query Request Request Handle! Query Request Query Result Hyperdrive Cache HIt! Hyperdrive Cache Miss Query Request
49. Hyperdriveがある場合 10ms 300ms TCP Handshake Authorization Request Handle! Query Request Request Handle! Query Request Query Result Hyperdrive Cache HIt! リクエストがくる前 or 来たタイミングで コネクションプールを用意する Hyperdrive Cache Miss Query Request
50. Hyperdriveがある場合 10ms 300ms TCP Handshake Authorization クエリキャッシュが存在すれば、それを返す Request Handle! Query Request Hyperdrive Cache HIt! Request Handle! Query Result Query Request Hyperdrive Cache Miss Query Request
51. Hyperdriveがある場合 10ms 300ms TCP Handshake Authorization Request Handle! Request Handle! Query Result Query Request Query Request Hyperdrive Cache HIt! クエリキャッシュが存在しなければ、 DBにリクエストしてそれを返す Hyperdrive Cache Miss Query Request
52. HyperdriveがあるときのPros / Cons Pros コネクションプールをHyperdriveがマネージドで管理するの で、爆発的に増加しないし、オーバーヘッドも少ない クエリ結果をHyperdriveがキャッシュしていれば、DBヘの 負荷軽減も期待できる & パフォーマンスも向上する DBとWorkerの地理的距離に大きく左右されることなく、 Cloudflare Global Networkの恩恵を受けながら安定した レスポンス速度を期待できる
53. Hyperdriveがない時のPros / Cons Cons Workers <-> Hyperdrive 、 Hyperdrive <-> DB の2つ のネットワークリクエストになるため、初回以外のネット ワークレイテンシは若干増加することがある Hyperdriveがキャッシュするため、キャッシュの挙動に悩ま されることがあるかも
54. HyperdriveとDBの接続方法 DBをPublicに配置して直接アクセス出来るようにする DBをPrivateに配置して、Cloudflare Tunnel を使ってコネ クションをつなぎに行く
55. HyperdriveとDBの接続方法 DBをPublicに配置して直接アクセス出来るようにする Internet AWS Public Subnet
56. HyperdriveとDBの接続方法 DBをPrivateに配置して、Cloudflare Tunnel を使ってコネ クションをつなぎに行く AWS Public Subnet Cloudflare Tunnel database.example.com Private Subnet 172.x.x.x
57. HyperdriveとDBの接続方法 DBをPrivateに配置して、Cloudflare Tunnel を使ってコネ クションをつなぎに行く AWS Public Subnet Cloudflare Tunnel database.example.com セキュリティ的にも ちょっとうれしい Private Subnet 172.x.x.x
58. Hyperdriveを実際に使ってみよう Dashboard 見たり コード見たり
59. Hyperdriveを実際に使ってみよう 1 // wrangler.jsonc 2 { 3 ... 4 "hyperdrive": [ 5 { 6 "binding": "HYPERDRIVE_DB", 7 "id": "039de7c44d4b45fab171c85ba68aba38" 8 } 9 ], 10 ... 11 }
60. Hyperdriveを実際に使ってみよう 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { Hono } from 'hono'; import { drizzle } from 'drizzle-orm/postgres-js'; /* type CloudflareBindings = { HYPERDRIVE_DB: Hyperdrive } */ const app = new Hono<{ Bindings: CloudflareBindings }>(); app.use('*', (c, next) => { const db = drizzle(c.env.HYPERDRIVE_DB.connectionString); c.set('db', db); return next(); });
61. Hyperdriveを実際に使ってみよう 1 app.get('/account/me', async (c) => { 2 const db = c.get('db') 3 const userId = "nekoyasan" // 実際にはどこかで送っている 4 if (!db) throw new Error('Database connection not found in context'); 5 6 const userData = await db.select({ 7 id: userDetail.userId, 8 displayName: userDetail.displayName, 9 iconImage: userDetail.iconImage, 10 }) 11 .from(userDetail) 12 .where(eq(userDetail.userId, userId)); 13 14 return c.json({ result: userData[0] }) 15 })
62. Hyperdriveを実際に使ってみよう 設定さえ出来てしまえば使うのはめちゃめちゃ簡単 Localの場合は
 WRANGLER_HYPERDRIVE_LOCAL_CONNECTION_ STRING_HYPERDRIVE_DB 
 という環境変数が入っていればwranglerが良い感じにしてく れて、Local 開発でも便利
63. Cloudflare Workers ぜひ使ってみてね！