🃏

【個人開発】Next.js × Firebase App Hosting で「完全無料・メンテ不要」なスクラムポーカーを作った話

に公開
Firebase
Next.js
個人開発
scrum
poker
tech

はじめに

こんにちは。
今回は、Next.js (App Router) と話題の Firebase App Hosting を使って、登録不要のスクラムポーカーアプリを個人開発し、リリースしました。

作ったもの： スクラムポーカー
https://poker.divingbase.tech

既存のスクラムポーカーツールだと、アプリをインストールしないといけなかったり、開始するまで長かったりして不満があったので、「とにかくシンプルで爆速、かつ運用コストがかからない」 ツールを目指して開発しました。

本記事では、採用した技術スタックや、Firebase App Hosting × Sentry のハマりポイントなどを共有します。

技術スタック

「メンテフリー」かつ「低コスト（あわよくば無料）」で運用するために、以下の構成を採用しました。

  • Frontend: Next.js (App Router)
  • Hosting: Firebase App Hosting (Next.js アダプター)
  • Database: Firebase Realtime Database
  • Monitoring: Sentry
  • Batch: Cloud Functions (第2世代 Scheduler)

特に Firebase App Hosting は、GitHub と連携するだけで Next.js アプリをよしなにビルド・デプロイしてくれるため、Vercel のような手軽さで Google Cloud のインフラに乗せることができ、非常に快適でした。

開発のポイントとハマりどころ

開発中に遭遇した技術的な課題とその解決策を紹介します。

1. Firebase App Hosting での Sentry ソースマップ送信

Sentry を導入する際、ローカルビルドでは問題なくても、App Hosting 上でのビルド時にソースマップがアップロードされない（環境変数が渡らない）問題に直面しました。

App Hosting は Google Cloud Build 上でビルドが行われるため、GitHub Secrets ではなく Secret Manager を経由する必要があります。

解決策:

  1. Sentry の Auth Token を Secret Manager に登録。
  2. プロジェクトルートに apphosting.yaml を作成し、以下のように定義。
env:
  - variable: SENTRY_AUTH_TOKEN
    secret: SENTRY_AUTH_TOKEN

secrets:
  SENTRY_AUTH_TOKEN: SENTRY_AUTH_TOKEN
  1. App Hosting のサービスアカウントに「Secret Manager のシークレット アクセサー」権限を付与。

これで、デプロイ時に自動でソースマップが送信され、Minified されていないエラーログが見られるようになりました。

2. Cloud Functions と Next.js の Lint 競合

定期的に古い部屋データを削除するために Cloud Functions を導入しましたが、デプロイ時に firebase-functions モジュールが見つからないエラーや、ESLint の競合エラーが発生しました。

解決策:

ビルドエラー: Next.js が Functions 側のコードまでビルドしようとしていたため、ルートの tsconfig.json の exclude に "functions" を追加。

Lintエラー: ルートの ESLint 設定が Functions 側に干渉していたため、firebase.json の predeploy フックから npm run lint を削除し、ビルドのみ実行するように変更。

// firebase.json
"functions": {
  "predeploy": [
    "npm --prefix \"$RESOURCE_DIR\" run build"
  ]
}

これで無事に Next.js アプリと Functions を共存させることができました。

実装した機能

シンプルさを追求しましたが、運用を楽にする工夫も入れています。

  • 完全登録不要: URL を共有するだけですぐに参加可能。
  • リアルタイム投票: Realtime Database を活用し、ラグのない投票体験を実現。
  • 自動お掃除: Cloud Functions の Scheduler を使い、24時間経過した部屋を毎朝自動で削除（RTDB の容量圧迫を防ぐ）。

おわりに

Firebase App Hosting はまだ新しいサービスですが、Next.js との相性は抜群でした。 スクラム開発や見積もりを行う際は、ぜひこのアプリを使ってみてください！

[https://poker.divingbase.tech] [https://github.com/f96u/planning-poker]

Discussion