「キャップ野球情報局」に使っている技術

公開:2020/09/29
更新:2020/09/29
1 min読了の目安(約1300字TECH技術記事

キャップ野球情報局とは

まだマイナースポーツですが、ペットボトルのキャップを打つ野球競技「キャップ野球」の試合や大会、練習会、チーム情報などを掲載しているWEBサービスです。2019年12月に運用開始しました。

システム構成

フロントエンド

Netlify
GitHubにコードをpushすると、Netlifyでビルドが走るようになっています。

NextJS
2020年5月にReactJSからNextJSへ移植しました。
NextJSは基本的にstatic exportを使っています。
別システム「みんなのSCORE」や別サービス「パワプロジェネレータ」のデータを連携させて表示させています。

firebase
2020年6月のversion 2.0からログイン機能を実装し、ユーザ認証にfirebaseを使用しています。

サーバサイド

nginx
コンテナにするとLet's Encryptの更新周りが面倒だったので単体のnginxを使っています。

docker-compose
もともと、2019年12月の運用開始時は別システムである「みんなのSCORE」のデータを主に使用していました。version2になった現在は、独自のデータベースを持った上で「みんなのSCORE」と連携しています。
NodeJS
Typescriptを使用しています。様々なデータの処理を行っています。
MySQL
最近絵文字に対応しました。

Vercel/puppeteer
主にパワプロジェネレータなどのOGP生成に使っています。
選手カードの合成を行って画像として保存したりしています。

Cloudinary
画像保存・リサイズなどの変換サービス。
imgurと迷った経緯がありますが、最終的にユーティリティが充実しているこちらにしました。

slack
全てではないですが、ユーザの情報更新などを通知するようにしています。

外部システム

みんなのSCORE

2015年6月から開発している成績管理(スコア入力)を行うシステム。
メインがReactJS、firebaseとcloudinaryを使っていないところを除けばほぼ同じ構成です。

パワプロジェネレータ

2020年3月リリース。
フロントエンドは分離していますが、みんなのSCOREとバックエンドを共有するサービスです。

今後の展望

死活監視やエラーログ収集はそのうち入れたいなと思いつつ、あまり着手できていません。