Zenn
🔥

Firebase App Hosting : スマートデプロイメントでモダンウェブフレームワークをお手軽デプロイ

2024/08/20に公開
Firebase
Google Cloud
tech

はじめに

皆様、こんにちは。クラウドエース フロントエンド・UI/UX部の河野と申します。

今回は、新卒研修の成果物として開発した Next.js ウェブアプリケーションのデプロイ過程で、Firebase App Hosting で実際にデプロイをした経験をご紹介できればと思います。
この記事を通じて、最新のクラウドテクノロジーがもたらす可能性と、実践的な知見を皆様と共有できればと幸いです。

Firebase App Hosting について

動的な Next.js と Angular アプリケーションの開発とデプロイを簡単に実装可能です。
組み込みフレームワークのサポート、GitHub インテグレーション、他の Firebase プロダクト(Authentication、Cloud Firestore、Vertex AI for Firebase など)との統合を提供しています。

https://firebase.google.com/docs/app-hosting?hl=ja

主要機能として

機能 説明 メリット
GitHub 連携 ロールアウト設定があり、commit を感知し自動で Build が開始されます 開発者の手間が減り、更新が簡単になります
Google Cloud サポート アプリは Google Cloud の信頼性の高いサービスで動作します 安定性が高く、大規模なアプリも安心して運用できます
アプリのビルドと配信 Cloud Build でアプリを作り、Cloud Run で動かし、Cloud CDN で高速化します アプリの作成から配信まで自動化され、高速に動作します
セキュリティ強化 Cloud Secret Manager で大切な情報(API キーなど)を守ります アプリのセキュリティが向上し、情報漏洩のリスクが減ります
AI 機能のサポート Gemini などの AI 機能を簡単に追加できます 最新の AI 技術をアプリに組み込みやすくなります
Firebase 管理画面 アプリの状態を簡単に確認・管理できます 問題の早期発見や、アプリの改善が容易になります
カスタムドメイン 自分で選んだドメイン名でアプリを公開できます ブランディングが向上し、プロフェッショナルな印象を与えます

App Hosting と Hosting の違い

特徴 Firebase App Hosting Firebase Hosting
主な用途 動的な Next.js と Angular アプリケーション 静的ウェブサイトや単純なウェブアプリ
フレームワーク Next.js、Angular(組み込みサポート) 特定のフレームワークに限定されない
サーバーサイド 動的アプリケーションをサポート 主に静的コンテンツ
(Cloud Functions で拡張可能)
GitHub 統合 組み込みの継続的デプロイメント機能 基本的なデプロイメントサポート
サービス Google Cloud サービスを活用
(Cloud Build, Cloud Run, Cloud CDN)		 Firebase 専用のインフラストラクチャ
AI 機能サポート Gemini をサポートし容易に実装可能 直接的なサポートはなし
カスタムドメイン サポート サポート
SSL 証明書 自動提供 自動提供
リリースステージ プレビューリリース (一般提供前) 一般提供中
ビルドプロセス 自動フレームワーク検出とコンテナ化 手動設定が必要

大まかな App Hosting の流れ

Firebase App Hosting へのデプロイ手順

前提条件

  • Firebase CLI が使用可能であること
  • Firebase プロジェクトが作成済みであること
  • Blaze プラン(従量課金制)に移行済みであること

手順概要

  1. Next.js プロジェクトの作成
  2. GitHub リポジトリの作成とプッシュ
  3. Firebase プロジェクトの準備
  4. CLI を使用したデプロイ または Firebase コンソール

詳細手順

1. Next.js プロジェクトの作成

npx create-next-app@latest
# プロジェクト名、TypeScript、ESLint、Tailwind CSS、App Routerの使用などを選択

2. GitHub リポジトリの作成とプッシュ

  • GitHub でリポジトリを作成
  • ローカルプロジェクトをプッシュ

3. Firebase プロジェクトの準備

  • Firebase コンソールでプロジェクトを作成
  • プロジェクトID をメモ {PROJECT_ID} に該当

パターン1 : CLI を使用したデプロイ

  1. バックエンドサービスの作成

    firebase apphosting:backends:create --project {PROJECT_ID} --location us-central1

  2. GitHubとの連携

    • プロンプトに従って GitHub アカウントを接続
    • 使用するリポジトリを選択
    • 自動ロールアウトの設定の有無

  3. デプロイ設定

    • アプリのルートディレクトリを指定 (通常は "/")
    • デプロイに使用するブランチを選択
    • バックエンドの名前を設定 (1-30文字の英数字)
    • 即時デプロイを選択 (Yes/No)

  4. デプロイ完了

    • デプロイが完了すると、アクセス用URLが表示される
    • URLの確認コマンド：
    firebase apphosting:backends:get --project {PROJECT_ID} {BACKEND_ID} --location us-central1

パターン2 : Firebase コンソール

  1. Firebase コンソールにアクセス または Google Cloud プロジェクト側で Firebase を有効化
    Firebase コンソール または Google Cloud API

  2. App Hosting の設定

    • 左側のメニューから構築 ->「App Hosting」を選択します。
    • 「始める」または「アプリを追加」をクリックします。
    • 「App Hosting を設定する」というモーダルが表示されます。

  3. アプリの設定

    • GitHub リポジトリを選択
    • デプロイの設定
      • ルートディレクトリーの指定
      • ライブブランチ(デプロイに使用するブランチ)の指定
      • 自動ロールアウトを行うか否かを選択 (toggle ボタン)
    • バックエンドに名前を付ける {BACKEND_ID} に該当する部分
    • Firebase ウェブアプリを作成または関連付ける
      今回は「App Hosting で新しい Firebase ウェブアプリを自動的に作成する」を選択
    • 終了してデプロイボタンを押す

追加情報

  • カスタムドメインの設定が可能

  • バックエンドサービスの削除コマンド：

    firebase apphosting:backends:delete {BACKEND_ID} --project {PROJECT_ID} --location us-central1
    • apphosting.yaml で詳細設定可能 (環境変数、シークレット等)
      アプリのルートディレクトリ直下に apphosting.yaml というファイルを作成することで、より詳細な設定が可能になります。以下は主な設定項目の解説です。
      #Cloud Run の設定
  runConfig:
      minInstances: 1      # 最小インスタンス数
      maxInstances: 2      # 最大インスタンス数
      concurrency: 80      # 1インスタンスあたりの同時リクエスト数
      cpu: 1               # CPUの割り当て (1 = 1 vCPU)
      memoryMiB: 1024      # メモリの割り当て (MiB単位)

  # 環境変数の設定
  env:
      # シークレット(機密情報)の設定
      - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        secret: APP_FIREBASE_API_KEY

      # 通常の環境変数の設定
      - variable: NEXT_PUBLIC_BASIC_SETTING
        value: false

      - variable : NEXT_PUBLIC_TXT
        value : "text sample"

トラブルシューティング

  • 問題の原因
    App Hosting のサービスアカウントに対して、Secret Manager の適切なロール付与が行われていないまま、ビルド作業を実行することが原因です。

  • 解決策
    Google Cloud の IAM 設定から、firebase-app-hosting-compute@~ のサービスアカウントに対して、以下のロールを付与してください：

日本語名 英語名
Secret Manager のシークレットアクセサー Secret Manager Secret Accessor
Secret Managerのシークレット バージョンのマネージャー Secret Manager Secret Version Manager

これらのロールを付与することで、ビルド時に Secret Manager から正しく値を取得できるようになります。

まとめ

Firebase App Hosting を使ってみて、正直驚きました！こんなに簡単にウェブアプリをデプロイできるなんて思ってもみませんでした。
新卒研修で Next.js を使ったプロジェクトを作りましたが、その成果物を公開する時に本当に役立ちました。

特に良かったポイントをいくつか挙げてみます：

  1. GitHub 連携が便利すぎる：コードをプッシュするだけで自動的にデプロイされるなんて、夢みたい！

  2. Google Cloud のパワーを実感：Cloud Build や Cloud Run 等、難しそうな名前のサービスを意識せずに使えるのがすごい。

  3. Next.js にぴったり：研修で使った Next.js をそのままデプロイできて感動しました。

  4. セキュリティも考えられている： API キー等の大事な情報の扱い方も学べて良かったです。

  5. AI も簡単に使える？：Firebase で利用可能な AI 技術も簡単に追加できるみたいで、ワクワクします！

正直、最初は「Firebase App Hosting って何？」という感じでしたが、使ってみると本当に便利でした。
ただし、まだプレビュー リリースのため、完璧ではない部分もあります。
例えば、Secret Manager の設定で少し苦戦したりしました。

一方で、これからどんどん改善されていくだろうなと思うと楽しみです。
新卒エンジニアの私でも、こんな最新技術を使えるようになるなんて、すごいことだと実感しています。
これからもっといろんなことを学んで、より複雑なアプリも作れるようになりたいです。

Firebase App Hosting を使うと、アイデアを素早くカタチにできそうで、開発がもっと楽しくなりそうです！
先輩方や他のエンジニアの皆さんにも、ぜひ試していただきたいです！

Discussion