Accelerating App Dev with Cloudflare Workers

Slide 1

Slide 1 text

Acceleration App Dev with Cloudﬂare Workers Cloudﬂare Workers Meetup by NOT A HOTEL 2023.11.24

Slide 2

Slide 2 text

目次 ● “速さ”の定義 ● Cloudﬂare Workersを使用する各所の”速さ” ○ アプリケーションの作成速度 ○ 環境の構築速度 ○ プログラムの実行速度 ● 活用例 ● まとめ

Slide 3

Slide 3 text

速さ

Slide 4

Slide 4 text

Webアプリケーションはどうやったら完成？ ● 必要な機能のコードを書けば終わり？ ● 品質試験をパスすれば終わり？ ● 実行場所（サーバ）を確保すれば終わり？ ● サーバでプログラムを実行できれば終わり？

Slide 5

Slide 5 text

“速さ”の定義本資料における定義はアプリケーションを開発して本番環境で動作しユーザーにレスポンスが届くまでのトータル時間と定義する

Slide 6

Slide 6 text

アプリケーションができるまで開発テスト設計環境構築リリース🎉 配信

Slide 7

Slide 7 text

Cloudﬂare Workers

Slide 8

Slide 8 text

Cloudﬂare Workersにおける各所の速さ ● アプリケーション（プログラム）の作成速度 ● 環境構築の速度 ● プログラム実行の速度

Slide 9

Slide 9 text

Cloudﬂare Workersにおける各所の速さテスト設計リリース🎉 開発環境構築配信

Slide 10

Slide 10 text

アプリケーションの作成速度 Cloudﬂare Workersで動作させることができる対応プログラム言語 ● TypeScript ● JavaScript ● WebAssembly対応言語(Rust, C, Golang etc)

Slide 11

Slide 11 text

アプリケーションの作成速度 Cloudﬂare Workersで動作させることができる対応プログラム言語 ● TypeScript ● JavaScript ● WebAssembly対応言語(Rust, C, Golang etc) WebAssemblyにできるなら言語は問わない。

Slide 12

Slide 12 text

アプリケーションの作成速度 Cloudﬂare Workersで動作させることができる対応プログラム言語 ● TypeScript ● JavaScript ● WebAssembly対応言語(Rust, C, Golang etc) JavaScriptに（トランスパイル）出来るなら言語は問わない。 npm packageという膨大なライブラリやフレームワークの恩恵を受ける

Slide 13

Slide 13 text

アプリケーションの作成速度 Cloudﬂare Workersに対応しているフレームワーク（他にもあり） ● Hono ● GraphQL Yoga ● Next.js(一部) ● Remix ● Qwick ● Astro

Slide 14

Slide 14 text

アプリケーションの作成速度 Cloudﬂare Workersに対応しているフレームワーク（他にもあり） ● Hono ● GraphQL Yoga ● Next.js(一部) ● Remix ● Qwick ● Astro Cloudﬂare Workers単体で動作しWebサーバとして使用することができるフレームワーク

Slide 15

Slide 15 text

アプリケーションの作成速度 Cloudflare Workersに対応しているフレームワーク（他にもあり） ● Hono ● GraphQL Yoga ● Next.js(一部) ● Remix ● Qwick ● Astro Cloudflare Workers単体では動作しない（ものがある）が、Cloudflare Workers とCloudflare Pagesを組み合わせSSRなどが可能

Slide 16

Slide 16 text

アプリケーションの作成速度 Cloudﬂare Workersに対応しているフレームワーク（他にもあり） ● Hono ● GraphQL Yoga ● Next.js(一部) ● Remix ● Qwick ● Astro これらのモダンなフレームワークを使用することが出来るでCloudﬂare Workersとそれ以外の環境とで開発効率の差異は無い（むしろモダンな開発環境になる）宗教上の理由でTypeScriptやJavaScriptが扱えない方はごめんなさい…(WASMで頑張って)

Slide 17

Slide 17 text

環境の構築速度 Webアプリケーションに必要なものは？

Slide 18

Slide 18 text

環境の構築速度 Webアプリケーションに必要なものは？ ● プログラムコード ● 実行環境 ● データ格納先

Slide 19

Slide 19 text

環境の構築速度 Webアプリケーションに必要なものは？ ● プログラムコード ● 実行環境 ● データ格納先これは前項までに説明したので既に用意できるものとしてここでの話ではない

Slide 20

Slide 20 text

環境の構築速度 Webアプリケーションに必要なものは？ ● プログラムコード ● 実行環境 ● データ格納先ここで話したいのはココ要は実行サーバやアプリケーションの状態を格納するデータの保存先などのインフラと言われる部分

Slide 21

Slide 21 text

環境の構築速度 Cloudﬂare Workersの実行環境ってどうやって用意するの？

Slide 22

Slide 22 text

環境の構築速度 Cloudﬂare Workersの実行環境ってどうやって用意するの？ $ wrangler (pages) deploy これだけ（設定ファイルにアプリ名などは記載する）ビルド（バンドル）したファイルをアップロードして実行環境をサクッと用意できる。

Slide 23

Slide 23 text

みなさんはどうやって環境を用意してますか？環境の構築速度 EKS? ECS? Lambda? EC2? G KS? Cloud Run? App Engine? Cloud Function? AKS? Container App? Azure Virtual M achine?

Slide 24

Slide 24 text

みなさんはどうやって環境を用意してますか？環境の構築速度 EKS? ECS? Lambda? EC2? G KS? Cloud Run? App Engine? Cloud Function? AKS? Container App? Azure Virtual M achine? その環境って初期構築もそうですが、そもそもデプロイってどれくらいかかりますか？ちなみに …

Slide 25

Slide 25 text

環境の構築速度 Cloudﬂare Workersならこれでデプロイまでします。 $ wrangler (pages) deploy ビルド時間を含めても 1分未満。ビルド時間を除けば 10～15秒程度。

Slide 26

Slide 26 text

環境の構築速度 ● コンテナ以前はサーバをセットアップ ○ その後にプログラムを入れ替えて、Web サーバのみを再起動 ● コンテナはサーバの抽象化レベルUP ○ コンテナにプログラムを内包してコンテナを切り替える ● Cloudﬂare Workersのランタイムは固定（既にセットアップ済） ○ プログラムを入れ替えて実行

Slide 27

Slide 27 text

プログラムの実行速度 Cloudﬂare Workersはサーバレスなのでプログラム実行の速度という観点では以下の2つが重要 ● プログラム本体の実行速度 ● サーバレスの起動速度

Slide 28

Slide 28 text

プログラムの実行速度プログラムの実行速度自体がスペックなどで他と比べて遅かったりしない？

Slide 29

Slide 29 text

プログラムの実行速度 “ServerlessDays Tokyo 2023 - 秋のServerless運動会(亀田様)” の資料より

Slide 30

Slide 30 text

プログラムの実行速度 “ServerlessDays Tokyo 2023 - 秋のServerless運動会(亀田様)” の資料より Lambdaはメモリが増えるとCPUが変わるので一概に言えないが悪くない

Slide 31

Slide 31 text

プログラムの実行速度 “ServerlessDays Tokyo 2023 - 秋のServerless運動会(亀田様)” の資料より Lambda@Edgeも頑張ってる。（が、こいつは制約が強すぎて土俵が…）

Slide 32

Slide 32 text

プログラムの実行速度実行速度はそこまで悪くないっていうのがわかったが、コールドスタートは？

Slide 33

Slide 33 text

プログラムの実行速度コールドスタートこそCloudﬂare Workersの最大の速度メリット同一リクエストの差を見る限り 200ms 前後？ (コールドスタートと感じることが出来ないので正確な数値が計測できない) V8 isolateをうまく使って環境を構築しているため Node.jsサーバで読み込みを遅延読み込みをしても500ms～800msのコールドスタートはかかる（遅延読み込みを加味しないと2秒とかかかるし、遅延読み込みした分はプログラム実行時間に乗る）

Slide 34

Slide 34 text

活用例(In my case) ● GraphQL Server ● Webアプリケーション ● （Node.jsサーバ）バッチ処理今日はここ GraphQLは12月のCloudﬂare Workers Talk #2で (and moreな内容だけど)

Slide 35

Slide 35 text

活用例(In my case) ※管理画面 Cloudﬂare Workers Durable Objects Authentication Cloud Messaging Crashlytics etc 認証画像データ (R2) Socket通信 GraphQL PUSH Node.js処理サーバ GraphQL Server その他サービス現在この辺の話(他サービスでは管理画面に留まらない)

Slide 36

Slide 36 text

活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ？

Slide 37

Slide 37 text

活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ？ ● Hono ● Remix

Slide 38

Slide 38 text

活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ？ ● Hono ● Remix ルーティングかつAPIとしてだけでいいならHonoを選択レンダリングもできるが…

Slide 39

Slide 39 text

活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ？ ● Hono ● Remix レンダリングが必要ならば初手にRemix AstroやQwickもあるがあくまでWebアプリケーションとして選択するならばということ今回はWebアプリケーションなのでこっちを掘り下げる

Slide 40

Slide 40 text

活用例(In my case) RemixはCloudflare上の2つのランタイムで動作をサポートしています ● Cloudflare Workers ● Cloudflare Pages + Cloudflare Workers

Slide 41

Slide 41 text

活用例(In my case) RemixはCloudflare上の2つのランタイムで動作をサポートしています ● Cloudflare Workers ● Cloudflare Pages + Cloudflare Workers ほぼCloudflare Workers上だけで完結します。なので Cloudflare Workersの機能がフルで使用できるというメリットがあります。ただし、静的ファイルの配信がCloudflare KVから配信することになります。

Slide 42

Slide 42 text

活用例(In my case) RemixはCloudflare上の2つのランタイムで動作をサポートしています ● Cloudflare Workers ● Cloudflare Pages + Cloudflare Workers Cloudflare Pagesは静的サイトやSPAで使用できる。 Cloudflare Workersとも組み合わすことでサーバサイドの処理が行える。つまりSSRが出来る。ただし、Cloudflare Workersの全機能をサポートしているわけではない。初手はこちらを選択でよい

Slide 43

Slide 43 text

活用例(In my case) 残念ながらWebアプリケーションはプログラムだけあれば成立することは少ない大体の場合にデータベースなどが必要となる

Slide 44

Slide 44 text

2023年5月にCloudﬂare WorkersのTCP接続がサポートされた🎉 活用例(In my case)

Slide 45

Slide 45 text

ということで活用例(In my case) node_compat = true 設定ファイル(wrangler.toml)に書いて

Slide 46

Slide 46 text

ということで活用例(In my case) node_compat = true 設定ファイル(wrangler.toml)に書いて import { Client } from "pg"; export interface Env { DB: string; } export default { async fetch( request: Request, env: Env, ctx: ExecutionContext ): Promise { const client = new Client(env.DB); await client.connect(); const result = await client.query({ text: "SELECT * from customers", }); const resp = Response.json(result.rows); ctx.waitUntil(client.end()); return resp; }, }; DBの接続処理を書いて

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

活用例(In my case) RemixはRemixがビルドを行い、ビルドされたものをデプロイする。 Cloudflare Workersの設定ファイル書いたオプションはwranglerという CloudflareのCLIツールがCloudflare Workersのデプロイ用にビルドするためのオプションである。なのでwranglerのビルド時と同じことをしてやればいい (Remixを例に言ってるが独自でビルドする場合も同じ)

Slide 50

Slide 50 text

活用例(In my case) ビルド(esbuild)時に以下の対応を実施しているので同等のことをやればいい workers-sdk/packages/wrangler/src/deployment-bundle/bundle.ts

Slide 51

Slide 51 text

活用例(In my case) ビルド(esbuild)時に以下の対応を実施しているので同等のことをやればいい workers-sdk/packages/wrangler/src/deployment-bundle/bundle.ts $ npm run build $ wrangler pages deploy

Slide 52

Slide 52 text

Cloudﬂare Workersのススメ ● 色々話したけど作ったものがすぐに動く環境は楽しい！！ ○ サービス開発は世に出して初めてバリューを生む ● オリジンがなくてもCloudﬂare Workersがサーバとして動作する。 ○ オリジンのスパイスとして処理することも可能なので設計の幅が増加

Slide 53

Slide 53 text

Thanks! ● name: chimame / rito ● job: Webエンジニア ● ﬁeld: Cloudﬂare, GCP, AWS, Ruby, Node.js, TypeScript, React, Next.js, Remix, Docker etc ● company: Goens株式会社( https://about.goen-s.com ) ● twitter: @chimame_rt ● GitHub: chimame