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

Accelerating App Dev with Cloudflare Workers

chimame
November 24, 2023

Accelerating App Dev with Cloudflare Workers

Cloudflare Workers Meetup by NOT A HOTEL

chimame

November 24, 2023
Tweet

More Decks by chimame

Other Decks in Programming

Transcript

  1. Acceleration App Dev with
    Cloudflare Workers
    Cloudflare Workers Meetup by NOT A HOTEL
    2023.11.24

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Cloudflare Workers

    View full-size slide

  7. Cloudflare Workersにおける各所の速さ
    ● アプリケーション(プログラム)の作成速度
    ● 環境構築の速度
    ● プログラム実行の速度

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 環境の構築速度
    Cloudflare Workersの実行環境ってどうやって用意するの?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 環境の構築速度
    ● コンテナ以前はサーバをセットアッ

    ○ その後にプログラムを入れ替えて、Web
    サーバのみを再起動
    ● コンテナはサーバの抽象化レベルUP
    ○ コンテナにプログラムを内包してコンテナ
    を切り替える
    ● Cloudflare Workersのランタイムは
    固定(既にセットアップ済)
    ○ プログラムを入れ替えて実行

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. ということで
    活用例(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の接続処理を書いて

    View full-size slide

  46. ということで
    活用例(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の接続処理を書いて
    デプロイすると
    $ wrangler pages deploy

    View full-size slide

  47. ということで
    活用例(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の接続処理を書いて
    デプロイすると
    $ wrangler pages deploy
    動かない😇

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. 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

    View full-size slide