Nuxt.js＋Firebase＋GAEで作った個人サービスが半月で2万PV超えたので実績値を全て公開する

# こんなサービス作りました
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【<a href="https://twitter.com/hashtag/%E6%8B%A1%E6%95%A3%E5%B8%8C%E6%9C%9B?src=hash&amp;ref_src=twsrc%5Etfw">#拡散希望</a>】<br>🙌🎉🎊サービス開始🎊🎉🙌<br><br>ボケをツイートして<br>「いいね❤️」「リツイート🔁」<br>の数でランキング！<br><br>Twitter連動型 大喜利サイト<br>「ついぎり」<br>サービス開始しました‼️<a href="https://twitter.com/hashtag/%E3%81%A4%E3%81%84%E3%81%8E%E3%82%8A?src=hash&amp;ref_src=twsrc%5Etfw">#ついぎり</a><a href="https://t.co/bkXfzHyVSs">https://t.co/bkXfzHyVSs</a></p>&mdash; ついぎり@公式アカウント (@twigiri_app) <a href="https://twitter.com/twigiri_app/status/1161589000223641600?ref_src=twsrc%5Etfw">August 14, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterで大喜利するサービスです。
８月中頃にローンチしたのですが、有難いことに半月で約2.5万PVいきました。

開発に至ったポエム記事はCrieitに投稿しています。
[なぜ大喜利サービスを作ったのか](https://crieit.net/posts/19b75796b5c032c728ebab48ae064af4)

# この記事について
やっぱり公開直後は怖かったです。

そう、**クラウド破産**。
[Firebaseの設定を間違えて72時間で300万円以上請求されてしまったウェブサービス](https://gigazine.net/news/20180803-spent-much-money-in-firebase/)
[BigQueryで150万円溶かした人の顔](https://qiita.com/itkr/items/745d54c781badc148bb9)

上記以外にもネット上にはインパクトのある高額請求の記事がたくさんあり、
内容を確認すれば「なんだそんな事か」となるのですが、
実績値というのはセキュリティやNDAの関係からか、なかなか出回ってません。

**個人開発ならそんなの関係ねぇ**

って事で全て公開します。
使い方によって大きく変わる所かと思いますが、何かの参考（個人開発の後押し）になれば幸いです。

#環境構成
- Nuxt v2.8.1
    - SSRモード
- GAE
    - standard
    - runtime: nodejs10 
    - instance_class: F1
- Firestore
    - 改めて別記事書こうと思いますが一般的な構成だと思います 
- Cloud Functions for Firebase
    - engine: node8
    - ユーザー登録/脱会/ツイート/いいねRT集計/バックアップ で使用
- Cloud Storage for Firebase
    - OGP画像の保存に使用

- Regionは全てasia-northeast1

# 使用量
## PV数
<img width="1354" alt="スクリーンショット 2019-10-03 20.46.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127547/24881933-651c-4c96-824c-39736e729605.png">
トータルで約2.5万PV。
デイリーだとローンチ直後の約5,500PVがMAXです。

## 割り当て
<img width="1053" alt="スクリーンショット 2019-10-03 20.26.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127547/b76116ed-9fff-e787-4c78-bee5045b0550.png">
アクセス数に比例した増加は見られませんでした。

`GCP Storage egress between NA and APAC`
使用量: 3.59GB
一番費用が発生してるこれ、よく分かってません・・・
GAEのデプロイにかかる項目なのかな？と思ってます。

`Cloud Firestore Entity Writes Japan`
`Cloud Firestore Read Ops Japan`
Write: 480,077
Read: 606,253
Firestoreは[1日単位で無料枠がリセットされる](https://firebase.google.com/docs/firestore/quotas?hl=ja#free-quota)のですが、リリース直後はちょっと無料枠から足出た程度ですね。
21日辺りは障害等でデータいじってた・・・気がします。

#諸経費
## サーバー代
<img width="351" alt="スクリーンショット 2019-10-03 19.57.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127547/79b2afae-5344-fea9-34f5-2f1b7e7e7b7f.png">
0円でした。
使用量として57円かかってるのですが、
GCPには1年間有効な$300のトライアルクレジットがあるので、そこに収まってます。
クレジットを$0.5消費しました。使い切れる自信がありません。

## ドメイン代
<img width="402" alt="スクリーンショット 2019-10-03 21.03.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127547/47080e38-4045-f28d-c4d8-e55661e5af2d.png">
1,600円です。
[Google Domains](https://domains.google.com)でappドメインを取りました。
appドメインはSSL証明書無しでは使えないという安全なドメインです。
GAEの場合、SSL証明は[デフォルトで有効＆無料](https://cloud.google.com/appengine/docs/standard/nodejs/securing-custom-domains-with-ssl?hl=ja)です。

#収益
AdSense広告を導入しています。
キャプチャは載せて良いのか分からなかったので・・・
半月で約1,300円でした。

#所感
**環境構成について**
一番びっくりしたのはNuxt.jsがF1インスタンスで落ちずに稼働していることです。
公式ドキュメントでも[F2が推奨されてる](https://ja.nuxtjs.org/faq/appengine-deployment/)のですが、F2では無料枠に収めることが難しいです。
バックエンド処理をFirebaseに任せてるおかげで負荷が少ない構成になってるのかなーと思います。

**費用について**
正直「バズった」と言える数値ではないと思ってるので「バズっても大丈夫」とは言えないです・・・
座布団数(ボケツイートのいいね/RT総数)も、現在のランキング1位は3桁です。
「バズっても大丈夫」と分かったら改めて記事書くので、誰かバズってください。

しかし、まぁバズが発生してない個人開発としてはそれなりのアクセス数だと思ってます。
それで数十円なので「そんなに怖くないよ！」とは言えるかと。

**安心して使うために**
- GCPの課金アラートを設定する
- Firestore Rulesはちゃんと書く
は最低限やっとくべきです。
ただ、Rulesはちゃんと書くと一般的なバックエンド処理と同レベルの規模になると思います。
最低限の尺度が難しいですが、認証/取得件数/タイムスタンプ比較辺りは最低でもやっておくべきです。

**マネタイズについて**
AdSenseに頼ったサービスの運営は凄く難しいという体験をしました。
PV落ちたら施策を打たないといけないので放置出来ないし、
収益率はAdSenseの匙加減１つで大きくブレそうです。

[前作](https://qiita.com/kinmi/items/c66aa98718acad84621b)ではマネタイズしてなくて、正直「もしバズったらお金かかるよな・・・」とアクセス数に対してネガティブになってました。
その経験を踏まえ、広告を貼りました。
結果、素直に「バズれ！」と思えるようになったので、それだけでも導入した価値はあったかと思います。

#おわり
今後、この個人開発で得た知見で記事書こうと思ってます。

- TwitterAPIがBANされた話（2019/10/17 [書きました](https://qiita.com/kinmi/items/53778c020a2ce813a970)）
- Firestoreの構成について
- 文字入れ画像を作るソースコード
- オレオレアトミックデザイン

他に「ここ知りたい」等あれば公開しますし、ボリュームある内容であれば記事書きます！

ただ、一番書きたいのは「バズっても大丈夫だった件」です。

[Twitter連動型 大喜利サイト「ついぎり」](https://twigiri.app/)
![ogpTop_small.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127547/61391e21-cd2f-0ca3-734e-f96beee4a3b5.png)
面白い投稿お待ちしてます:yum: