SREチームの三浦です。
入社して半年が経過しました。SREの取組みとして開発チームであった課題を解決するために、社内ツールを作成しましたので紹介していきます。
課題
当社のサービスWowTalkのサーバーはいくつか環境があり、バージョン管理の手法が担当者に委ねられていた問題がありました。
Ex) A環境 API: v2.5.0 Web: v1.4.0 / B環境 API: v2.6.0 Web: v1.4.0
→ APIのバージョンの違いを確認することをわかりやすくしたい
なので、今回はバージョン管理を一元化し、チーム全員が一覧で確認できるツールを開発しました。
追加で、GitLabのリリースノートにも反映してほしいと要望がありましたので、連携できる機能を開発しました。
採用技術
＜バックエンド＞
・Express
別の社内ツール用で構築されていたので、併用して使う事にしました。
主にAPIとして使用します。
・Firestore Database
FirebaseのNoSQLデータベースサービスです。当社のサービスで一部使用しているので、採用しました。
＜フロントエンド＞
・Next.js
Reactのフレームワークです。コンポーネントが充実していたり、SSRやSSGにも対応しています。2020年のバージョンアップでかなり機能が充実し、勢いがあるフレームワークです。
下記の記事よりも、Next.jsの人気が高くなっていることがわかります。オススメのフレームワークです。
nextjs-ja-translation-docs.vercel.app
・Ant Design
ReactのUIフレームワークです。こちらも当社サービスで一部採用していたので、使用しました。標準で便利なコンポーネントが準備されているので、自作のコンポーネントは作成せずにAnt Designのコンポーネントを利用しました。
システム構成図
①社内環境の都合上、Next.jsで静的ファイルを作成してサーバーに置いています。
②Next.jsで作られた静的ファイル上で、Expressで作成したAPIをfetchして、RESTAPIを実現してます。
③GitLab APIを利用して、タグに紐づくリリースノートを更新するAPIもExpress
で開発をしています。
＜UI＞
・全体をAntDesign感で統一しています。
・上記ツールに登録されたバージョン情報はGitLabにも反映されます。
開発した感じたこと
＜よかったこと＞
・普段は当社サービスの機能追加や改修を行うことが多いが、ゼロから設計してツールを作成したことは良い経験になった。
（通常はフロントメインの業務も多いが、今回はREST APIを学ぶ機会があってよかった。）
・自分の興味のある技術を採用して、楽しく開発できたこと(一番重要)。
＜反省点＞
・学習時間が長くて、期間ギリギリで終わったこと。
・運用面を考慮できずに、機能の修正を何回もしたこと。
・ファイル名やDBの構成を何度も変更して時間がなくなったこと。
これから運用していきますが、課題→改善の繰り返しが重要なので日々改善していこうと思います。
当社ではこの様に様々なことにチャレンジできる環境があります
当社ではこの様に挑戦できる環境があります。
興味を持った方がいらっしゃればいつでもご連絡下さい。
