Cloudflare Workersのユースケースと開発方法

DevelopersIO 2023 Sapporoで登壇した資料です。

Cloudflare WorkersとはCloudflare社のCDN上で動作するJavaScriptの実行環境です。このセッションでは、開発者からみたCDNの概要とCloudflare Workersのユースケースと開発方法について説明します。

Transcript

1. Cloud fl are Workersのユースケースと開発⽅法 2 0 2 3 / 7 / 1 4 AWS事業本部 サービス開発室 佐藤直哉
2. ⾃⼰紹介 佐藤 直哉 / Sato Naoya クラスメソッド株式会社 AWS事業本部サービス開発室 
 アプリケーションエンジニア クラスメソッドメンバーズポータルの開発‧保守を担当 - 2 0 2 1 APN AWS Top Engineer - 2 0 2 3 Japan AWS All Certi fi cations Engineer 2
3. このセッションのゴール Cloud fl are WorkersͳΜ͔͓΋͠Ζͦ͏ ޙͰ৮ͬͯΈΑ͏ 3
4. アジェンダ •CDNのおさらい •Cloud fl are Workersの概要、開発⽅法について •Cloud fl are Workersのユースケース 4
5. CDNのおさらい 5
6. CDN ίϯςϯπ഑৴ωοτϫʔΫʢContents Delivery Networkʣ 6
7. CDN Webのコンテンツ（CSS,JavaScript,画像,動画 etc）を⾼速に 配信するためのグローバルなネットワークのサーバーの集合 7 https://ja.wikipedia.org/wiki/ %E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83 %87%E3%83%AA%E3%83%90%E3%83%AA%E3%83%8D%E3%83%83%E 3%83%88%E3%83%AF%E3%83%BC%E3%82%AF
8. 代表的なCDNサービス 8
9. CDNの機能 •キャッシュ •ルーティング •HTTPリクエスト‧レスポンスの変更 •DDoS対策 •Bot対策 •WAF（Web Application Firewall） •画像最適化 •コンテンツの圧縮 •HTML, CSS, JavaScriptのminify •etc …   9
10. CDNのメリット ύϑΥʔϚϯεͷ޲্ 10
11. CDNのメリット ΦϦδϯͷෛՙܰݮ 11
12. CDNおさらい終了 12
13. サーバーレスエッジコンピューティング 13
14. サーバーレスエッジコンピューティング •近年CDNのエッジサーバー上 でコードを実⾏できるサービ スが出てきた •サーバーレスなCDNエッジ上 コードを実⾏ 14
15. サーバーレスエッジコンピューティングを提供しているサービス •Cloud fl are: Workers •fastly: Compute@Edge •Akamai: EdgeWorkers •AWS: CloudFront Functions, Lambda@Edge •Deno: Deno Deploy •Vercel: Edge Functions 15
17. Cloud fl are Workers とは Cloud fl areͷCDNͰಈ࡞͢Δ JavaScriptͷ࣮ߦ؀ڥ 17
18. Cloud fl are Workers とは 18 Ҿ༻:https://developers.cloud fl are.com/workers/learning/how-workers-works/
19. Cloud fl are Workers の特徴 ྉ͕͍ۚ҆ ݸਓͰ࢖͏෼ʹ͸΄ͱΜͲແྉ 19
20. Cloud fl are Workers の特徴 θϩίʔϧυελʔτ 20
21. ゼロコールドスタート αʔόʔϨεͰίʔυΛ࣮ߦ͢Δࡍʹ͸ ௨ৗίʔϧυελʔτ͕ൃੜ 21
22. ゼロコールドスタート Cloud fl are Workers͸ίʔϧυελʔτ͕ ى͖ͳ͍Α͏ͳઃܭ 22
23. ゼロコールドスタート 23 引⽤:https://blog.cloud fl are.com/eliminating-cold-starts-with-cloud fl are-workers/
24. Service Worker互換 24 •Service Worker API •ブラウザで動くService WorkerをCDNエッジに拡張
25. Cloud fl are Workersの開発⽅法 25
26. Wrangler v 3 •https://github.com/cloud fl are/workers-sdk •Cloud fl are Workersの統合開発ツール •Workers Platformのローカルエミュレート機能 •ローカルWebサーバー •KV、R 2 、D 1 のCLI操作 •Workersのデプロイ 26
27. Hello World 27 •事前にCloud fl are のアカウント作成 •Node.js latest •npmでwranglerのインストール •Initでプロジェクト作成
28. Hello World σϞ 28
29. Cloud fl are Workersの制約 •JavaScriptのサイズ: 1MB未満 •Node.jsではない（Service Workerベース） • 最近アップデートされ、⼀部のNode.js APIに対応しました • https://developers.cloud fl are.com/orkers/platform/nodejs-compatibility/ •メモリ上限: 128MB •CPUランタイム: 10ms • 外部APIへの通信時間は含まない • 有料プランにすれば50ms • さらに有料のunboundにすれば30秒までとなる 29
30. Cloud fl are Workersのユースケース 30
31. リバースプロキシ 31
32. リバースプロキシ 32
33. HTTPヘッダの追加、変更 33
34. 動的コンテンツのキャッシュ操作 34
35. HTML リライト 35
36. エッジでコードを動かすメリット ΦϦδϯͷΞϓϦέʔγϣϯΛมߋͤͣʹ CDN্Ͱॊೈʹ੍ޚ͕Մೳ 36
37. エッジWebアプリケーション 37
38. エッジWebアプリケーション CDN্Ͱ ϑϩϯτΤϯυ͔ΒαʔόʔαΠυ·Ͱ ຊ֨తͳWebΞϓϦέʔγϣϯΛ࡞Δ 38
39. エッジWebアプリケーション 39 •Web APIを作りたいときにはHono (https://hono.dev/) •WebアプリケーションにはRemix (https://remix.run/)
40. エッジWebアプリケーション •Cloud fl are KV: Workersから使えるキーバリューストア •Cloud fl are R 2 : Amazon S 3 互換のオブジェクトストレージ •Cloud fl are D 1 : リレーショナル‧データベースサービス （SQLite） •Cloud fl are Pages: 静的Webサイトホスティング（SSR、 SSG、SPA） •Cloud fl are Access (Zero Trust): 認証 40
41. エッジWebアプリケーション 41
42. エッジWebアプリケーション ͱΓ͋͑ͣԿ͔ΞϓϦέʔγϣϯΛಈ͔ͯ͠ ײ৮Λ௫Έ͍ͨ 42
43. エッジWebアプリケーション https://remix.run/docs/en/main/tutorials/ jokes 43
44. エッジWebアプリケーション 44 •このチュートリアルをCloud fl are Pages, D 1 , Cloud fl are Accessに対応させたサンプルコードをGitHubにあげているの で興味のある⽅は参考にしてください •https://github.com/briete/remix-jokes-cloud fl are-tutorial
45. まとめ 45 •Cloud fl are Workersは制約に収まれば幅広いユースケースに対 応可能 •エッジ上で本格的なWebアプリケーションを作ることもでき、 オリジンのリバースプロキシのように既存のアプリケーショ ンの補助的に使うこともできる柔軟性 •開発の補助ツールとしても活⽤可能（Slack通知など） •⾃分の今の業務に適応できることがないかを模索するのも⾯ ⽩いかもしれません。
46. 参考資料‧リンク 46 •CDNとは何か？|CDNの仕組みとは？ 
 https://www.cloud fl are.com/ja-jp/learning/cdn/what-is-a-cdn/ •サーバーレスコンピューティングとは？|サーバーレス定義 
 https://www.cloud fl are.com/ja-jp/learning/serverless/what-is-serverless/ •エッジコンピューティングとは？ 
 https://www.cloud fl are.com/ja-jp/learning/serverless/glossary/what-is-edge-computing/ •サービスワーカー API - Web API | MDN 
 https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API •フェッチ API - Web API | MDN 
 https://developer.mozilla.org/ja/docs/Web/API/Fetch_API •Cloud fl are Fundamentals 
 https://developers.cloud fl are.com/fundamentals/ •Cloud fl are Cache 
 https://developers.cloud fl are.com/cache/ •Cloud fl are Workersのご紹介：エッジでJavaScript Service Workersを実⾏する 
 https://blog.cloud fl are.com/ja-jp/introducing-cloud fl are-workers-ja-jp/ •Eliminating cold starts with Cloud fl are Workers 
 https://blog.cloud fl are.com/eliminating-cold-starts-with-cloud fl are-workers/
47. 参考資料‧リンク 47 •https://hono.dev/ •https://remix.run/
48. 書籍 48 •https://gihyo.jp/book/ 2 0 2 1 / 9 7 8 - 4 - 2 9 7 - 1 1 9 2 5 - 6
49. セッションアンケート 49 https://forms.gle/gnLmdXpsXmek8KVTA