Cloudflare Meetup Tokyo Kick Off !! 森茂 洋 Cloudflare Pages/Workersとは

Cloudflare Meetup Tokyo Kick Off !! 自己紹介 2 森茂 洋 / Hiroshi Morishige @_himorishige 株式会社microCMS フロントエンドエンジニア 流行りごとはRemix、Qwik、Edge全般 Cloudflare Developer Challenge 2022 Winner

目次 3 ● Cloudflare Workers について ● Cloudflare Pages について ● おわりに Cloudflare Meetup Tokyo Kick Off !!

Cloudflare Meetup Tokyo Kick Off !! Cloudflare Workers 4

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

Cloudflare Meetup Tokyo Kick Off !! Edge Server 6 引用: https://www.cloudflare.com/learning/cdn/performance/

Cloudflare Meetup Tokyo Kick Off !! Workers の仕組み 7 引用: https://developers.cloudflare.com/workers/learning/how-workers-works/ 参考: Eliminating cold starts with Cloudflare Workers

Cloudflare Meetup Tokyo Kick Off !! Workers と連携するデータストレージ 8 Workers KV 結果整合性を特徴を持つ Key-Valueストア R2 AWS S3互換ストレージ Durable Objects 強整合性の特徴を持ちリアルタイムのデータを扱うことに向いているオ ブジェクトストレージ D1 (Public alpha) エッジで動作するSQLite（リレーショナル・データベース） Queues (Public beta) ジョブのキューイング、メッセージングサービス

Cloudflare Meetup Tokyo Kick Off !! Workers のユースケース 9 ● 異なるタイプのリクエストを異なるオリジンサーバーにルーティングする ● HTMLテンプレートをエッジで展開し、オリジンでの帯域幅の費用を削減する ● キャッシュされたコンテンツにアクセス制御を適用する ● 全く異なる2つのバックエンド間でA/Bテストを実施する ● カスタムセキュリティフィルターを作成し、アプリに固有の不要なトラフィックをブロックする ● キャッシュヒット率を向上させるためにリクエストを書き換える ● カスタムの負荷分散とフェイルオーバーロジックを実装する ● ユーザーのブラウザでコードを実行することなく、分析結果を収集する ● Web APIに対応する「サーバーレス」アプリケーションを構築する ● その他、使い手のアイデア次第 https://blog.cloudflare.com/ja-jp/cloudflare-workers-unleashed-ja-jp/ より一部抜粋

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として扱うことを推奨

Cloudflare Meetup Tokyo Kick Off !! Node.js API Compatibility 11 引用: https://blog.cloudflare.com/workers-node-js-asynclocalstorage/

Cloudflare Meetup Tokyo Kick Off !! Service Worker と Module Worker 12 Module Worker形式 (ES Modules) Service Worker形式 (Global Scope)

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モジュールのサポートを開始

Cloudflare Meetup Tokyo Kick Off !! ● Cloudflare Workersでも利用できるルーティングも備えた軽量フレームワーク https://hono.dev/ 迷ったら Hono を使おう 14

目次 15 ● Cloudflare Workers について ● Cloudflare Pages について ● おわりに Cloudflare Meetup Tokyo Kick Off !!

Cloudflare Meetup Tokyo Kick Off !! Cloudflare Pages 16

Cloudflare Meetup Tokyo Kick Off !! Cloudflare Pages について 17 ● Gitベースのデプロイワークフローをもつ 「フロントエンド開発者がJamstackサイト を構築、ホストする環境」 ● CloudflareのCDNにホスティング ● 2020年12月にBetaリリース、 2021年4月にGA Cloudflare Pages is now Generally Available

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でより充実させる

Cloudflare Meetup Tokyo Kick Off !! Pages に対応するフレームワーク 19 https://developers.cloudflare.com/pages/framework-guides/ and so on.

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 ● Cloudflare Workers について ● Cloudflare Pages について ● おわりに Cloudflare Meetup Tokyo Kick Off !!

Cloudflare Meetup Tokyo Kick Off !! 22 “You write code. We handle the rest.” 引用: https://workers.cloudflare.com/

Enjoy :) 23 https://discord.gg/K3DPqw4EJ2 @micro_cms https://jobs.microcms.co.jp/

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/

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/