Cloudflare Pages/Workersとは

Cloudflare Meetup Tokyo Kick Off !! での登壇資料です。
https://cfm-cts.connpass.com/event/275461/

Transcript

1. Cloudflare Meetup Tokyo Kick Off !! 森茂 洋 Cloudflare Pages/Workersとは
2. Cloudflare Meetup Tokyo Kick Off !! 自己紹介 2 森茂 洋 / Hiroshi Morishige @_himorishige 株式会社microCMS フロントエンドエンジニア 流行りごとはRemix、Qwik、Edge全般 Cloudflare Developer Challenge 2022 Winner
3. 目次 3 • Cloudflare Workers について • Cloudflare Pages について • おわりに Cloudflare Meetup Tokyo Kick Off !!
4. Cloudflare Meetup Tokyo Kick Off !! Cloudflare Workers 4
5. Cloudflare Meetup Tokyo Kick Off !! Cloudflare Workers について 5 • エッジ環境で動作する Web API - Service Workerの実行環境 • 2017年9月にBetaリリース、 2018年3月にGA Cloudflare Workersのご紹介：エッジでJavaScript Service Workersを実行する Workersを使って誰もがCloudflare上でJavaScriptを実行できるようになりました サービスワーカー API - Web API | MDN
6. Cloudflare Meetup Tokyo Kick Off !! Edge Server 6 引用: https://www.cloudflare.com/learning/cdn/performance/
7. Cloudflare Meetup Tokyo Kick Off !! Workers の仕組み 7 引用: https://developers.cloudflare.com/workers/learning/how-workers-works/ 参考: Eliminating cold starts with Cloudflare Workers
8. Cloudflare Meetup Tokyo Kick Off !! Workers と連携するデータストレージ 8 Workers KV 結果整合性を特徴を持つ Key-Valueストア R2 AWS S3互換ストレージ Durable Objects 強整合性の特徴を持ちリアルタイムのデータを扱うことに向いているオ ブジェクトストレージ D1 (Public alpha) エッジで動作するSQLite（リレーショナル・データベース） Queues (Public beta) ジョブのキューイング、メッセージングサービス
9. Cloudflare Meetup Tokyo Kick Off !! Workers のユースケース 9 • 異なるタイプのリクエストを異なるオリジンサーバーにルーティングする • HTMLテンプレートをエッジで展開し、オリジンでの帯域幅の費用を削減する • キャッシュされたコンテンツにアクセス制御を適用する • 全く異なる2つのバックエンド間でA/Bテストを実施する • カスタムセキュリティフィルターを作成し、アプリに固有の不要なトラフィックをブロックする • キャッシュヒット率を向上させるためにリクエストを書き換える • カスタムの負荷分散とフェイルオーバーロジックを実装する • ユーザーのブラウザでコードを実行することなく、分析結果を収集する • Web APIに対応する「サーバーレス」アプリケーションを構築する • その他、使い手のアイデア次第 https://blog.cloudflare.com/ja-jp/cloudflare-workers-unleashed-ja-jp/ より一部抜粋
10. Cloudflare Meetup Tokyo Kick Off !! Workers の料金プラン 10 Free Plan Paid Plan(Bundled/Unbound) バンドルサイズ 1MB 5MB(soft limit) メモリサイズ 128MB* 128MB* CPU実行時間 10ms bundled: HTTP 50ms, Cron 50ms unbound: HTTP 30s, Cron 15min リクエスト数 100,000/day、1,000/min none 料金 無料 $5~/mo 参照: https://developers.cloudflare.com/workers/platform/limits/ ※大きなリクエストはTransformStream APIを利用しStreamとして扱うことを推奨
11. Cloudflare Meetup Tokyo Kick Off !! Node.js API Compatibility 11 引用: https://blog.cloudflare.com/workers-node-js-asynclocalstorage/
12. Cloudflare Meetup Tokyo Kick Off !! Service Worker と Module Worker 12 Module Worker形式 (ES Modules) Service Worker形式 (Global Scope)
13. Cloudflare Meetup Tokyo Kick Off !! Module Worker のメリット 13 • Durable Objectsが利用できる • Module Workerはバインディング（サービス連携）されたサービスをグローバルに展開しな いので、名前空間の衝突や不要なアクセスなどなく安全に展開ができる • ESモジュールなのでnpmなどで共有、公開ができる。また他のModule Workerからもイン ポートして再利用することもできる ◦ JavaScript、TypeScript ◦ WebAssembly（C、Rust、Goなど） ◦ HTML、画像ファイルなど Cloudflare WorkersでJavaScriptモジュールのサポートを開始
14. Cloudflare Meetup Tokyo Kick Off !! • Cloudflare Workersでも利用できるルーティングも備えた軽量フレームワーク https://hono.dev/ 迷ったら Hono を使おう 14
15. 目次 15 • Cloudflare Workers について • Cloudflare Pages について • おわりに Cloudflare Meetup Tokyo Kick Off !!
16. Cloudflare Meetup Tokyo Kick Off !! Cloudflare Pages 16
17. Cloudflare Meetup Tokyo Kick Off !! Cloudflare Pages について 17 • Gitベースのデプロイワークフローをもつ 「フロントエンド開発者がJamstackサイト を構築、ホストする環境」 • CloudflareのCDNにホスティング • 2020年12月にBetaリリース、 2021年4月にGA Cloudflare Pages is now Generally Available
18. Cloudflare Meetup Tokyo Kick Off !! Cloudflare Pages について 18 • 2021年11月 Pages Functions Beta、 2022年11月 Pages Functions GA • Pages上でWorkersが利用可能に • Gitベースのデプロイワークフローをもつ 「フロントエンド開発者のためのフルス タックプラットフォーム」へと進化 Cloudflare Pagesのあなたのサイトを、一般提供されたPages Functionsでより充実させる
19. Cloudflare Meetup Tokyo Kick Off !! Pages に対応するフレームワーク 19 https://developers.cloudflare.com/pages/framework-guides/ and so on.
20. Cloudflare Meetup Tokyo Kick Off !! Pages の料金プラン 20 Free Pro($25/mo) Business($250/mo) 同時ビルド数 1 5 20 ビルド数 500/mo 5,000/mo 20,000/mo カスタムドメイン 100 250 500 サイト数 無制限 帯域幅 無制限 制限 20,000ファイル/1ファイル最大25MB 参照: https://developers.cloudflare.com/pages/platform/limits/
21. 目次 21 • Cloudflare Workers について • Cloudflare Pages について • おわりに Cloudflare Meetup Tokyo Kick Off !!
22. Cloudflare Meetup Tokyo Kick Off !! 22 “You write code. We handle the rest.” 引用: https://workers.cloudflare.com/
23. Enjoy :) 23 https://discord.gg/K3DPqw4EJ2 @micro_cms https://jobs.microcms.co.jp/
24. Cloudflare Meetup Tokyo Kick Off !! 参考資料・リンク 24 • Cloudflare Workersのご紹介：エッジでJavaScript Service Workersを実行する https://blog.cloudflare.com/ja-jp/introducing-cloudflare-workers-ja-jp/ • Workersを使って誰もがCloudflare上でJavaScriptを実行できるようになりました https://blog.cloudflare.com/ja-jp/cloudflare-workers-unleashed-ja-jp/ • サービスワーカー API - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API • CDN performance | Cloudflare https://www.cloudflare.com/learning/cdn/performance/ • Eliminating cold starts with Cloudflare Workers https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/ • How Workers works · Cloudflare Workers docs https://developers.cloudflare.com/workers/learning/how-workers-works/ • Workersを使って誰もがCloudflare上でJavaScriptを実行できるようになりました https://blog.cloudflare.com/ja-jp/cloudflare-workers-unleashed-ja-jp/ • Limits · Cloudflare Workers docs https://developers.cloudflare.com/workers/platform/limits/
25. Cloudflare Meetup Tokyo Kick Off !! 参考資料・リンク 25 • Cloudflare WorkersでJavaScriptモジュールのサポートを開始 https://blog.cloudflare.com/ja-jp/workers-javascript-modules-ja-jp/ • Hono - Ultrafast web framework for the Edge https://hono.dev/ • Cloudflare Pages is now Generally Available https://blog.cloudflare.com/cloudflare-pages-ga/ • Cloudflare Pagesのあなたのサイトを、一般提供されたPages Functionsでより充実させる https://blog.cloudflare.com/ja-jp/pages-function-goes-ga-ja-jp/ • Framework guides · Cloudflare Pages docs https://developers.cloudflare.com/pages/framework-guides/ • Limits · Cloudflare Pages docs https://developers.cloudflare.com/pages/platform/limits/ • Cloudflare Workers® https://workers.cloudflare.com/