Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Accelerating App Dev with Cloudflare Workers
Search
chimame
November 24, 2023
Programming
1
390
Accelerating App Dev with Cloudflare Workers
Cloudflare Workers Meetup by NOT A HOTEL
chimame
November 24, 2023
Tweet
Share
More Decks by chimame
See All by chimame
RemixでVersion skewに立ち向かう
chimame
1
860
私がエッジを使う理由
chimame
10
4k
GraphQL Server on Edge after that
chimame
1
1.3k
GraphQL Server on Edge
chimame
12
5.6k
エッジで輝くフロントエンド
chimame
11
6.5k
Cloudflare Workersと状態管理
chimame
4
1.6k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
570
Cloud Runマネージドに適したアプリケーションを考える
chimame
1
280
RDS Proxyを使ってAuroraと仲良くなる
chimame
0
1.1k
Other Decks in Programming
See All in Programming
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
330
testcontainers のススメ
sgash708
1
120
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
330
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
2
240
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
talk-with-local-llm-with-web-streams-api
kbaba1001
0
180
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
命名をリントする
chiroruxx
1
410
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
Featured
See All Featured
Building Your Own Lightsaber
phodgson
103
6.1k
What's in a price? How to price your products and services
michaelherold
243
12k
Rails Girls Zürich Keynote
gr2m
94
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
GraphQLとの向き合い方2022年版
quramy
44
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Adopting Sorbet at Scale
ufuk
73
9.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Being A Developer After 40
akosma
87
590k
Mobile First: as difficult as doing things right
swwweet
222
9k
Transcript
Acceleration App Dev with Cloudflare Workers Cloudflare Workers Meetup by
NOT A HOTEL 2023.11.24
目次 • “速さ”の定義 • Cloudflare Workersを使用する各所の”速さ” ◦ アプリケーションの作成速度 ◦ 環境の構築速度
◦ プログラムの実行速度 • 活用例 • まとめ
速さ
Webアプリケーションはどうやったら完成? • 必要な機能のコードを書けば終わり? • 品質試験をパスすれば終わり? • 実行場所(サーバ)を確保すれば終わり? • サーバでプログラムを実行できれば終わり?
“速さ”の定義 本資料における定義は アプリケーションを開発して本番環境で動作し ユーザーにレスポンスが届くまでのトータル時間 と定義する
アプリケーションができるまで 開発 テスト 設計 環境 構築 リリース🎉 配信
Cloudflare Workers
Cloudflare Workersにおける各所の速さ • アプリケーション(プログラム)の作成速度 • 環境構築の速度 • プログラム実行の速度
Cloudflare Workersにおける各所の速さ テスト 設計 リリース🎉 開発 環境 構築 配信
アプリケーションの作成速度 Cloudflare Workersで動作させることができる対応プログラム言語 • TypeScript • JavaScript • WebAssembly対応言語(Rust, C,
Golang etc)
アプリケーションの作成速度 Cloudflare Workersで動作させることができる対応プログラム言語 • TypeScript • JavaScript • WebAssembly対応言語(Rust, C,
Golang etc) WebAssemblyにできるなら言語は問わない。
アプリケーションの作成速度 Cloudflare Workersで動作させることができる対応プログラム言語 • TypeScript • JavaScript • WebAssembly対応言語(Rust, C,
Golang etc) JavaScriptに(トランスパイル)出来るなら言語は問わない。 npm packageという膨大なライブラリやフレームワークの恩恵を受ける
アプリケーションの作成速度 Cloudflare Workersに対応しているフレームワーク(他にもあり) • Hono • GraphQL Yoga • Next.js(一部)
• Remix • Qwick • Astro
アプリケーションの作成速度 Cloudflare Workersに対応しているフレームワーク(他にもあり) • Hono • GraphQL Yoga • Next.js(一部)
• Remix • Qwick • Astro Cloudflare Workers単体で動作しWebサーバ として使用することができるフレームワーク
アプリケーションの作成速度 Cloudflare Workersに対応しているフレームワーク(他にもあり) • Hono • GraphQL Yoga • Next.js(一部)
• Remix • Qwick • Astro Cloudflare Workers単体では動作しない (ものがある)が、Cloudflare Workers とCloudflare Pagesを組み合わせSSRな どが可能
アプリケーションの作成速度 Cloudflare Workersに対応しているフレームワーク(他にもあり) • Hono • GraphQL Yoga • Next.js(一部)
• Remix • Qwick • Astro これらのモダンなフレームワークを使用すること が出来るでCloudflare Workersとそれ以外の環境 とで開発効率の差異は無い (むしろモダンな開発環境になる) 宗教上の理由でTypeScriptやJavaScriptが扱えない方はごめんなさい…(WASMで頑張って)
環境の構築速度 Webアプリケーションに必要なものは?
環境の構築速度 Webアプリケーションに必要なものは? • プログラムコード • 実行環境 • データ格納先
環境の構築速度 Webアプリケーションに必要なものは? • プログラムコード • 実行環境 • データ格納先 これは前項までに説明したので既に用意 できるものとしてここでの話ではない
環境の構築速度 Webアプリケーションに必要なものは? • プログラムコード • 実行環境 • データ格納先 ここで話したいのはココ 要は実行サーバやアプリケーションの状態
を格納するデータの保存先などのインフラ と言われる部分
環境の構築速度 Cloudflare Workersの実行環境ってどうやって用意するの?
環境の構築速度 Cloudflare Workersの実行環境ってどうやって用意するの? $ wrangler (pages) deploy これだけ(設定ファイルにアプリ名などは記載する) ビルド(バンドル)したファイルをアップロードして実行環境 をサクッと用意できる。
みなさんはどうやって環境を用意してますか? 環境の構築速度 EKS? ECS? Lambda? EC2? G KS? Cloud Run?
App Engine? Cloud Function? AKS? Container App? Azure Virtual M achine?
みなさんはどうやって環境を用意してますか? 環境の構築速度 EKS? ECS? Lambda? EC2? G KS? Cloud Run?
App Engine? Cloud Function? AKS? Container App? Azure Virtual M achine? その環境って初期構築もそうです が、そもそもデプロイってどれくら いかかりますか? ち な み に …
環境の構築速度 Cloudflare Workersならこれでデプロイまでします。 $ wrangler (pages) deploy ビルド時間を含めても 1分未満。 ビルド時間を除けば
10~15秒程度。
環境の構築速度 • コンテナ以前はサーバをセットアッ プ ◦ その後にプログラムを入れ替えて、Web サーバのみを再起動 • コンテナはサーバの抽象化レベルUP ◦
コンテナにプログラムを内包してコンテナ を切り替える • Cloudflare Workersのランタイムは 固定(既にセットアップ済) ◦ プログラムを入れ替えて実行
プログラムの実行速度 Cloudflare Workersはサーバレスなのでプログラム実行の速度という観点で は以下の2つが重要 • プログラム本体の実行速度 • サーバレスの起動速度
プログラムの実行速度 プログラムの実行速度自体がスペックなどで 他と比べて遅かったりしない?
プログラムの実行速度 “ServerlessDays Tokyo 2023 - 秋のServerless運動会(亀田様)” の資料より
プログラムの実行速度 “ServerlessDays Tokyo 2023 - 秋のServerless運動会(亀田様)” の資料より Lambdaはメモリが増えるとCPUが変わるので 一概に言えないが悪くない
プログラムの実行速度 “ServerlessDays Tokyo 2023 - 秋のServerless運動会(亀田様)” の資料より Lambda@Edgeも頑張ってる。 (が、こいつは制約が強すぎて土俵が…)
プログラムの実行速度 実行速度はそこまで悪くないっていうのがわかったが、 コールドスタートは?
プログラムの実行速度 コールドスタートこそCloudflare Workersの最大の速度メリット 同一リクエストの差を見る限り 200ms 前後? (コールドスタートと感じることが出来ないので正確な数値が計測できない) V8 isolateをうまく使って環境を構築しているため Node.jsサーバで読み込みを遅延読み込みをしても500ms~800msのコールドスタート
はかかる(遅延読み込みを加味しないと2秒とかかかるし、遅延読み込みした分はプログラム実行時間に乗る)
活用例(In my case) • GraphQL Server • Webアプリケーション • (Node.jsサーバ)バッチ処理
今日はここ GraphQLは12月のCloudflare Workers Talk #2で (and moreな内容だけど)
活用例(In my case) ※管理画面 Cloudflare Workers Durable Objects Authentication Cloud
Messaging Crashlytics etc 認証 画像データ (R2) Socket通信 GraphQL PUSH Node.js処理サーバ GraphQL Server その他サービス 現在 この辺の話(他サービスでは管理画面に留まらない)
活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ?
活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ? • Hono • Remix
活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ? • Hono • Remix ルーティングかつAPIとしてだけでいい ならHonoを選択
レンダリングもできるが…
活用例(In my case) Webアプリケーションのフレームワークは何を選ぶ? • Hono • Remix レンダリングが必要ならば初手にRemix AstroやQwickもあるがあくまでWebアプリ
ケーションとして選択するならばということ 今回はWebアプリケーションなのでこっちを 掘り下げる
活用例(In my case) RemixはCloudflare上の2つのランタイムで動作をサポートしています • Cloudflare Workers • Cloudflare Pages
+ Cloudflare Workers
活用例(In my case) RemixはCloudflare上の2つのランタイムで動作をサポートしています • Cloudflare Workers • Cloudflare Pages
+ Cloudflare Workers ほぼCloudflare Workers上だけで完結します。なので Cloudflare Workersの機能がフルで使用できるという メリットがあります。 ただし、静的ファイルの配信がCloudflare KVから配 信することになります。
活用例(In my case) RemixはCloudflare上の2つのランタイムで動作をサポートしています • Cloudflare Workers • Cloudflare Pages
+ Cloudflare Workers Cloudflare Pagesは静的サイトやSPAで使用できる。 Cloudflare Workersとも組み合わすことでサーバサイ ドの処理が行える。つまりSSRが出来る。 ただし、Cloudflare Workersの全機能をサポートして いるわけではない。 初手はこちらを選択でよい
活用例(In my case) 残念ながらWebアプリケーションはプログラムだけあれば 成立することは少ない 大体の場合にデータベースなどが必要となる
2023年5月にCloudflare WorkersのTCP接続がサポートされた🎉 活用例(In my case)
ということで 活用例(In my case) node_compat = true 設定ファイル(wrangler.toml)に書いて
ということで 活用例(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<Response> { 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の接続処理を書いて
ということで 活用例(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<Response> { 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の接続処理を書いて デプロイすると $ wrangler pages deploy
ということで 活用例(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<Response> { 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の接続処理を書いて デプロイすると $ wrangler pages deploy 動かない😇
活用例(In my case) RemixはRemixがビルドを行い、ビルドされたものをデプロイする。 Cloudflare Workersの設定ファイル書いたオプションはwranglerという CloudflareのCLIツールがCloudflare Workersのデプロイ用にビルドするた めのオプションである。 なのでwranglerのビルド時と同じことをしてやればいい
(Remixを例に言ってるが独自でビルドする場合も同じ)
活用例(In my case) ビルド(esbuild)時に以下の対応を実施しているので同等のことをやればいい workers-sdk/packages/wrangler/src/deployment-bundle/bundle.ts
活用例(In my case) ビルド(esbuild)時に以下の対応を実施しているので同等のことをやればいい workers-sdk/packages/wrangler/src/deployment-bundle/bundle.ts $ npm run build $
wrangler pages deploy
Cloudflare Workersのススメ • 色々話したけど作ったものがすぐに動く環 境は楽しい!! ◦ サービス開発は世に出して初めてバリューを生む • オリジンがなくてもCloudflare Workersが
サーバとして動作する。 ◦ オリジンのスパイスとして処理することも可能な ので設計の幅が増加
Thanks! • name: chimame / rito • job: Webエンジニア •
field: Cloudflare, GCP, AWS, Ruby, Node.js, TypeScript, React, Next.js, Remix, Docker etc • company: Goens株式会社( https://about.goen-s.com ) • twitter: @chimame_rt • GitHub: chimame