Firebase HostingへのデプロイとCI/CDパイプライン構築で直面したエラーと解決方法

導入

Firebase HostingへのデプロイとCI/CDパイプライン構築は、モダンなWeb開発において欠かせないプロセスです。しかし、初めて構築する際や運用を進める中で、予期しないエラーに直面することは珍しくありません。

本記事では、実際のプロダクト開発「AI編集長」の構築過程で遭遇した、Firebase HostingとGitLab CI/CDに関する一般的なエラーと、その解決方法を具体的に紹介します。これらの知見は、同様の環境で開発を進めるチームにとって、貴重な時間節約と開発効率の向上に役立つでしょう。

前提条件・必要な準備

本記事を読み進める前に、以下の条件を満たしていることを確認してください：

• Git経験: Gitを使用したチームでの開発経験がある方向け
• Firebase知識: Firebase プロジェクトの基本的な設定が完了している
• CI/CD基礎: パイプラインの概念を理解している
• 環境: Node.js、npm、Firebase CLIがインストール済み
• アクセス権: GitLabリポジトリとFirebaseプロジェクトへの管理者アクセス権

これらの準備ができていない場合は、公式ドキュメントで事前セットアップを完了してください。

Firebase Hostingデプロイの基本ステップ

デプロイの基本的なフローを理解することで、エラーの原因特定が容易になります。

ステップ1: 依存関係のインストール

npm install

プロジェクトルートで依存パッケージをインストールします。package.jsonに記載されたすべてのライブラリがダウンロードされます。

ステップ2: ビルド実行

npm run build

Reactプロジェクトの場合、このコマンドで本番用の最適化されたバンドルがbuild/ディレクトリに生成されます。

ステップ3: Firebase Hostingへのデプロイ

firebase deploy --only hosting

ビルド出力をFirebase Hostingにアップロードします。

一般的なエラーと解決方法

エラー1: Docker内でファイル削除時の権限エラー

症状: Permission deniedエラーでファイルやディレクトリが削除できない

原因: Docker内で作成したファイルやディレクトリの所有ユーザーと、削除しようとしているユーザーが異なるため

解決方法:

# Dockerfileで明示的にユーザーを指定
RUN useradd -m -u 1000 builder
USER builder

あるいは、削除時に適切なユーザー権限で実行：

docker exec -u root <container_id> rm -rf <directory>

パイプライン内では、ビルドステップで生成されたファイルの所有権を事前に統一することが重要です。

エラー2: GitLab CI/CDでのアクセストークン設定の混乱

症状: パイプラインが認証エラーで失敗する

原因: Firebase CLIに必要な認証情報の渡し方が不明確

解決方法:

1. GitLab CIの変数設定画面を開く

   • リポジトリ設定 → CI/CD → 変数

2. Firebase認証トークンを登録

   • 変数名: FIREBASE_TOKEN
   • 値: firebase login:ciで生成されたトークン
   • 保護された変数として設定

3. .gitlab-ci.ymlで変数を使用

deploy:
  stage: deploy
  script:
    - npm install
    - npm run build
    - firebase deploy --token $FIREBASE_TOKEN --only hosting
  only:
    - main

パイプラインのジョブ内では、$FIREBASE_TOKENが自動的に展開され、認証情報が安全に渡されます。

エラー3: Firebase Authenticationでのログイン機能の不動作

症状: Firebase Hostingにデプロイ後、ログイン機能が動作しない

原因: Firebase Authenticationでデプロイドメインが許可リストに追加されていない

解決方法:

1. Firebase Consoleにアクセス

   • プロジェクト → Authentication → Settings

2. 認可済みドメインにデプロイドメインを追加

   • example.firebaseapp.com
   • カスタムドメイン（例: example.com）

// コード例: Firebase認証初期化
import { initializeAuth } from "firebase/auth";
import { getApp } from "firebase/app";

const auth = initializeAuth(getApp());
// ドメイン設定がないと、ここでエラーが発生する

3. キャッシュをクリア
   • ブラウザのキャッシュを削除してから再度テスト

完全なGitLab CI/CDパイプライン設定例

実運用に耐える.gitlab-ci.ymlの例を示します：

stages:
  - build
  - deploy

build:
  stage: build
  image: node:18
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - build/
    expire_in: 1 hour
  only:
    - main
    - develop

deploy_staging:
  stage: deploy
  image: node:18
  before_script:
    - npm install -g firebase-tools
  script:
    - firebase deploy --token $FIREBASE_TOKEN --only hosting:staging
  dependencies:
    - build
  only:
    - develop
  environment:
    name: staging
    url: https://staging-example.firebaseapp.com

deploy_production:
  stage: deploy
  image: node:18
  before_script:
    - npm install -g firebase-tools
  script:
    - firebase deploy --token $FIREBASE_TOKEN --only hosting:production
  dependencies:
    - build
  only:
    - main
  environment:
    name: production
    url: https://example.firebaseapp.com
  when: manual

トラブルシューティングのチェックリスト

デプロイが失敗した場合、以下の順序で確認してください：

• npm run buildがローカルで成功しているか
• Firebase CLIがインストールされているか
• $FIREBASE_TOKENが正しく設定されているか
• Firebase Authenticationで対象ドメインが許可されているか
• GitLab CI/CDのパイプラインログに具体的なエラーメッセージがないか
• Firebaseプロジェクトの課金が有効か
• .firebasercファイルが正しく設定されているか

まとめ・結論

Firebase HostingへのデプロイとCI/CD構築は、正しい理解と適切な設定があれば、堅牢で効率的なデプロイメントパイプラインを実現できます。

本記事で紹介した3つのエラーと解決方法は、実際のプロダクト開発で遭遇する一般的な課題です。特に、Docker環境での権限管理、CI/CD変数の正しい設定、Firebase Authenticationのドメイン設定は、デプロイ失敗の大部分の原因となります。

これらの知見を活用することで、開発チームはデプロイプロセスに費やす時間を削減し、より本質的な機能開発に注力できるようになります。

読者へのコール・トゥ・アクション

本記事の内容が参考になった場合は、以下のアクションをお勧めします：

• チーム内での共有: 開発チームメンバーに本記事を共有し、デプロイトラブルの事前防止に役立ててください
• ドキュメント化: 組織固有の設定や追加の解決方法を、チームのwikiやドキュメントに記録してください
• フィードバック: 記事の内容や追加すべき情報があれば、コメントやIssueで教えてください

Firebase Hostingでの安定したデプロイが実現できることを願っています。質問や追加の相談があれば、お気軽にお問い合わせください。