Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cloudflare Pages/Workersとは

microCMS
April 26, 2023

Cloudflare Pages/Workersとは

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

microCMS

April 26, 2023
Tweet

More Decks by microCMS

Other Decks in Technology

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