💴

個人開発のAI画像投稿サイト「Aivy」をリリースしたら僕のお小遣いが吹っ飛びそうになってる話

2022/11/18に公開
10

CloudflareImagesについての記事です。

👇まずはこちらを御覧ください
https://zenn.dev/ddpn08/articles/aivy-run-release

やばい

前回の記事で...

投稿の情報やプロフィール、いいね、フォロー、タグ...などを保存してます。500MBは多分超えないでしょう...
超えたら僕の月3000円のお小遣いが飛び散ります。

みたいなこと言ってましたが、割とガチで不味くなってきました。

Supabaseのデータベースの方は一切問題なく余裕ありありなのですが
画像を保存しているCloudflare Images のほうがかなりまずい状況になってしまいました。

驚いてる僕👇
https://twitter.com/ddPn08/status/1593159735624478721


リリースしてから5日ほどたちまして、画像配信数は40万枚を超えました...
おそらくいろんなネットニュースに取り上げてもらえたり、Zennでも100いいねをいただけたりして、たくさんの方がいらしてくださったからだと思われます。

完全に予算の計算をミスりましたね...
まあここまでたくさんの人が訪れるサイトになるとは思っていなかったので仕方ないことではあるかもです。

今回はどうしてこんなことになってしまったのか、ざっくり説明していきます。

Cloudflare Images の料金形態

保存が10万枚につき$5、配信が10万枚につき$1です。
容量ではなく、枚数で計算されます。

多い時で1日10万配信ほどなので1日平均8万配信だとして月$24?
保存料金と合わせると$30くらいですかね。わおわお

詳しい内容はこちら

なんでこれを選んだのか

前回の記事でも紹介したのですが

  • DirectCreatorUploadが強い
  • Variantsが強い
  • 安い(と思っていた)

DirectCreatorUploadはまじで必須です。Vercelだと4MB制限があるのでサーバーを介してのアップロードは現実的ではありません。
VariantsもOGP画像の加工が楽になったり、利用者に送信されるデータのサイズを制限できるのでかなり強いです。

どうしてこうなった

上にも書きましたが、リリースしてからまず、ZennとNoteにそれぞれ記事を書いて投稿しました。そうしたらかなりの反響をいただきまして、たくさんの方に利用していただけました。(バッジ送ってくださった方、本当にありがとうございます...!)
さらにその後、いろいろなネットニュースにも取り上げてもらえて、なんか知らんうちにすごい規模になっていました...
めちゃくちゃうれしかったです。ほんとありがとうございます。

まあそんなこんなでユーザー数が爆増しまして、画像配信数も爆増した、という経緯です。
実際とってもありがたいですし今後もどんどん利用していただきたいです!!

対策

1ページに表示される画像の枚数を減らす

このサービスではユーザーアイコンと画像のサムネイルが1ページにかなりたくさん表示されます。

まあまあ多い
ここを減らせば多少良くなるかな...?ただどれも重要な情報なのでなかなかそうもいかない...
というかこの時点で割と向いていなかったのかも...;

キャッシュ

まずはキャッシュ設定をしました。けどなんかうまくいきませんでした。
投稿の画像は基本的に変更できないので、Cache Rulesで1か月のキャッシュをさせる設定にしたのですが、うまく動作せず...

こんな設定

どなたかわかる方いらしたら教えていただけると助かります...

稼ぐ

CloudflareImagesは普通に使う価値がありますし今更実装を変えるわけにもいきません。
ということで自分で稼ぎましょう...
とりあえず広告をどこかに張ろうかなと思います。けど自分は広告あんま好きじゃないので、ほんとにしれっとした部分にしか置かないでおきたいんですよね。
いずれギフト機能を実装するといいましたがちょっと先になるような気がしてます。(特に法律面はしっかりしないといけないので)

なので、ko-fiかなにかで利用者の方に寄付を募ろうかと思っております...
最近はほんとに人に頼ってばっかりでなんか申し訳ないのですが、もし応援したいと思ってくださる方がいたら、ということで...

最後に

今後CloudflareImagesを利用される方はお気を付けください。たくさん配信されるサービスにはあまり向いてないかもです。
けど機能はめちゃめちゃ強いのでおすすめではあります!!向いているかどうかの判断だけはお間違いなく...!

Aivy

ここまでやばいやばい言ってますが、一応まだ運営できるのでぜひ皆さん利用して下さい!
👇もしよければ是非!
https://aivy.run

※2022/11/20 追記

この記事にバッジをつけてくださった方、本当にありがとうございます...!
全て「Aivy」の運営資金に充てさせていただきます。

画像は解決...?

コメントでアドバイスいただいたのですが
CloudflareImagesの方はWorkersとキャッシュを利用すればうまく動きそうでした。
実際まだデプロイできていないのでわかりませんがおそらくうまくいきそうです...
本当に感謝です...

今度はSupabase

頻繁にSupabaseのインスタンスが落ちるようになりました、問い合わせてみたところ....

お客様のインスタンスを確認したところ、RAM 使用量 (97%) でリソースが不足しているようです。
ログ エクスプローラーで 500 リクエスト コードまたはエラー テンプレートを調べて、非効率でコンピューティング リソースを使い果たしているクエリを特定することをお勧めします。
https://app.supabase.com/project/grbeftzaqythlvdqfavo/logs/explorer/templates
これを引き起こしているクエリを見つけたら、次のガイドを使用してクエリのパフォーマンスを確認することをお勧めします。
https://supabase.com/docs/guides/platform/performance#examining-query-performance
クエリを最適化しても問題が解決しない場合は、課金設定からデータベース アドオンをアップグレードすることをお勧めします。
https://app.supabase.com/project/grbeftzaqythlvdqfavo/settings/billing/subscription

とのころ...
データベースのコードを改善するか、Proにアップグレードするか...
おそらくアクセス数が多くてメモリ不足に陥っている...?自分のコードもあまり良くないのかもです;

いずれオープンソース化するのでpostgresqlに詳しい方がいたらお助け願いたいです...

Discussion

ごろおごろお

cdnで画像をキャッシュするといいんじゃないかな?
クラウドフレアで独自ドメイン取っているなら、画像キャッシュ出来ると思うので、多分ググれば行けるはす

通信経路で画像をキャッシュするから配布枚数にカウントされない気がするのですがどうでしょう?

間違ってたらすみません〜

daidai

DB については、性能上げる前に何らかの問題を探るとして、調査方法は supabase の回答通りですかね。

色々可能性はあって、ありがちなのがインデックス使ってないとかだけど、何にせよまず最初は重いクエリを特定することから。
これはソースコード読んで推測するより、実際のアクセスログを見た方が簡単だし確実。

あと OR マッパだと素の SQL も知りたいけども、これは OR マッパの方で SQL を取得する機能があると思うのでそれをログに出す。

だだっこぱんだだだっこぱんだ

仰る通り、自分のコードがよろしくない可能性が高いのでそれを先に調査するつもりです。
ただ今回はじめてSQLを触ったので、基礎的な知識が全くなく苦戦しております...
やはりログから判断するのが良いのですね、参考になります!
ORマッピングというも初めて聞いたので、少し調べてみます...
ありがとうございます!

daidai

ORマッパはデータベースの Relational モデル(いわゆる関係データベース)の操作(要するに SQL)方法と、オブジェクト指向言語モデルとを変換するライブラリのことです。

  supabase.from('images').select('*').eq('id', id).single()

という感じにソースコードに書いてますが、この書き方はオブジェクト指向ですよね。
で、これが多分

SELECT * FROM images WHERE id=? ORDER BY id DESC LIMIT 1

などと SQL に変換されて postgres へ投げられるはずです。

クエリ分析は SQL でやらないとならないので、ORマッパが変換したSQL文を知る必要がある、ということです。

supabase 知らないけど https://supabase.com/docs/guides/platform/logs で SQL をログ出力できるぽい?

TFTF

データベースに関して。一般的にプロの世界ですと、データベースのレスポンスをキャッシュさせることで、データベースの負荷と利用料金を低減させます。Worker KVが使えるのか知りませんが、クエリ自体を減らす必要があるでしょう。

クラウド環境の場合、膨大なトラフィックも捌けてしまうため、クラウド破産になるケースもあります。
リクエスト数のスロットリングなども必要になってくるかもしれませんね。

また質問などあれば、Next.jsのDiscordで聞いてみるのもアリです。Vercelに関連すること、Supabaseなども聞いても大丈夫です。私もたまにチェックしてるのでチャレンジしてみてください。