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
Cloudflare Workersと状態管理
Search
chimame
January 24, 2023
Programming
4
1.8k
Cloudflare Workersと状態管理
Serverless Frontend Meetup #1 「Cloudflare Workers」
chimame
January 24, 2023
Tweet
Share
More Decks by chimame
See All by chimame
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
68
Boost Your Web Performance with Hyperdrive
chimame
1
300
RemixでVersion skewに立ち向かう
chimame
2
1.1k
私がエッジを使う理由
chimame
10
4k
GraphQL Server on Edge after that
chimame
1
1.5k
Accelerating App Dev with Cloudflare Workers
chimame
1
450
GraphQL Server on Edge
chimame
12
6k
エッジで輝くフロントエンド
chimame
11
6.7k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
640
Other Decks in Programming
See All in Programming
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
GPUを計算資源として使おう!
primenumber
1
250
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Adaptive Systems
keathley
43
2.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
142
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
KATA
mclloyd
30
14k
Transcript
Cloudflare Workesと状態管理 Serverless Frontend Meetup #1 2023.01.24
目次 • 自己紹介 • Cloudflare Workersの特徴 • 状態管理 • アーキテクチャ(使用例)
• コードサンプル • まとめ
自己紹介 • 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
サービス 50歳以上限定のマッチングアプリ Goens「ゴエンズ」 単身限定で安心。同世代だから話が合う。シンプルかつ 便利。Goens(ゴエンズ)は、心を開き合えるパートナー をじっくり見つけられる、シニア向け恋活・婚活マッチング アプリです。
Cloudflare Workersの特徴 • エッジサーバで実行される ◦ サーバレス実行環境 • JavaScript, Rust, Cなどの幾つかの言語で作成することが可能
• リクエストとレスポンスのハンドリングに特化して処理を作成することが可能 ◦ 例えばロードバランサー的なことも出来る ブラウザからのリクエストをサーバ(オリジン)で処理する前に、処理をする
アプリケーションはプログラムさえ動く環境があ れば大丈夫?
大抵の場合はそうではない
アプリケーションに必要なもの • システムリソース(CPU、メモリなど) • プログラム • データ • インターフェース(httpやhtmlなど) データとはアプリケーションやユーザがどういう状態であるかというものを指す。雑に書
けばデータベースとほぼ同義(データベースだけでないが)。 この中で、唯一Cloudflare Workersが提供していないのがデータ。これはCloudflare Workersではなく、サーバレスがスケーラビリティであるため状態(=データ)を保持でき ないのが理由。
状態管理 Cloudflare Workersで行う状態管理の手法 • Cache API • Cloudflare KV •
Durable Objects • D1 ※Alpha版 • R2
状態管理 Cloudflare Workersで行う状態管理の手法 • Cache API • Cloudflare KV •
Durable Objects • D1 ※Alpha版 • R2 結果整合性 強整合性
状態管理 Cloudflare Workersで行う状態管理の手法 • Cache API • Cloudflare KV •
Durable Objects • D1 ※Alpha版 • R2 レスポンスをキャッシュする。 オリジンからもらったレスポンスを一定時間などの条件によっ てキャッシュしたものをクライアントに返すことで、レスポンス を素早く返す。 アプリケーションの”状態”を一定同じものを返すという意味で 含めている。
状態管理 Cloudflare Workersで行う状態管理の手法 • Cache API • Cloudflare KV •
Durable Objects • D1 ※Alpha版 • R2 データをKey, Value形式で保存するストレージ。 保存するデータのKeyを柔軟に設定できること、保存する ValueもJSONを指定できたりと、Cache APIより柔軟性と強整 合性が高い。
状態管理 Cloudflare Workersで行う状態管理の手法 • Cache API • Cloudflare KV •
Durable Objects • D1 ※Alpha版 • R2 ストレージというよりメモリを永続化する。 メモリ上に情報を保持し、それをキャッシュとして返す場合、プ ロセス間ではそのメモリ情報は共有されない。なのでキャッ シュとしての機構としては貧弱となるが、この Durable Objectsを使用することでメモリ上に保存した情報を共有する と同時に、永続化する。
状態管理 Cloudflare Workersで行う状態管理の手法 • Cache API • Cloudflare KV •
Durable Objects • D1 ※Alpha版 • R2 昨年Alpha版が公開されたエッジ上で動作する SQLite。 SQLiteなので通常のデータベース同様に、 Cloudflare Workers上のプログラムから SQLを投げることでデータの取 得や保存、更新が行うことが可能。 また、エッジに展開された SQLiteなのでデータが共有される。 Alpha版であるがゆえにトランザクションなどの処理に課題を 残すが大きく期待されているサービスの 1つ
状態管理 Cloudflare Workersで行う状態管理の手法 • Cache API • Cloudflare KV •
Durable Objects • D1 ※Alpha版 • R2 完全な外部ストレージであり、他の 4つのサービスとは少し異 なる。 ストレージのため、データの種類はストレージに保存する形式 であればなんでも可能。例えば画像や JavaScriptやHTMLな どの静的ファイル、もちろん動画ファイルなども可能。 Beta版時はCloudflare Workers経由でしか配信が行えな かったが、今ではドメインを紐づけて直接配信することが可 能。
※管理画面 サービスアーキテクチャ Cloudflare Workers Durable Objects Authentication Cloud Messaging Crashlytics
etc 認証 画像データ Socket通信 ユーザデータ (GraphQL) PUSH通知
※管理画面 Authentication Cloud Messaging Crashlytics etc 認証 画像データ ユーザデータ (GraphQL)
Cloudflare Workers Durable Objects サービスアーキテクチャ Socket通信 複数の端末が同時にWeb Socketにて 接続を行うため、接続情報をメモリ (=Durable Objects)上に保持する PUSH通知
※管理画面 Authentication Cloud Messaging Crashlytics etc 認証 画像データ ユーザデータ (GraphQL)
Cloudflare Workers Durable Objects サービスアーキテクチャ Socket通信 メモリ(=Durable Objects)上に保持す る接続情報から該当端末を特定して、 サーバPushを行う。 PUSH通知
コード(全体感) export class Socket { sessions: Session = {} app:
Hono<Bindings> = new Hono<Bindings>() // サーバから指定の繋ぎ先にPublishするエンドポイント this.app.post('/publish/:id', async (ctx) => {}) // クライアントからSubscribeするエンドポイント this.app.get('/subscribe/:id', async (ctx) => {}) // Cloudflare Workerがリクエストを処理するためのメソッド async fetch(request: Request) { return await this.app.fetch(request) } } https://github.com/cloudflare/workers-chat-demo
コード(Subscribe) sessions: Session = {} // 接続しているクライアント情報を保持する // クライアントからSubscribeするエンドポイント this.app.get('/subscribe/:id',
async (ctx) => { // <ここに何らかの認証を入れた方がよい(例えば JWT認証)> const id = ctx.req.param('id') const [client, server] = Object.values(new WebSocketPair()) server.accept() this.sessions[id] = server return new Response('', { status: 101, webSocket: client, }) })
コード(Publish) sessions: Session = {} // サーバから指定の繋ぎ先にPublishするエンドポイント this.app.post('/publish/:id', async (ctx)
=> { // <ここに何らかの認証を入れた方がよい> const id = ctx.req.param('id') const payload = await ctx.req.text() const session = this.sessions[id] if (session) { session.send( typeof payload === 'string' ? payload : JSON.stringify(payload) ) } })
コード(使用例) // クライアント const socket = new WebSocket( ‘https://<domain>/subscribe/<chatId>’ )
socket.onmessage = (e) => { console.log('onMessage!') // JSON.parse(e.data) で何らかの処理 } // サーバ import axios from 'axios' const body = { test: ‘hoge’ } await axios.post(‘https://<domain>/publish/<chatId>’, body)
まとめ • Cloudflare Workersで行う状態管理の手法はいくつかある • プログラム処理や特性によって最適なものを選ぶ • Durable Objectsについてはこちらに目を通すと理解が深まる ◦
https://developers.cloudflare.com/workers/learning/using-durable-objects/ ◦ https://github.com/cloudflare/workers-chat-demo
Thanks ご清聴ありがとうございました。 https://about.goen-s.com/