WorkersでCMSを作ってみないか / Wanna build a CMS with Workers?

Cloudflare Workers Tech Talks in Hokkaido #1 での発表資料

Transcript

1. WorkersでCMSを作ってみないか ɴᴇᴋᴏʏᴀsᴀɴ
2. Who are you? ɴᴇᴋᴏʏᴀsᴀɴ Software Engineer @MIERUNE Inc. Co-founder & Software Engineer @ ReMotive GitHub: @NEKOYASAN Web: nekoyasan.me ←最近更新忘れて、メッチャ焦りました
3. What is ReMotive? エンタメ系の受託やら、Web制作やら、コンサルやらをして るちっさい2人会社 Workers使っていろいろやってたり、WebRTC x Live2D とか、Streaming Platformを作ってたり
4. おことわり まだ全然開発途中・サービスインの目処もまだしばらく先です 動くものを見せたかったんですが壊したので見せれません...ごめ んなさい.... 若干初心者向け（かも）
5. Motivation
8. Motivation Newtがサービス終了しちゃう microCMSはそれはそれで若干のつらみがある 金額的なところ 課金対象的なところ 仕様上のところ(画像・iframeまわりとか) Strapiとかを立てるのもそれはそれで辛みが... https://github.com/cloudflare/workerd/pull/4591 もしかしたらなんとかなったのかも...?
9. Motivation Newtがサービス終了しちゃう microCMSはそれはそれで若干のつらみがある 金額的なところ 課金対象的なところ 仕様上のところ(画像・iframeまわりとか) Strapiとかを立てるのもそれはそれで辛みが... https://github.com/cloudflare/workerd/pull/4591 もしかしたらなんとかなったのかも...? やっぱ自分で作るしかなくない？
10. Features
11. 必ず欲しい セルフホストできる でもサーバーは持ちたくない... 安価に使える リッチエディタがあるか、Markdownで書ける モデルが自分で設定できる APIでアクセスできたり、画像上げれたり ログインとかメンバー管理とか
12. あったらいいな 画像最適化 予約投稿 Webhook 補助的なAI アクセス数解析
15. Cloudflare Developer platform AI Gateway Analytics Engine Assets Browser Rendering D1 Durable Objects Hyperdrive Images KV Queues R2 Service Bindings Vectorize Workers for Platforms Workers AI Cache API
16. Cloudflare Developer platform AI Gateway Analytics Engine Assets Browser Rendering D1 Durable Objects Hyperdrive Images KV Queues R2 Service Bindings Vectorize Workers for Platforms Workers AI Workflows こんだけあれば Workersでなんとかなるんじゃね
17. 何が嬉しい？ インフラを深く考える必要がない それなりに早い 色々周辺ツールが多い 帯域がタダ！！！！！！ Cache操作系がやりやすい
18. Cloudflare Developer platform AI Gateway Analytics Engine Assets Browser Rendering D1 Durable Objects Hyperdrive Images KV Queues R2 Service Bindings Vectorize Workers for Platforms Workers AI Cache API
19. Cloudflare Developer platform AI Gateway Analytics Engine Assets Browser Rendering D1 Durable Objects Hyperdrive Images KV Queues R2 Service Bindings Vectorize Workers for Platforms Workers AI Cache API
20. 構成図
21. Images Image R2 Master Data Cache D1 Worker Cache Durable Object KV
22. Images Image R2 Master Data Cache D1 Worker Cache Durable Object KV
23. R2 S3互換のオブジェクトストレージ 今回は画像・動画の保存用 Image 画像の変換とか軽量化ができるやつ 今回は画像最適化用
24. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 app.get("/*", async (c) => { const object = await c.env.TEST_BUCKET.get(key); if (object === null || !("body" in object)) { return c.text("Object Not Found", 404); } const format = c.req.query("format") || "image/avif"; const width = c.req.query("w") ? Number(c.req.query("w")) : undefined; const response = ( await c.env.IMAGES.input(object.body) .transform({ width: width, }) .output({ format: format as any }) ).response(); return response; })
25. めっちゃ簡単に画像最適化ができる
26. Images Image R2 Master Data Cache D1 Worker Cache Durable Object KV
27. D1 サーバーレスのSQLデータベース SQLiteベースなので同じクエリが使える KV グローバルに一貫性のあるKey-Valueストア 高速アクセス・低レイテンシが魅力
28. なぜ使い分けるか？ D1 は filter / sortに強いが若干遅い (KV比) KV は 早いが filter / sort に弱い なので 初回取得時はD1から取得し、条件等と共にTTLをつけてKV に保管する 2回目以降はKVから取得する 書き換えが発生した場合はKV⁨の⁩ 中身をclearする 管理画面からはD1をみれるAPIを使う
29. Images Image R2 Master Data Cache D1 Worker Cache Durable Object KV
30. Durable Object 強整合性のあるデータストア WebSocketのコネクション持てたりするおもろいやつ SQLite in Durable Objectとかもある D1 も Durable Object 上で動いてる(らしい) Alermっていうおもろい産物がある
31. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import { DurableObject } from "cloudflare:workers"; export class AlarmExample extends DurableObject { constructor(ctx, env) { this.ctx = ctx; this.storage = ctx.storage; } async fetch(request) { const { seconds } = JSON.parse(request.body) let currentAlarm = await this.storage.getAlarm(); if (currentAlarm == null) { this.storage.setAlarm(Date.now() + 10 * SECONDS); } } async alarm() { // Alerm } }
32. めっちゃ簡単に予約投稿ができる
33. つらみ
34. つらみ D1にTransactionが存在しない KVのデータ変更タイミングでのリセット時にレスポンスが遅 くなる (D1に行くため) マルチテナントどうする問題
35. つらみ D1にTransactionが存在しない KVのデータ変更タイミングでのリセット時にレスポンスが遅 くなる (D1に行くため) マルチテナントどうする問題 → 何か良い案お持ちの方いたら懇親会とかで...
36. おまけ
37. Workers Analytics Engine テレメトリデータをStore / Getすることができるツール Cloudflareの内部で使われてる分析機能とおんなじ 1行につきindexとしての1つの値と、blob(string)が20個、 doubleが20個保管できるテーブルが用意されているイメージ Usage-based Billingや不正利用検知に使える
38. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 export default { async fetch(request, env, ctx) { env.ANALYTICS.writeDataPoint({ 'blobs': [ request.headers["CF-Connection-IP"] ], 'doubles': [ 1, 2, 4 ], 'indexes': [ userId, ] }); return new Response("Stored!"); }, };
39. まとめ 色んなサービスあります CMSつくってます！！！ 画像最適化めっちゃ簡単なんでぜひ