【個人開発】YouTubeの動画からキーボードのランキングを作成するアプリケーションを作ってみた

2024.02.04
2024.03.24
個人開発
GCPGinGithub ActionsGoNext.jsTypescript

はじめに

個人開発として、Keybaord Trend という Web アプリケーションを開発し、公開したので、どんな技術を使って、どんな構成で開発したのか紹介していきたいと思います。

Keyboard Trend とは

Keyboard Trend は、YouTube の動画をベースに作成したキーボードのランキングサイトになります。現状はシンプルに、なるべく特定のキーボードに限定されるようなキーワードで検索して、ヒットした動画数をベースに期間を限定したものと、期間を限定していないもので作成しています。

unknown link

コンセプトとしては、以前開発した個人開発のアプリケーションがデータベースを使わない構成だったので、何かしらデータベースを使ってみたいということで開発しました。ただ、最初は RDBMS で構築していたのですが、コストが高くなりそうだったので、NoSQL を使うことにしました。

unknown link

アーキテクチャ

アーキテクチャは下記の通りです。

メインのプラットフォームとして、他のパブリッククラウドと比べて前提知識がある GCP を選択しています。フロントエンドは Typescript + Next.js(App Router)、バックエンドは Go + Gin で実装し、Cloud Run で動かしています。

Gin のディレクトリ構成は下記のボイラープレートを参考にしています。

unknown link

また、Github Actions を利用して CI/CD パイプラインを実装しました。Cloud Build でソースコードのビルドとイメージ作成し、作成したイメージは Artifact Registry に格納しています。

ローカルで試す場合は、Docker Compose でコンテナを起動し、Firestore エミュレータを使って、開発していました。

使用した技術

使用した技術は下記の通りです。

  • Typescript: フロントエンドの実装言語
  • Next.js: フロントエンドのフレームワーク
  • Tailwind CSS: CSS フレームワーク
  • Material UI: 一部の UI (ページネーション)
  • Go: バックエンドの実装言語
  • Gin: バックエンドのフレームワーク
  • GCP
    • Cloud Run: アプリケーションのデプロイ先
    • Firestore: データベース
    • Cloud Storage: 画像用ストレージ
    • Cloud Function: バッチ処理
    • Cloud Scheduler: バッチ処理の定期実行
    • Cloud DNS: 名前解決
    • Cloud Build: ソースコードとイメージのビルド
    • Artifact Registry: コンテナイメージレジストリ
    • Cloud Domain: ドメイン取得
    • YouTube Data API: YouTube 動画の取得
  • Docker: コンテナ
  • Docker Compose: ローカル開発環境
  • GitHub Actions: CI/CD
  • GitHub Copilot: 実装サポート

今回初めて GitHub Copilot を契約して使ってみました。Tailwind CSS でのスタイリングやまだまだ使い慣れていない Go の書き方など非常に参考になりました。

今後実装したい機能

今後実装したい機能は下記の通りです。

  • キーボードの追加申請フォーム
  • ランキングスコア集計方法のアップデート
  • テストコードの実装

機能的にもかなり絞って公開したので、より充実したランキングにしていきたいと思います。

参考

Support

\ この記事が役に立ったと思ったら、サポートお願いします! /

buy me a coffee
Share

Profile

author

Masa

都内のIT企業で働くエンジニア
自分が学んだことをブログでわかりやすく発信していきながらスキルアップを目指していきます!

buy me a coffee