3年間大切に育てたサービスの軌跡

本記事は [個人開発 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/private-development) 12日目の記事です。

# はじめに
[みんなの洋楽ランキング](https://mygkrnk.com/)というサービスを2018年4月にリリースして2年半が経ちました。その間、システム構成、アクセス数、マインド面など大きな変化がありました。長期に渡ってサービスを運用している知見やアクセス数増加による心境の変化など個人サービスならではの貴重な体験が出来たので、やったことや思いなど書こうかなと思います😄

<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/6eeb0fb8-81d2-97d0-8992-a0e843f672fc.png">


# システム構成の変遷
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/148b2154-60ea-efd3-90f1-b062692db8b6.png)
2年半で大きく変わったのでどのような理由でどういう技術を使ったか書きます。図は2年前の構成なので、だいぶ変わってます。

## リリース期
もともと知識のあったC#とASP.NET MVC、SQLServer、フロントはJqueryとひと昔前のWindowsライクな環境で開発しました。Azureを使い、インフラとかの知識そこまでないのでPaaSである[AppService](https://azure.microsoft.com/ja-jp/services/app-service/)を使いました。WindowsのAppServiceはとにかくコストがかかる😭

## 開発環境をWindowsからMacへ
macのBoot CampでWindowsを動かしてたのですが、非力なAirでVisual Studioが重くて辛いので、マルチプラットフォームの.NET Coreへ移行しました（VSCodeで開発できる！）。余談ですが、stackoverflowでも.NET Coreの移行が完了していないので、成熟したプロダクトでのフレームワークなどの移行は、相当の情熱が無ければ無理です（ガチ）。早めにやらなければ、いまだに移行出来てないかもしれなかった😭

## フロントエンドをReact&TypeScriptへ
リリースまでのスピードを重視したため、なにも考えずに使えるJqueryを使っていました。ただ、Jqueryはライブラリの仕様上、2億%破綻することがわかっていたのでReactを導入しました。TypeScriptに関してはこだわりはなかったのですが、ガチガチに固められたC#やJavaのような言語仕様でなく気軽に使えるのでとりあえず入れてみました。Reactは比較的直感的にかける気がする。注:簡単ではない

昔の自分に言ってやりたい
「これJqueryで良いんじゃね？」
「全然良くねぇから！！」

## WindowsサーバーからLinuxへ
2年前までのAppServiceはWindowsサーバーとLinuxサーバーが同じ値段（確か九千円ぐらい）という意味不明な値段設定をしていたのですが、ある日を境にWindowsサーバーの半額（五千円）になりました。当然収益もなかったので、今後のコストを下げるためにLinuxサーバーに変えました。現在は2年前の4分の1(二千円)になりました。。~~ボッタクリでしょマジで~~

## パフォーマンス改善
[スマホの場合]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/63a55376-ab47-20ac-acfd-1ab89585d5a2.png)

とあるデザインテンプレートを使ったせいで大量のJqueryプラグインがあり、1つずつ壊れないようにひっぺがす作業が鬼畜でした。まだ悪魔（Jquery）が潜んでますが、バックエンドからフロント周りまでできることはやりました。PageSpeed Insightsはフロントエンドに起因する項目が重要視されるので、圧縮や画像の遅延表示あたりを見直したら大きな効果が出ました。そもそもドメイン違うじゃねーかと思われますが、計測前のキャプチャと撮り忘れてたので、それ用に別でサーバー立てて計測しています。

## CIをGithub Actionsへ
Azureは[kudu](https://github.com/projectkudu/kudu)という、~~謎の~~ デプロイエンジンを使っていて、kuduを使ってmasterにマージされたらデプロイするというフローで運用していました。kuduでは.Net Coreの継続的なバージョンアップが困難になってきたのでちょうどリリースされたGithub Actionsを使ってデプロイするように変更しました。私一人しか開発者がいないのでFree（無料）で余裕で事足ります😇

## フロントエンド大幅整備
フロントエンドは導入から手を付けれてない状態だったので全体的に整備しました。webpackのバージョンアップから全てに影響し、どうせやるならESLintも入れちゃおうと思い導入しました。

- webpack3 -> 4
- typescript2 -> 4.0.3
- react15 -> 16.13.1
- redux導入
- ESLint導入

## ステージング環境導入
アクセス数も増えてきて、リリース後のバグが驚異になってきたので成果物を確認するためにステージング環境を導入しました。動作確認程度ならAppServiceの無料枠で事足りるのでコスト的にも問題ないだろうと見込めたのもよかったです。

## 所感
スキルを大きく変えず、レガシーにならないように少しずつ言語やフレームワークのバージョンアップを行ってきました。フロントエンドは動きが大きいので、それなりにテコ入れする必要がありました。バックエンドは.NetCoreなのでほとんど大きな影響がなく、比較的簡単にバージョンアップできるので、互換性を重視しているマイクロソフトの技術ならではの恩恵を受けれたなと思いました（悪いところも腐る程ありますが）

# アクセス数と利益の関係
アクセス数と利益に関しても大きく変わったので、時系列に書きます。※全く儲かってません😇

## リリース期
リリースした直後は当然誰も見に来ません。が、新規ドメインは検索上位に上がるといういわゆる[Googleハネムーン](https://www.seohacks.net/blog/1006/)が起きたので意外にも0ではなかったです😇
![スクリーンショット 2020-12-03 12.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/2ee24d66-dbb4-db37-c76a-f0fdcdc03fa9.png)

PV 800
UU 100
収益 ¥0
維持費 ¥10,000
利益 ¥-10,000

## リリース ~ 3ヶ月後
Googleハネムーン絶頂期です。なぜかSEOが上がり、それに伴ってアクセス数が増加しました。こういう時に限って人は傲慢になり欲望にまみれるもので、即時に収益化したいと思いアドセンスを導入しました。

この時俺「俺、才能あるわぁ( ´∀｀)」

来月から下がることを知らずに。。

![スクリーンショット 2020-12-03 14.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/7faefa3a-1ec3-f107-d883-0352f6133aa7.png)

PV 20000
UU 7000
収益 ¥500
維持費 ¥10,000
利益 ¥-9,500

## リリース半年後
ハネムーンを終え、一気に下がりました。とはいえ、ニッチなキーワードでそこそこの上位だったのでほぼ1人もアクセスしないという事態は避けられていました。勢いあまって無意味なSEO対策（タイトルめっちゃ変えるとか）を大量にやったのでそれが影響して落ちたと疑心暗鬼になりました。下がってから2ヶ月ぐらい経つと悟ってきたので、以前から課題となっていたWindowsサーバーによる高コスト問題に取り掛かり、Linuxサーバーへ移行しました。逆にあまり人がアクセスしていない状況下での移行は正解だったのかもしれません。割と落ち込むので、やった施策は全てうまくいったと思うメンタル修正が必要です😇
![スクリーンショット 2020-12-03 15.10.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/6a2ad24b-4717-fe81-fecd-d2163a7fc7d6.png)

PV 3900
UU 1000
収益 ¥100
維持費 ¥5,000
利益 ¥-4,900

## リリース1年後 ~ 1年半
「1年以内に月間1万PVを達成しなければやめる」と決めていました。最後にもがこうと思い、会員登録を作り、とある機能を使ってもらうためにTwitterのフォロワー約300人（当時）に使ってもらえるようにDMしました。結果13人に使ってもらうことができたので、ギリギリ1万PVを達成し、継続して運用していくきっかけとなりました。1万PVという目標は大きいか小さいかわかりませんが、努力次第で達成出来る数字なので適当に決めた目標設定としてはよかったかもしれません。
![スクリーンショット 2020-12-03 15.20.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/02e8b428-0fe2-4f6d-7e93-1c676adffd81.png)

PV 10000
UU 3000
収益 ¥300
維持費 ¥5,000
利益 ¥-4,700

## リリース1年半 ~ 現在
2020年になり、「（キーワード） 2020」というキーワードで上位を占めるようになり、大幅にアクセスが増えました。とはいえ、いきなり急増というわけではなく、1万PVぐらいからひと月3万PVぐらいずつ増えていきました。この調子と同時にAppServiceのLinuxが大幅な値下げをし、維持費を格段に安くなったことでようやく利益が出るようになりました。嬉しいというよりは「まぁよかったな」程度の気持ちで、Googleハネムーンの変動を経験し、メンタルコントロールがうまくなった気がします。

![スクリーンショット 2020-12-03 15.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/ffd51caf-f31a-bada-7b8d-631f9c261219.png)

PV 15000
UU 50000
収益 ¥6,000
維持費 ¥2,000
利益 ¥4,000

## 所感
収益とアクセスに関しては、運がほぼほぼ占めるのでなんとも言えませんが、今のところ維持費を賄えているのでよかったかなと思ってます。よく個人サービスの維持費は「飲み会1〜3回我慢すれば良いじゃん」と言われますが、アクセス数がほぼないサイトに少額の維持費を投資するのもメンタルがやられます。どこかでそのメンタルを安定させるためにも「勉強」という投資をしていると思い込んで、可能な限りコストを下げる努力をした方が、長い間サービスを継続出来る気がします。

# やってよかったこと
## 自動化
Youtube、Spotify、アナリティクスなど日々変動するデータは毎日自動で同期しています。ユーザー投稿もその一種で、会員さんが投稿してくれることでコンテンツが強化されていくので、自分は開発に専念することが出来ます。ずっと情熱を持っていれば別ですが、絶対飽きるのでどうすれば手をかけずにサービスが進化するかを考えています。

## モダンな環境を維持する
Railsブームの乗っかって「作ってみた」系の記事が多かった気がしますが、今その記事を見るとサイトがなくなってたりするのは、モダンな環境を維持しづらくなったことがほとんどだと思います。もちろん、ユーザー数に対するコストが多くなり負担が増えることも大きな要因かもしれませんが、モダンな環境を維持することは「勉強」でもあるので、無駄金にはならず、投資と割り切れるのでモチベを違う方向に向けられたのもよかったと思います。

# 悪かったこと
## パクリサイトが出てきた
まるっきり記事をパクられたので、直接連絡したら「警察呼ぶぞ」と逆ギレされて正直めっちゃイライラしました笑。結局、悪質なSEO業者で様々なサイトをスクレイピングして、コンテンツにすることでGoogleのインデックスを稼ぐといった手法なのだろうなと思いました。住所とか電話番号を執拗に聞いてきて、マジヤバイやつだった〜。。

#最後に
約3年運用して、結局はモチベをどうやって維持するかが一番重要だと思いました。こんなことをいいながら、2020年は2回しかリリースしてませんし、半年以上放置している身なのですが、自動でコンテンツが強化される仕組みを入れているので死んだサイトにはならないのもモチベが維持出来る大きな理由かもしれません。まだまだ長生きしそうなので、このサービスとずっと寄り添って行こうと思います。