はじめに
このサービスを作ろうと思った目的
自分は色々な小さいウェブサービスを作っていますが、
作っても使ってもらえないということが多いです
使ってもらうためには宣伝すればよいのですが
個人開発したサービスに宣伝費をかけるのもまた違うと思います
お金をかけずに、相互で宣伝・応援しあえるサービスを作成しました
使用した技術
バックエンド
- ASP.NETCore(C#) WebAPI
フロントエンド
- Vue.js 3.0
- Vuetify 3.0 Alpha
データベース
- Firebase Realtimedatabase
デプロイ先
バックエンド
- Heroku
フロントエンド
- Firebase
技術選定に関して
バックエンド
無料枠で賄っているため、フロントエンドのみで解決したいなと思いましたが
今回はTwitterApiを使うのでバックエンドは必須です
GASを使うというのも考えましたが無料枠の上限が1日2万回コールだったため、微妙かなと思い却下しました
（1日2万回も使われねぇよ！というのはさておき・・・）
さくっと作りたかったのと、すでに資産があるのでC#にしました
Dockerを使ってHerokuにデプロイしています
フロントエンド
ReactかVue.jsで悩みましたが
Vue.jsにしました
普段ビルドにはViteを使っている関係上、Vue3を強制されていました
Vue3はVue.jsの有名なデザインフレームワークVuetifyが長い間対応していなかったのですが
公式サイトを見てみるとVue3で使用できるVuetify3.0のα版が公開されていたので
こちらを使ってみようということでVue.jsにしました
データベース
お手軽かつ、フロントエンド・バックエンド共に使用できる
FirebaseのRealtimeDatabaseを選びました
SQLが書けないので複雑なクエリは出来ないのですが
今回は複雑なことはしないのでコレにしました
FireStoreを使わないのは無料枠の関係です
フロントエンドからRealtimeDatabaseを参照することにより
APIの叩く数を減らすようにしています
このサービスを作ってみて
新しい学びがあったかというと微妙なところで
Vue,RealtimeDatabase,C#に関しては他のアプリを作るときにも使用しているので淡々とやっているだけでした。
Vuetifyに関しては全く触れたことがなかったので、触れてよかったなって思いました
別のデザインフレームは使用したことがあり、BootstrapとMaterializeなのですが
それらとの違いはタグ指定かクラス指定か程度でした
あと、今回C#からがっつりRealtimeDatabaseを使用しましたが、結構使いやすいなと思いました
様々なクラウドサービスでPaaSが無料というのはあるのですが、データベースに関しては無料が少なく、あったとしても容量が少なすぎて使い物にならないものばかりです
RealtimeDatabaseは1GBまで無料で使用でき、ドキュメント型のDBなのでカラム定義せずともデータを突っ込めるので、サクッと作りたい方にはオススメだなと思いました
また、RealtimeDatabaseについて調べている最中にRestApiも使用できるということも知りました
コレについては別記事を書くかもしれません
最後になりますが
このサービスも使ってもらってなんぼなので、どうぞ使ってやってください