tag:crieit.net,2005:https://crieit.net/users/yumiya_yumigon/feed 弓矢🏹の投稿 - Crieit Crieitでユーザー弓矢🏹による最近の投稿 2020-01-06T09:52:45+09:00 https://crieit.net/users/yumiya_yumigon/feed tag:crieit.net,2005:PublicArticle/15665 2020-01-06T09:30:57+09:00 2020-01-06T09:52:45+09:00 https://crieit.net/posts/2 めけぽんビンゴがバズって3万円請求された件について <p><a href="https://crieit.now.sh/upload_images/dc6663c05a88015787ddefe46748ba0f5e10719cc9eab.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/dc6663c05a88015787ddefe46748ba0f5e10719cc9eab.jpg?mw=700" alt="従量課金0.jpg" /></a></p> <h1 id="従量課金地獄へようこそ!!!"><a href="#%E5%BE%93%E9%87%8F%E8%AA%B2%E9%87%91%E5%9C%B0%E7%8D%84%E3%81%B8%E3%82%88%E3%81%86%E3%81%93%E3%81%9D%EF%BC%81%EF%BC%81%EF%BC%81">従量課金地獄へようこそ!!!</a></h1> <p>まいど、弓矢です。<a target="_blank" rel="nofollow noopener" href="https://bingo.mekepon.com/">めけぽんビンゴ</a>を作った、個人開発大好きエンジニアです。</p> <p>今日の話は従量課金です。<br /> 従量課金とは、使った分だけ課金する仕組みです。上限はありません。<br /> サービスを作る際、人気が出る確証はないけど一発狙っていきたい場合に大変ありがたい仕組みです。</p> <p>しかしながら、設計を一つミスすると恐ろしいことになります。<br /> 課金は青天井。際限なく請求されます。</p> <p>その結果、<strong>1日で3万円請求</strong>されました。<br /> ちなみに広告をつけてなかったので<strong>収益は0円</strong>です。純粋に3万円の赤字です。</p> <p>というわけで今回は従量課金のちょっと辛い話をします。</p> <h2 id="めけぽんビンゴ、リプレイス計画"><a href="#%E3%82%81%E3%81%91%E3%81%BD%E3%82%93%E3%83%93%E3%83%B3%E3%82%B4%E3%80%81%E3%83%AA%E3%83%97%E3%83%AC%E3%82%A4%E3%82%B9%E8%A8%88%E7%94%BB">めけぽんビンゴ、リプレイス計画</a></h2> <p>Twitterをやりこんでいるオタクなら、「めけぽんビンゴ」を見たことがあるのではないでしょうか。<br /> このサービスは私が高専生だった頃に作ったサービスです。<br /> 学生時代に作っただけあって、ソースコードはぐちゃぐちゃで、もはや解読するのが難しいレベルです。<br /> お見せするとこんな感じです。そのまんまコピペしてきました。</p> <pre><code><?php class TopPage extends View { public function Contents() { echo ' <div class="Container"> '; echo ' <div class="BigBox"> <h1>' . SITE_TITLE . 'へようこそ!</h1> <div class="Contents"> ' . SITE_TITLE . 'は簡単にビンゴが作成・プレイできるサービスです。作成にはツイッターのアカウントが必要になります。<br> 公式ツイッターアカウントは<a href="https://twitter.com/mekemeke_pon">@mekemeke_pon</a>です。人気のビンゴをツイートしています。 <span style="color:red;">現在サイト移行準備中です。新規でカードは作成できません。</span><br><br> <div style="text-align:center;"> <!--<a href="' . $login_url . '"><div class="Button">作成する</div></a>--> </div> </div> </div>'; $this->Adsense_square(); ...... </code></pre> <p>エンジニアなら、これがクソコードであることがわかるでしょう。<br /> 生PHP、しかもechoでHTML書いてました。当時の私にはそういう実装しかできなかったのです。</p> <p>おまけにサーバの負荷がものすごく高くなる実装がされていました。<br /> さくらのクラウドを使用していたので、普段は月4000円くらいのスペックで動かして、バズったときは手動でスペックを高いほうに変更する、という運用をしていました。</p> <blockquote> <p><strong>さくらのクラウド:</strong><br /> IaaS型クラウドサービス。<br /> つまるところ、あとからスペックを自由に変えられるレンタルサーバーです。スペックが高いとかかる料金も高くなります。</p> </blockquote> <p>このアナログな運用では、以下のような問題がありました。<br /> * バズに感知できないとサーバが落ちてしまう<br /> * スペック変更時にサーバの電源を切る必要があり、手間がかかる</p> <p>解読不能のままでは修正や更新もままならないですし、突発的なバズが発生するめけぽんビンゴでは手動スペック変更での運用は厳しいものがありました。</p> <p>というわけで、先月 <strong>Firebase</strong> + <strong>Netlify</strong> + <strong>SPA(Nusx.js)</strong> で大幅リプレイスを行いました。</p> <blockquote> <p><strong>Netlify:</strong><br /> 静的サイト専用のホスティングサービスです。つまるところ、難しいこと(PHPとかCGIとか)はできない<strong>基本無料</strong>のレンタルサーバーです。ある程度は無料で、あんまり使いすぎると費用が発生します。<br /> <strong>Firebase:</strong><br /> 今回の主人公の<strong>従量課金</strong>バックエンドサービスです。つまるところ、データを保存できる<strong>基本無料</strong>のサービスです。ある程度は無料で、一定回数以上の処理は、処理回数分費用が発生します。<br /> <strong>SPA:</strong><br /> index.html一枚だけで作るWebサイトです。JavaScriptというプログラミング言語で、ページの中身を書き換えています。</p> </blockquote> <p>Netlifyで、いくらアクセスが発生しても大丈夫になりました。<br /> Firebaseで、どれだけデータ書き込み(めけぽんビンゴの場合はプレイ)がされても重くならなくなりました。<br /> SPAで、プレイ後のページ遷移が重いなんてことがなくなりました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://qiita.com/organizations/admin-guild">運営者ギルド</a>の皆様にバグバッシュをしてもらい、公開します。ちょっと事故を起こしたので、ちゃんと公開できたのは12月30日のことでした。</p> <p>その時点ではAdsenseのサイト審査が通ってなかったので、Adsense広告を貼るのは後にすることにしました。<br /> あの時の私は、こんなにすぐバズるとは思っていなかったのです……</p> <blockquote> <p><strong>Adsense:</strong><br /> Googleの自動広告。つまるところ、アフィみたいなモンです。</p> </blockquote> <h2 id="来たる、バズ ~リアルタイム閲覧者数8000人~"><a href="#%E6%9D%A5%E3%81%9F%E3%82%8B%E3%80%81%E3%83%90%E3%82%BA%E3%80%80%EF%BD%9E%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E9%96%B2%E8%A6%A7%E8%80%85%E6%95%B08000%E4%BA%BA%EF%BD%9E">来たる、バズ ~リアルタイム閲覧者数8000人~</a></h2> <p>公開できたので、今までのビンゴの中でも人気が高かった都道府県ビンゴの完全版「<a target="_blank" rel="nofollow noopener" href="https://bingo.mekepon.com/card/32s0e93NVvq1RuTaFIhC/">行ったことある都道府県47! </a>」をサクラで投稿し、年越しをしました。</p> <p>そして年明け。<br /> 毎年正月にバズる<a target="_blank" rel="nofollow noopener" href="http://utabami.com/sitatametter/">したためったー</a>は、ツイッターのトレンド30位くらいまで浮上する程度に健闘してくれました。(余談ですが、私はしたためったーを心の中で「お年玉」と呼んでいます。)<br /> 正月はみんなテレビを見ているため、トレンドがほぼテレビ番組関連です。とにかく母数が大きいので、他のワードはなかなかトレンド浮上できません。<br /> めけぽんビンゴも特に浮上しないだろうと高をくくっていました。<br /> しかし駅伝の復路が盛り上がる1月3日のこと。</p> <p>2日時点でトレンド入りしない程度のバズだっためけぽんビンゴが、トレンド3位にまで浮上しました。<br /> <a href="https://crieit.now.sh/upload_images/e4b63cabf8532768a2c319144d1e9aec5e10586ce356e.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/e4b63cabf8532768a2c319144d1e9aec5e10586ce356e.jpg?mw=700" alt="従量課金2.jpg" /></a></p> <p>その時のリアルタイムの閲覧者数がこちら。<br /> <a href="https://crieit.now.sh/upload_images/27427c4a7ba258a6b3fe91ee69c3f46d5e10546646338.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/27427c4a7ba258a6b3fe91ee69c3f46d5e10546646338.jpg?mw=700" alt="従量課金1.jpg" /></a></p> <p>私が知ってる中では、過去最高記録です。過去トレンド1位を取ったときも、ここまで人は来ていません。<br /> 正月休みでやることがない人が多かったことが、一番の要因でしょう。<br /> それに加えて『いくらアクセスが発生しても重くならなくなった』『どれだけデータ書き込みがされても重くならなくなった』ということも、爆発的なアクセス増加に加担しているかと思われます。</p> <p>見たことのない数字に対して、多少不安になりながらも興奮して眺めていました。</p> <h2 id="立ち込める、暗雲 ~読み取り1.5億回~"><a href="#%E7%AB%8B%E3%81%A1%E8%BE%BC%E3%82%81%E3%82%8B%E3%80%81%E6%9A%97%E9%9B%B2%E3%80%80%EF%BD%9E%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A1.5%E5%84%84%E5%9B%9E%EF%BD%9E">立ち込める、暗雲 ~読み取り1.5億回~</a></h2> <p>爆発的バズが収まった1月4日。<br /> 1月3日分のFirebase(Firestore)の利用状況を確認しました。<br /> <a href="https://crieit.now.sh/upload_images/7fcb74c5040f78b02029f56c96d6ff975e105efc513e1.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/7fcb74c5040f78b02029f56c96d6ff975e105efc513e1.png?mw=700" alt="従量課金3.png" /></a><br /> 書き込み80万に対して、読み取り1.5億回。億という数字に対してイマイチイメージがわきませんが、読み取りが多すぎるような感じがします。書き込みが1回行われる間に読み取りが187.5回行われる計算です。</p> <p>設計を見直して、ある事に気が付きます。<br /> <strong>プレイ後に、更新データをリアルタイムで取得するようにしていたのです。</strong><br /> 「プレイ後のパーセンテージがリアルタイムで変わったらおもろいやろ」程度の気持ちで実装したものでした。<br /> しかしバズっているビンゴは1秒に何回もプレイされて、そのたびにデータが更新されます。さらに、ページを移動してもリアルタイム取得は止まりません。<br /> その結果、大量のリアルタイム取得が発生し、読み取り回数が億を突破するという馬鹿げたことになったのでしょう。<br /> (この不具合は現在は修正済みです。)</p> <h2 id="襲い来る、請求 ~意外と安かった~"><a href="#%E8%A5%B2%E3%81%84%E6%9D%A5%E3%82%8B%E3%80%81%E8%AB%8B%E6%B1%82%E3%80%80%EF%BD%9E%E6%84%8F%E5%A4%96%E3%81%A8%E5%AE%89%E3%81%8B%E3%81%A3%E3%81%9F%EF%BD%9E">襲い来る、請求 ~意外と安かった~</a></h2> <p>そして気になる料金。<br /> 1月2日時点のPV数が7万、1月3日時点でのPV数が72万。一体どんな恐ろしいことが起きるのか……<br /> 1月3日の請求額は2日後の1月5日に確定します。</p> <p>念のためにさらに1日置いて1月6日朝。震えながら確認したところ……<br /> <a href="https://crieit.now.sh/upload_images/0de6f0b852d56e734b7c15064d5a50065e127464819bb.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/0de6f0b852d56e734b7c15064d5a50065e127464819bb.png?mw=700" alt="スクリーンショット 2020-01-06 8.31.32.png" /></a><br /> い、意外と安い……!?(2万円の赤字だけど)<br /> ちょっと信じられなかったのでFirebaseの使用量から計算してみたのですが、だいたいあっているようです。</p> <p>しかし安いと言っても2万円です。1日で2万の請求は個人開発史上最大のマイナス。<br /> 中間層のお年玉総額程度の赤字ですが、学生の頃なら痛かったと思います。</p> <p>ここまでFirebaseの話ばかりしましたが、めけぽんビンゴで使用している従量課金サービスはもう一つあります。<br /> <strong>Netlify</strong>です。<br /> 無料の上限がかなり高いので無料のサービスあつかいされていますが、これだけPVがあると流石に有料になるようです。<br /> Netlifyから「無料枠超えたよ!」と言うメールが来たので、確認してみました。<br /> <a href="https://crieit.now.sh/upload_images/7a442dc0de3d031d35bdbd4c348d3aea5e12812d851bc.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/7a442dc0de3d031d35bdbd4c348d3aea5e12812d851bc.png?mw=700" alt="スクリーンショット 2020-01-06 9.34.23.png" /></a><br /> 80ドル。現在のレートだと8643円です。</p> <p>と言うわけで合計で約3万円の請求がきました。<br /> 富裕層のお年玉総額程度の赤字ですが、学生の頃なら超痛かったと思います。</p> <h2 id="反省、そしてまとめ"><a href="#%E5%8F%8D%E7%9C%81%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81">反省、そしてまとめ</a></h2> <p>今回の反省点は、<strong>バズったときのことを考えない設計をしてしまったこと</strong>でしょう。<br /> 不幸な点として、<strong>Adsenseの審査が間に合わなかったこと</strong>もあげられます。Adsense広告があったのなら、このくらい取り返してくれていたでしょう。</p> <p>よかった点としては、<strong>Firebaseは普通に使えば割と安上がり</strong>と言う学びがありました。<br /> 1日72万PVでゴリゴリに画像も生成をしなおかつ不具合で無駄な呼び出しが大量に発生しているのに、たったの2万です。不具合修正後はもうちょっと安く済むでしょう。<br /> Netlifyについてはプリレンダリングが強いので、このまま使いたいと思います。(なんだかんだ無料枠が大きいので、請求が発生するのはそう滅多にないはず。)</p> <p>エンジニア界隈ではFirebaseがもてはやされていますが、ひとつ設計を見誤ると地獄が発生します。<br /> エンジニアの皆様、とくにお金を持っていない個人開発者の学生の方。設計には気を付けましょう!!!</p> <p>そしてサービス利用者の皆様。いつもありがとうございます。<br /> 今回私はヘマをしでかしてますが、バズったことは悪いことではありません。いいことです。<br /> 素敵なサービスを見つけたらバズらせに加担していきましょう!!!</p> <h2 id="脚注・リンク"><a href="#%E8%84%9A%E6%B3%A8%E3%83%BB%E3%83%AA%E3%83%B3%E3%82%AF">脚注・リンク</a></h2> <p>お年玉総額について:<br /> 想像です。ソースはありません。</p> <p>地獄の大先輩:<br /> <a target="_blank" rel="nofollow noopener" href="https://gigazine.net/news/20180803-spent-much-money-in-firebase/">Firebaseの設定を間違えて72時間で300万円以上請求されてしまったウェブサービス</a></p> 弓矢🏹