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とは
   

   View Slide

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

   View Slide

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

   View Slide

4. Cloudflare Meetup Tokyo Kick Off !!
   Cloudflare Workers
   4
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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/ より一部抜粋
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. Cloudflare Meetup Tokyo Kick Off !!
    Cloudflare Pages
    16
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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/
    

    View Slide