Cloudflare Meetup Tokyo Kick Off !!

1. Cloudflare Meetup Tokyo Kick Off !!
森茂 洋
Cloudflare Pages/Workesとは

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/