Cloudflareスタックで 月間1200万UUの経済メディアに アバター画像生成サービスを作る Cloudflare Meetup Niigata #1 2024.8.25 Yukiya Nakagawa

We are hiring! ● ソフトウェアエンジニアを積極採用中です！ ● カジュアル面談お待ちしてます →　　 @NkznにDMください ● 求人情報はこちら Findy HRMOS monicle.co.jp

自己紹介 ● 中川幸哉 a.k.a Nkzn（なかざん） ● ‘86世代🐰の37歳 ● 新潟生まれ新潟育ち（大学だけ会津） ● 8歳と5歳の父で妻の夫 ● 2011〜2021年は農業IT🌾の人 ● 2021年から株式会社モニクル ○ 資産運用お手伝いサービス「マネイロ」のIT裏方 ○ 経済メディア「LIMO」の編集部付きIT裏方 0:05

仕事でWebサービスを作ったので 紹介します

キャラつく AI https://charatsukuai.limo.media/

No content

● 画風 ● 生年月 ● 性別 ● 興味のあること ● お金の使い方 ● メールアドレス 入力項目

30〜50秒程度で届くことが多いです メールが届く

SNS等にシェアしてもらうページ 生成結果ページ

今日の話

No content

くらしとお金の経済メディア「 LIMO」 くらしとお金に関する身近な情報を提供 https://speakerdeck.com/moniclegroup/np-culture-deck

キャラつく AIはLIMOブランドのミニアプリ ● 生成AIを一般の人にももっと身近に感じてほしい ● あわよくば読者層を広げたい

まあそんなに複雑な機能もないし スモールスタートで シンプルに作ればええやろ 企画会議序盤の僕

月間1200万UUのメディアが 積極的にリンクを貼ってくる……！？ 下手な構成にしたらパンクするでこれ。 アクセス耐性が高い形で 安価にシステムを組もうとすると……！？ 設計段階の僕

キャラつく AI powered by Cloudflare

キャラつく AIはCloudflare製品で固めました 元々会社のドメイン管理がCloudflare Cloudflare PagesでWebホスティングするとCDNとのシナジーが強力 せっかくの0→1プロジェクトなので、周りもCloudflare Developer Platform で固めたらトラフィック耐性が強くなるのでは……？

キャラつく 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みたいなやつ

そこそこの 規模で構成

● A. 多いよ？ ○ Workers × 5 ○ D1 × 2 Q. なんか多くない？

これじゃダメだったの？ これじゃダメだったの？ ダメだったんですよ いくつか理由を挙げていきます

DBアクセス 専用ワーカー AI専用 ワーカー 逐次実行＆リトライ用 キュー＆ワーカー

● Cloudflare D1に使うORMとしてPrismaを採用した ● Prismaはファイルサイズが大きくなりがち ● パフォーマンスのために1ワーカー1MBくらいを目安にしたい ○ 参考：https://speakerdeck.com/mizchi/server-side-javascript-notamenobandoruzui-shi-hua ● 他のワーカーと一緒にすると1MBを超えそう ● 課金しているので10MBまでは許されるけど、念のため分けておこう DBアクセス用ワーカー

分けても 使いづらくはなかった // データベース用ワーカー 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 別ワーカーをメソッド呼び出し 感覚で扱える

● ワーカーが扱えるメモリは128MBまで ○ https://developers.cloudflare.com/workers/platform/limit s/#memory ● 画像生成はメモリを食いそうなので、他の処理と同居させるのはちょっと 怖い ● 念のため分けておこう（2回目） AI用ワーカー

● HTTP呼び出しのワーカーは30秒制限あり ● キュー経由で呼び出されたワーカーは15分まで動ける ○ 参考： https://developers.cloudflare.com/workers/platform/limits/#worker-limits ● AI画像生成が常に30秒以内で終わる確証もないので、念のためキューを 挟むことにした ● キュー管理ライブラリのKiribiを挟むことで、キューの処理内容をD1に保 存しておき、キューが失敗してもリトライできるようにした ○ https://kiribi.pages.dev/ キュー＆ワーカー（＆ DB）

なぜKiribiを使ったのか ● キュー単独でも制限時間の問題は解決できる ● どちらかというと逐次実行とリトライが魅力的だった ● Workers AIの画像生成はベータ版で不安定な可能 性がある（実際たまにこけるので助かった） ● メルマガ登録もビジネス上の重要な要素なのでこけ るわけにはいかない（が、外部APIを叩くので意図せ ずこける場合がある）

2ヶ月やってみての感想

それなりの反響はあった、が …… ● そこそこ使ってもらってる ● しかしシステムを落とすほどの勢いはない ● せっかく強めに組んだので落とす勢いのトラフィックが欲しい ● 寂しい……

費用面 ● 安い安いとは聞いていたけど実際びっくりするくらい安い ● まだWorkers AIのText-to-Imageがベータ版で無料なので、今後価格 が出てくるとまた感想が変わるかもしれないけど、たぶんそんなに高くな いはず

まとめ ● 小さめのサービスをCloudflare Developer Platformだらけで作ってみ ました ● 今回の話題以外にも、CDNキャッシュ活用でD1/R2のアクセス頻度を下 げたり、Turnstile（CAPTCHA的なやつ）でボット対策をしたり、費用削減 に役立つツールが盛りだくさんでした ● 機会があったら使ってみてね！

We are hiring! ● ソフトウェアエンジニアを積極採用中です！ ● カジュアル面談お待ちしてます →　　 @NkznにDMください ● 求人情報はこちら Findy HRMOS monicle.co.jp