Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service

Cloudflare Meetup Niigata #1で講演しました。
https://cfm-cts.connpass.com/event/322901/

副読書です：

Cloudflareスタックをモリモリ使ってアバター画像生成サービスを作った話
https://zenn.dev/monicle/articles/cloudflare-stack-ai-service

Transcript

1. Cloudflareスタックで 月間1200万UUの経済メディアに アバター画像生成サービスを作る Cloudflare Meetup Niigata #1 2024.8.25 Yukiya Nakagawa
2. We are hiring! • ソフトウェアエンジニアを積極採用中です！ • カジュアル面談お待ちしてます →　　 @NkznにDMください • 求人情報はこちら Findy HRMOS monicle.co.jp
3. 自己紹介 • 中川幸哉 a.k.a Nkzn（なかざん） • ‘86世代🐰の37歳 • 新潟生まれ新潟育ち（大学だけ会津） • 8歳と5歳の父で妻の夫 • 2011〜2021年は農業IT🌾の人 • 2021年から株式会社モニクル ◦ 資産運用お手伝いサービス「マネイロ」のIT裏方 ◦ 経済メディア「LIMO」の編集部付きIT裏方 0:05
4. 仕事でWebサービスを作ったので 紹介します
5. キャラつく AI https://charatsukuai.limo.media/
7. • 画風 • 生年月 • 性別 • 興味のあること • お金の使い方 • メールアドレス 入力項目
8. 30〜50秒程度で届くことが多いです メールが届く
9. SNS等にシェアしてもらうページ 生成結果ページ
10. 今日の話
12. くらしとお金の経済メディア「 LIMO」 くらしとお金に関する身近な情報を提供 https://speakerdeck.com/moniclegroup/np-culture-deck
13. キャラつく AIはLIMOブランドのミニアプリ • 生成AIを一般の人にももっと身近に感じてほしい • あわよくば読者層を広げたい
14. まあそんなに複雑な機能もないし スモールスタートで シンプルに作ればええやろ 企画会議序盤の僕
15. 月間1200万UUのメディアが 積極的にリンクを貼ってくる……！？ 下手な構成にしたらパンクするでこれ。 アクセス耐性が高い形で 安価にシステムを組もうとすると……！？ 設計段階の僕
16. キャラつく AI powered by Cloudflare
17. キャラつく AIはCloudflare製品で固めました 元々会社のドメイン管理がCloudflare Cloudflare PagesでWebホスティングするとCDNとのシナジーが強力 せっかくの0→1プロジェクトなので、周りもCloudflare Developer Platform で固めたらトラフィック耐性が強くなるのでは……？
18. キャラつく AIはCloudflare製品で固めました その他のライブラリ等は ↓の記事を読んでね https://zenn.dev/monicle/articles/cloudflare-stack-ai-service サービス名 役割 Pages + Functions Webサイトホスティング、サーバーレス JavaScript Workers サーバーレスJavaScript Queues ジョブキュー Workers AI 生成AI D1 リレーショナルデータベース（ SQLite） R2 オブジェクトストレージ（Amazon S3互換ストレージ） LogPush ログ転送サービス Turnstile CAPTCHAみたいなやつ
19. そこそこの 規模で構成
20. • A. 多いよ？ ◦ Workers × 5 ◦ D1 × 2 Q. なんか多くない？
21. これじゃダメだったの？ これじゃダメだったの？ ダメだったんですよ いくつか理由を挙げていきます
22. DBアクセス 専用ワーカー AI専用 ワーカー 逐次実行＆リトライ用 キュー＆ワーカー
23. • Cloudflare D1に使うORMとしてPrismaを採用した • Prismaはファイルサイズが大きくなりがち • パフォーマンスのために1ワーカー1MBくらいを目安にしたい ◦ 参考：https://speakerdeck.com/mizchi/server-side-javascript-notamenobandoruzui-shi-hua • 他のワーカーと一緒にすると1MBを超えそう • 課金しているので10MBまでは許されるけど、念のため分けておこう DBアクセス用ワーカー
24. 分けても 使いづらくはなかった // データベース用ワーカー import { WorkerEntrypoint } from "cloudflare:workers" ; export default class extends WorkerEntrypoint { async fetch() { return new Response( "Hello from Worker" ); } async getItem(id) { // ORMを使ってデータベースからアイテムを取得 const item = await this.env.prisma.items.findUnique({ where: { id } }); return new Response(item); } } // 利用側のワーカー export default { async fetch(request, env) { const item = await env.DB.getItem( 1); return new Response(item); } } Workers RPCを使うと 別ワーカーを簡単に呼べる Data Access Objectのパ ターンに近い感覚で扱えて便 利だった RPC対応によりCloudflare Workers間の連携がすごいことになった https://zenn.dev/chimame/articles/f86db24897be6a 別ワーカーをメソッド呼び出し 感覚で扱える
25. • ワーカーが扱えるメモリは128MBまで ◦ https://developers.cloudflare.com/workers/platform/limit s/#memory • 画像生成はメモリを食いそうなので、他の処理と同居させるのはちょっと 怖い • 念のため分けておこう（2回目） AI用ワーカー
26. • HTTP呼び出しのワーカーは30秒制限あり • キュー経由で呼び出されたワーカーは15分まで動ける ◦ 参考： https://developers.cloudflare.com/workers/platform/limits/#worker-limits • AI画像生成が常に30秒以内で終わる確証もないので、念のためキューを 挟むことにした • キュー管理ライブラリのKiribiを挟むことで、キューの処理内容をD1に保 存しておき、キューが失敗してもリトライできるようにした ◦ https://kiribi.pages.dev/ キュー＆ワーカー（＆ DB）
27. なぜKiribiを使ったのか • キュー単独でも制限時間の問題は解決できる • どちらかというと逐次実行とリトライが魅力的だった • Workers AIの画像生成はベータ版で不安定な可能 性がある（実際たまにこけるので助かった） • メルマガ登録もビジネス上の重要な要素なのでこけ るわけにはいかない（が、外部APIを叩くので意図せ ずこける場合がある）
28. 2ヶ月やってみての感想
29. それなりの反響はあった、が …… • そこそこ使ってもらってる • しかしシステムを落とすほどの勢いはない • せっかく強めに組んだので落とす勢いのトラフィックが欲しい • 寂しい……
30. 費用面 • 安い安いとは聞いていたけど実際びっくりするくらい安い • まだWorkers AIのText-to-Imageがベータ版で無料なので、今後価格 が出てくるとまた感想が変わるかもしれないけど、たぶんそんなに高くな いはず
31. まとめ • 小さめのサービスをCloudflare Developer Platformだらけで作ってみ ました • 今回の話題以外にも、CDNキャッシュ活用でD1/R2のアクセス頻度を下 げたり、Turnstile（CAPTCHA的なやつ）でボット対策をしたり、費用削減 に役立つツールが盛りだくさんでした • 機会があったら使ってみてね！
32. We are hiring! • ソフトウェアエンジニアを積極採用中です！ • カジュアル面談お待ちしてます →　　 @NkznにDMください • 求人情報はこちら Findy HRMOS monicle.co.jp