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

Cloudflare Pages/Workersとは

Cloudflare Pages/Workersとは

Cloudflare Meetup Tokyo Kick Off !!

Hiroshi Morishige

April 25, 2023
Tweet

More Decks by Hiroshi Morishige

Other Decks in Technology

Transcript

  1. Cloudflare Meetup Tokyo Kick Off !! 自己紹介 2 森茂 洋

    / Hiroshi Morishige @_himorishige 株式会社microCMS フロントエンドエンジニア 流行りごとはRemix、Qwik、Edge全般 Cloudflare Developer Challenge 2022 Winner
  2. 目次 3 • Cloudflare Workers について • Cloudflare Pages について

    • おわりに Cloudflare Meetup Tokyo Kick Off !!
  3. 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
  4. Cloudflare Meetup Tokyo Kick Off !! Edge Server 6 引用:

    https://www.cloudflare.com/learning/cdn/performance/
  5. Cloudflare Meetup Tokyo Kick Off !! Workers の仕組み 7 引用:

    https://developers.cloudflare.com/workers/learning/how-workers-works/ 参考: Eliminating cold starts with Cloudflare Workers
  6. Cloudflare Meetup Tokyo Kick Off !! Workers と連携するデータストレージ 8 Workers

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

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

    引用: https://blog.cloudflare.com/workers-node-js-asynclocalstorage/
  10. Cloudflare Meetup Tokyo Kick Off !! Service Worker と Module

    Worker 12 Module Worker形式 (ES Modules) Service Worker形式 (Global Scope)
  11. 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モジュールのサポートを開始
  12. 目次 15 • Cloudflare Workers について • Cloudflare Pages について

    • おわりに Cloudflare Meetup Tokyo Kick Off !!
  13. Cloudflare Meetup Tokyo Kick Off !! Cloudflare Pages について 17

    • Gitベースのデプロイワークフローをもつ 「フロントエンド開発者がJamstackサイト を構築、ホストする環境」 • CloudflareのCDNにホスティング • 2020年12月にBetaリリース、 2021年4月にGA Cloudflare Pages is now Generally Available
  14. 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でより充実させる
  15. 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/
  16. 目次 21 • Cloudflare Workers について • Cloudflare Pages について

    • おわりに Cloudflare Meetup Tokyo Kick Off !!
  17. Cloudflare Meetup Tokyo Kick Off !! 22 “You write code.

    We handle the rest.” 引用: https://workers.cloudflare.com/
  18. 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/
  19. 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/