Cloudflare Workersのユースケースと開発方法

by Sato Naoya

Slide 1

Slide 1 text

Cloud fl are Workersのユースケースと開発⽅法 2 0 2 3 / 7 / 1 4 AWS事業本部サービス開発室佐藤直哉

Slide 2

Slide 2 text

⾃⼰紹介佐藤直哉 / Sato Naoya クラスメソッド株式会社 AWS事業本部サービス開発室   アプリケーションエンジニアクラスメソッドメンバーズポータルの開発‧保守を担当 - 2 0 2 1 APN AWS Top Engineer - 2 0 2 3 Japan AWS All Certi fi cations Engineer 2

Slide 3

Slide 3 text

このセッションのゴール Cloud fl are WorkersͳΜ͔͓΋͠Ζͦ͏ ޙͰ৮ͬͯΈΑ͏ 3

Slide 4

Slide 4 text

アジェンダ •CDNのおさらい •Cloud fl are Workersの概要、開発⽅法について •Cloud fl are Workersのユースケース 4

Slide 5

Slide 5 text

CDNのおさらい 5

Slide 6

Slide 6 text

CDN ίϯςϯπ഑৴ωοτϫʔΫʢContents Delivery Networkʣ 6

Slide 7

Slide 7 text

CDN Webのコンテンツ（CSS,JavaScript,画像,動画 etc）を⾼速に配信するためのグローバルなネットワークのサーバーの集合 7 https://ja.wikipedia.org/wiki/ %E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83 %87%E3%83%AA%E3%83%90%E3%83%AA%E3%83%8D%E3%83%83%E 3%83%88%E3%83%AF%E3%83%BC%E3%82%AF

Slide 8

Slide 8 text

代表的なCDNサービス 8

Slide 9

Slide 9 text

CDNの機能 •キャッシュ •ルーティング •HTTPリクエスト‧レスポンスの変更 •DDoS対策 •Bot対策 •WAF（Web Application Firewall） •画像最適化 •コンテンツの圧縮 •HTML, CSS, JavaScriptのminify •etc … 9

Slide 10

Slide 10 text

CDNのメリット ύϑΥʔϚϯεͷ޲্ 10

Slide 11

Slide 11 text

CDNのメリット ΦϦδϯͷෛՙܰݮ 11

Slide 12

Slide 12 text

CDNおさらい終了 12

Slide 13

Slide 13 text

サーバーレスエッジコンピューティング 13

Slide 14

Slide 14 text

サーバーレスエッジコンピューティング •近年CDNのエッジサーバー上でコードを実⾏できるサービスが出てきた •サーバーレスなCDNエッジ上コードを実⾏ 14

Slide 15

Slide 15 text

サーバーレスエッジコンピューティングを提供しているサービス •Cloud fl are: Workers •fastly: Compute@Edge •Akamai: EdgeWorkers •AWS: CloudFront Functions, Lambda@Edge •Deno: Deno Deploy •Vercel: Edge Functions 15

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Cloud fl are Workers とは Cloud fl areͷCDNͰಈ࡞͢Δ JavaScriptͷ࣮ߦ؀ڥ 17

Slide 18

Slide 18 text

Cloud fl are Workers とは 18 Ҿ༻:https://developers.cloud fl are.com/workers/learning/how-workers-works/

Slide 19

Slide 19 text

Cloud fl are Workers の特徴 ྉ͕͍ۚ҆ ݸਓͰ࢖͏෼ʹ͸΄ͱΜͲແྉ 19

Slide 20

Slide 20 text

Cloud fl are Workers の特徴 θϩίʔϧυελʔτ 20

Slide 21

Slide 21 text

ゼロコールドスタート αʔόʔϨεͰίʔυΛ࣮ߦ͢Δࡍʹ͸ ௨ৗίʔϧυελʔτ͕ൃੜ 21

Slide 22

Slide 22 text

ゼロコールドスタート Cloud fl are Workers͸ίʔϧυελʔτ͕ ى͖ͳ͍Α͏ͳઃܭ 22

Slide 23

Slide 23 text

ゼロコールドスタート 23 引⽤:https://blog.cloud fl are.com/eliminating-cold-starts-with-cloud fl are-workers/

Slide 24

Slide 24 text

Service Worker互換 24 •Service Worker API •ブラウザで動くService WorkerをCDNエッジに拡張

Slide 25

Slide 25 text

Cloud fl are Workersの開発⽅法 25

Slide 26

Slide 26 text

Wrangler v 3 •https://github.com/cloud fl are/workers-sdk •Cloud fl are Workersの統合開発ツール •Workers Platformのローカルエミュレート機能 •ローカルWebサーバー •KV、R 2 、D 1 のCLI操作 •Workersのデプロイ 26

Slide 27

Slide 27 text

Hello World 27 •事前にCloud fl are のアカウント作成 •Node.js latest •npmでwranglerのインストール •Initでプロジェクト作成

Slide 28

Slide 28 text

Hello World σϞ 28

Slide 29

Slide 29 text

Cloud fl are Workersの制約 •JavaScriptのサイズ: 1MB未満 •Node.jsではない（Service Workerベース） • 最近アップデートされ、⼀部のNode.js APIに対応しました • https://developers.cloud fl are.com/orkers/platform/nodejs-compatibility/ •メモリ上限: 128MB •CPUランタイム: 10ms • 外部APIへの通信時間は含まない • 有料プランにすれば50ms • さらに有料のunboundにすれば30秒までとなる 29

Slide 30

Slide 30 text

Cloud fl are Workersのユースケース 30

Slide 31

Slide 31 text

リバースプロキシ 31

Slide 32

Slide 32 text

リバースプロキシ 32

Slide 33

Slide 33 text

HTTPヘッダの追加、変更 33

Slide 34

Slide 34 text

動的コンテンツのキャッシュ操作 34

Slide 35

Slide 35 text

HTML リライト 35

Slide 36

Slide 36 text

エッジでコードを動かすメリット ΦϦδϯͷΞϓϦέʔγϣϯΛมߋͤͣʹ CDN্Ͱॊೈʹ੍ޚ͕Մೳ 36

Slide 37

Slide 37 text

エッジWebアプリケーション 37

Slide 38

Slide 38 text

エッジWebアプリケーション CDN্Ͱ ϑϩϯτΤϯυ͔ΒαʔόʔαΠυ·Ͱ ຊ֨తͳWebΞϓϦέʔγϣϯΛ࡞Δ 38

Slide 39

Slide 39 text

エッジWebアプリケーション 39 •Web APIを作りたいときにはHono (https://hono.dev/) •WebアプリケーションにはRemix (https://remix.run/)

Slide 40

Slide 40 text

エッジWebアプリケーション •Cloud fl are KV: Workersから使えるキーバリューストア •Cloud fl are R 2 : Amazon S 3 互換のオブジェクトストレージ •Cloud fl are D 1 : リレーショナル‧データベースサービス（SQLite） •Cloud fl are Pages: 静的Webサイトホスティング（SSR、 SSG、SPA） •Cloud fl are Access (Zero Trust): 認証 40

Slide 41

Slide 41 text

エッジWebアプリケーション 41

Slide 42

Slide 42 text

エッジWebアプリケーション ͱΓ͋͑ͣԿ͔ΞϓϦέʔγϣϯΛಈ͔ͯ͠ ײ৮Λ௫Έ͍ͨ 42

Slide 43

Slide 43 text

エッジWebアプリケーション https://remix.run/docs/en/main/tutorials/ jokes 43

Slide 44

Slide 44 text

エッジWebアプリケーション 44 •このチュートリアルをCloud fl are Pages, D 1 , Cloud fl are Accessに対応させたサンプルコードをGitHubにあげているので興味のある⽅は参考にしてください •https://github.com/briete/remix-jokes-cloud fl are-tutorial

Slide 45

Slide 45 text

まとめ 45 •Cloud fl are Workersは制約に収まれば幅広いユースケースに対応可能 •エッジ上で本格的なWebアプリケーションを作ることもでき、オリジンのリバースプロキシのように既存のアプリケーションの補助的に使うこともできる柔軟性 •開発の補助ツールとしても活⽤可能（Slack通知など） •⾃分の今の業務に適応できることがないかを模索するのも⾯⽩いかもしれません。

Slide 46

Slide 46 text

参考資料‧リンク 46 •CDNとは何か？|CDNの仕組みとは？   https://www.cloud fl are.com/ja-jp/learning/cdn/what-is-a-cdn/ •サーバーレスコンピューティングとは？|サーバーレス定義   https://www.cloud fl are.com/ja-jp/learning/serverless/what-is-serverless/ •エッジコンピューティングとは？   https://www.cloud fl are.com/ja-jp/learning/serverless/glossary/what-is-edge-computing/ •サービスワーカー API - Web API | MDN   https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API •フェッチ API - Web API | MDN   https://developer.mozilla.org/ja/docs/Web/API/Fetch_API •Cloud fl are Fundamentals   https://developers.cloud fl are.com/fundamentals/ •Cloud fl are Cache   https://developers.cloud fl are.com/cache/ •Cloud fl are Workersのご紹介：エッジでJavaScript Service Workersを実⾏する   https://blog.cloud fl are.com/ja-jp/introducing-cloud fl are-workers-ja-jp/ •Eliminating cold starts with Cloud fl are Workers   https://blog.cloud fl are.com/eliminating-cold-starts-with-cloud fl are-workers/

Slide 47

Slide 47 text

参考資料‧リンク 47 •https://hono.dev/ •https://remix.run/

Slide 48

Slide 48 text

書籍 48 •https://gihyo.jp/book/ 2 0 2 1 / 9 7 8 - 4 - 2 9 7 - 1 1 9 2 5 - 6

Slide 49

Slide 49 text

セッションアンケート 49 https://forms.gle/gnLmdXpsXmek8KVTA