🔥

Firebase Hosting入門：GitHub連携で自動デプロイ！何も知らない状態からHello Worldまで

2026/01/28に公開

 はじめに（この記事でわかること）この記事は、Firebase Hostingを一度も使ったことがない方向けの実践ガイドです。

筆者自身も初めてFirebase Hostingに触れる状態から、GitHub連携による自動デプロイ環境を構築するまでの道のりを記録しました。

※個人的なチャレンジ企画でちょっと触る機会が出てきたこともあり。
この記事のゴール
Firebase Hostingの基本概念を理解する
Firebase CLIを使ってプロジェクトをセットアップする
GitHubと連携して、git pushで自動デプロイする仕組みを作る
簡単なHTMLページをデプロイして、ブラウザで表示できるようにする
よくあるエラーと対処法を知る
到達イメージ
1. ローカルでindex.htmlを編集
2. git push origin main
3. GitHub Actionsが自動実行（1〜2分）
4. https://your-project.web.app/ に自動デプロイ完了
→ ブラウザで「Hello, Firebase Hosting!」と表示される
作業時間の目安は 30〜60分 です（環境構築の状況で前後します）。

 想定読者Webサイトを公開したいが、どのホスティングサービスを使うか迷っている方
Firebase Hostingの名前は聞いたことがあるが、使ったことはない方
「とりあえず何か公開してみたい」という気持ちで始める方
Node.jsとnpmの基本的な使い方は知っている（またはコマンドをそのまま実行できる）方
GitHubの基本（リポジトリ作成、push）を触ったことがある方
!この記事は「静的HTML（ビルド無し）」で説明します。React/Vueなどビルドが必要な場合は、途中で出てくる補足を参考に読み替えてください。

 Firebase HostingとはFirebase Hostingは、Googleが提供する静的コンテンツ向けホスティングサービスです。

 主な特徴1. 静的サイトに特化
HTML、CSS、JavaScript、画像などの静的ファイルを配信
React、Vue、Angularなどのビルド済みSPA（Single Page Application）にも対応
サーバーサイドの処理は含まない（Cloud Functionsと組み合わせれば可能）
2. 無料枠が充実
10 GB/月のストレージ
360 MB/日の転送量
無料SSL証明書（HTTPS対応）
カスタムドメイン対応
3. CDNによる高速配信
世界中のエッジロケーションから配信
自動キャッシュ
レスポンスタイムが速い
4. デプロイが簡単
CLIコマンド1つでデプロイ完了
バージョン管理（過去のデプロイにロールバック可能）
プレビューURL発行機能

 他のホスティングサービスとの違い

サービス
無料枠
CDN
デプロイ方法
用途


Firebase Hosting
10GB/月
あり
CLI
静的サイト、SPA

GitHub Pages
1GB
あり
Git push
静的サイト

Netlify
100GB/月
あり
Git連携
静的サイト、SPA

Vercel
100GB/月
あり
Git連携
Next.js、SPA

AWS S3 + CloudFront
従量課金
別途設定
AWS CLI
静的サイト

Firebase Hostingは、Firebaseの他のサービス（Authentication、Firestore、Functionsなど）と統合しやすい点が強みです。

 前提条件以下が揃っていることを確認してください。

 必須
Googleアカウント：FirebaseはGoogle傘下のサービスです

GitHubアカウント：GitHub連携による自動デプロイに使用

Node.js（推奨: v20 または v22）と npm：Firebase CLI（firebase-tools）の実行に必要

Git：バージョン管理とGitHubへのpushに必要

ブラウザ：Google Chrome、Firefox、Safariなど

ターミナル（コマンドライン）：macOSならTerminal、WindowsならPowerShellなど
!Firebase関連ツールはNode.jsのサポート範囲が変わることがあります。2026年時点では Node.js 20/22 が公式にサポートされており、Node.js 18 は非推奨になっています。

 バージョン確認node --version
# v20.x または v22.x が推奨（例: v22.11.0）

npm --version
# Node同梱のnpmでOK（数字が表示されればOK）

git --version
# 2.x 系ならOK（例: 2.45.0）
もしNode.jsが入っていない場合は、公式サイトからインストールしてください。

Gitが入っていない場合は、Git公式サイトからインストールしてください。

 セットアップ手順（全9ステップ）

Firebase CLIインストール → Firebase/GitHubプロジェクト作成 → 初期化（GitHub連携） → ファイル作成 → Git push → 自動デプロイの流れ

 ステップ1：Firebase CLIのインストールまずはFirebase CLIをグローバルインストールします。
npm install -g firebase-tools
インストール確認
firebase --version
# 13.0.0 以上が表示されればOK

 ステップ2：FirebaseにログインCLIからGoogleアカウントでログインします。
firebase login
実行すると、ブラウザが自動で開き、Googleログイン画面が表示されます。
ログイン画面で行うこと
Googleアカウントを選択
「Firebaseがアカウントにアクセスすることを許可しますか？」→ 許可
「ログインに成功しました」と表示されたらブラウザを閉じる
ターミナルに戻ると
✔ Success! Logged in as your-email@example.com
と表示されます。
ログイン確認
firebase projects:list
このコマンドで、アカウントに紐づくFirebaseプロジェクト一覧が表示されます（初めての場合は空）。

 ステップ3：GitHubリポジトリの作成Firebase HostingとGitHub連携するため、先にGitHubでリポジトリを作成します。
GitHubでの操作

GitHub にログイン
右上の「+」→「New repository」をクリック
リポジトリ名を入力（例：my-firebase-app）
「Public」または「Private」を選択（どちらでもOK）
「Add a README file」のチェックは外す（後で作成するため）
「Create repository」をクリック
!このあとFirebase CLIがGitHub連携をセットアップします。CLIがGitHubのSecretsを書き込める必要があるので、対象リポジトリに対して admin 権限が必要です（Organization配下の場合も要注意）。
リポジトリURLをメモ
作成完了後、表示されるリポジトリURL（例：https://github.com/your-username/my-firebase-app）をメモしておいてください。


New repository → リポジトリ名入力 → Create repositoryの流れ

 ステップ4：Firebaseプロジェクトの作成Firebase Consoleでプロジェクトを作成します。
Webブラウザでの操作

Firebase Console にアクセス
「プロジェクトを追加」をクリック
プロジェクト名を入力（例：my-first-hosting）
「続行」をクリック
Google アナリティクスの設定（任意、スキップ可）→ 「プロジェクトを作成」
作成完了まで待つ（約30秒）
プロジェクトIDを確認
作成完了後、プロジェクトのダッシュボードが表示されます。画面上部に表示される プロジェクトID（例：my-first-hosting-abc123）をメモしておいてください。


プロジェクト名を入力 → Google アナリティクス設定（任意）→ 作成完了の流れ

 ステップ5：ローカルプロジェクトの初期化（GitHub連携あり）作業用ディレクトリを作成し、Firebase Hostingを初期化します。
# 作業用ディレクトリを作成
mkdir my-firebase-app
cd my-firebase-app

# Firebaseプロジェクトを初期化
firebase init hosting
firebase init hosting を実行すると、対話形式でセットアップが進みます。
質問と回答の流れ（Part 1：Firebase設定）
? Please select an option:
→ Use an existing project（既存のプロジェクトを使用）を選択

? Select a default Firebase project for this directory:
→ 先ほど作成した my-first-hosting-abc123 を選択

? What do you want to use as your public directory?
→ public（デフォルトのまま Enter）

? Configure as a single-page app (rewrite all urls to /index.html)?
→ No（今回は静的HTMLなので）

? Set up automatic builds and deploys with GitHub?
→ Yes（GitHub連携を有効化）★ここが重要★
質問と回答の流れ（Part 2：GitHub連携）
Yes を選ぶと、ブラウザが開いてGitHubへのログインを求められます。
1. ブラウザでGitHubにログイン
2. Firebase GitHub Appのインストール許可を求められる
3. 「Authorize firebase-cli-github」をクリック
4. ターミナルに戻る
ターミナルで続きの質問に答えます。
? For which GitHub repository would you like to set up a GitHub workflow?
→ your-username/my-firebase-app（ステップ3で作成したリポジトリを入力）

? Set up the workflow to run a build script before every deploy?
→ No（今回は静的HTMLなので）

? Set up automatic deployment to your site's live channel when a PR is merged?
→ Yes（mainブランチマージ時に自動デプロイ）

? What is the name of the GitHub branch associated with your site's live channel?
→ main（デフォルトのまま Enter）

? File public/404.html already exists. Overwrite?
→ No

? File public/index.html already exists. Overwrite?
→ No
初期化完了
✔ Firebase initialization complete!
✔ GitHub workflow file created at .github/workflows/firebase-hosting-merge.yml
と表示されれば成功です。
生成されたファイルを確認
ls -la
以下のファイル・ディレクトリが生成されています。
.firebaserc                    # プロジェクトIDの設定
firebase.json                  # Hosting設定ファイル
.github/
  └── workflows/
      ├── firebase-hosting-merge.yml  # mainマージ時の自動デプロイ設定
      └── firebase-hosting-pull-request.yml  # PR作成時のプレビュー設定（任意）
public/                        # デプロイ対象のディレクトリ
  ├── index.html               # デフォルトのトップページ
  └── 404.html                 # 404エラーページ
重要：GitHub Actionsワークフローファイル
.github/workflows/firebase-hosting-merge.yml が自動生成されています。このファイルには、mainブランチにマージされた時に自動的にFirebase Hostingへデプロイする設定が記述されています。


firebase init hosting でGitHub連携を選ぶと、ワークフローファイルが自動生成される

 ステップ6：Hello Worldページの作成デフォルトの public/index.html を編集して、シンプルなHello Worldページにします。
# エディタで編集（好きなエディタでOK）
nano public/index.html
# または
code public/index.html
内容を以下に置き換え
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Firebase Hosting</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    .container {
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    p {
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🔥 Hello, Firebase Hosting!</h1>
    <p>あなたの最初のFirebaseアプリがデプロイされました</p>
  </div>
</body>
</html>
ローカルで確認（任意）
デプロイ前にローカルでプレビューできます。
firebase serve
実行後、http://localhost:5000 にアクセスすると、ブラウザで確認できます。確認できたら Ctrl + C で終了します。

 ステップ7：GitリポジトリとしてGitHubにpushここまでで作成したファイルをGitリポジトリとして初期化し、GitHubにpushします。
# Gitリポジトリとして初期化
git init

# 全てのファイルをステージング
git add .

# 初回コミット
git commit -m "Initial commit: Firebase Hosting setup"

# GitHubリポジトリをリモートとして追加
git remote add origin https://github.com/your-username/my-firebase-app.git

# mainブランチに変更（GitHubのデフォルトはmain）
git branch -M main

# GitHubにpush
git push -u origin main
pushが成功したか確認
GitHubのリポジトリページ（https://github.com/your-username/my-firebase-app）をブラウザで開き、ファイルがアップロードされていることを確認します。
重要なファイルの確認

.github/workflows/firebase-hosting-merge.yml が存在すること

public/index.html が存在すること

.firebaserc と firebase.json が存在すること


git push → GitHub Actions起動 → Firebase Hostingへ自動デプロイの流れ

 ステップ8：GitHub Actionsによる自動デプロイを確認GitHubにpushすると、GitHub Actionsが自動的に起動してFirebase Hostingへデプロイします。
GitHub Actionsの実行を確認
GitHubリポジトリページの「Actions」タブをクリック
「Deploy to Firebase Hosting on merge」ワークフローが実行中であることを確認
緑のチェックマーク（✓）が表示されれば成功
実行時間

初回は約1〜2分かかります。
ワークフローの詳細を確認
ワークフローをクリックすると、以下のステップが実行されていることがわかります。
1. Check out code（コードのチェックアウト）
2. Deploy to Firebase Hosting（Firebase Hostingへデプロイ）
デプロイが完了すると、コメント欄に Hosting URL が表示されます。
✅ Deploy complete!
Hosting URL: https://my-first-hosting-abc123.web.app


GitHub Actions実行中 → 成功（緑チェック）→ Hosting URL表示の流れ

 ステップ9：ブラウザで確認GitHub Actionsの実行完了後、表示された Hosting URL（例：https://my-first-hosting-abc123.web.app）をブラウザで開きます。
期待する表示
🔥 Hello, Firebase Hosting!
あなたの最初のFirebaseアプリがデプロイされました
この画面が表示されれば成功です！


「Hello, Firebase Hosting!」の画面が表示されるはずです！

 GitHub連携のメリット今回のセットアップで、以下のメリットが得られます。
1. 自動デプロイ
mainブランチにマージするだけで自動的にデプロイ

firebase deploy コマンドを手動で実行する必要なし
2. プレビューURL（PRごと）
プルリクエストを作成すると、プレビューURLが自動発行される
本番環境に影響を与えずに変更内容を確認できる
3. バージョン管理
GitHubでコードの履歴を管理
問題があれば簡単にロールバック可能
更新の流れ（今後）
# ファイルを編集
nano public/index.html

# 変更をコミット
git add .
git commit -m "Update homepage"

# GitHubにpush
git push origin main

# → GitHub Actionsが自動的にデプロイ（1〜2分）

 ハマりどころ（よくあるエラーと対処法）
 エラー1：firebase login で「Error: An unexpected error has occurred」症状

ログイン時にブラウザが開かず、エラーメッセージが表示される。
原因
ファイアウォールやプロキシがブラウザの自動起動を妨げている
ブラウザのデフォルト設定が正しくない
対処法
ブラウザを手動で開く方式でログインします。
firebase login --no-localhost
実行すると、URLが表示されるので、手動でブラウザにコピー＆ペーストしてログインします。

 エラー2：firebase init で「No existing project」と表示される症状

初期化時に「既存のプロジェクトが見つかりません」と表示される。
原因
Firebase Consoleでプロジェクトを作成していない
ログインしているGoogleアカウントが異なる
対処法
Firebase Consoleでプロジェクトを作成済みか確認
正しいアカウントでログインしているか確認
# ログアウトして再ログイン
firebase logout
firebase login

 エラー3：firebase deploy で「Error: HTTP Error: 403, The caller does not have permission」症状

デプロイ時に403エラーが表示される。
原因
ログインしているアカウントがプロジェクトへのアクセス権を持っていない
プロジェクトIDが間違っている
対処法

.firebaserc ファイルを確認
cat .firebaserc
表示されるプロジェクトIDが正しいか確認します。
{
  "projects": {
    "default": "my-first-hosting-abc123"
  }
}
Firebase Consoleでアクセス権を確認
Firebase Console → プロジェクト設定 → ユーザーと権限 → 自分のアカウントが「編集者」または「オーナー」になっているか確認

 エラー4：デプロイ後、ブラウザで古いコンテンツが表示される症状

HTMLを更新してデプロイしたのに、ブラウザで古い内容が表示される。
原因

ブラウザのキャッシュが残っている。
対処法
以下のいずれかで強制リロードします。

Windows/Linux：Ctrl + Shift + R

macOS：Cmd + Shift + R
または、シークレットモード（プライベートブラウジング）で開きます。

 エラー5：public ディレクトリ以外をデプロイしたい症状

デフォルトの public/ ではなく、dist/ や build/ をデプロイしたい。
対処法
firebase.json を編集します。
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
"public": "dist" の部分を、デプロイしたいディレクトリ名に変更します。

 エラー6：GitHub Actionsが失敗する「403 Forbidden」症状

GitHub Actionsの実行ログに「Error: HTTP Error: 403」と表示される。
原因

GitHub ActionsがFirebase Hostingにアクセスする権限を持っていない。
対処法
Firebase Consoleでサービスアカウントキーを確認
Firebase Console → プロジェクト設定 → サービスアカウント → 「新しい秘密鍵の生成」
GitHubリポジトリのSecretsを確認
GitHub リポジトリ → Settings → Secrets and variables → Actions
FIREBASE_SERVICE_ACCOUNT_XXXX というシークレットが登録されているか確認します。
もし登録されていない場合
# firebase init hosting を再実行
firebase init hosting:github
再度GitHub連携を設定すると、自動的にシークレットが登録されます。
!サービスアカウント鍵（JSON）をローカルに保存して配布するのは事故の元です。基本は firebase init hosting:github に任せて、GitHub Secretsで管理するのが安全です。

 エラー7：git pushで「permission denied」症状

git push 実行時に「Permission denied (publickey)」と表示される。
原因

GitHubへのSSH接続が設定されていない、またはHTTPS接続の認証情報が不足している。
対処法
方法1：HTTPS接続を使う（推奨・簡単）
# リモートURLをHTTPSに変更
git remote set-url origin https://github.com/your-username/my-firebase-app.git

# push時にGitHubのユーザー名とトークンを入力
git push -u origin main
GitHubのパスワードではなく、Personal Access Tokenを使用する必要があります。
Personal Access Tokenの作成方法
GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
「Generate new token」
「repo」にチェックを入れる
「Generate token」
表示されたトークンをコピー（このタイミングでしか見られません）
方法2：SSH接続を設定する
# SSH鍵を生成
ssh-keygen -t ed25519 -C "your-email@example.com"

# 公開鍵をGitHubに登録
cat ~/.ssh/id_ed25519.pub
# 出力された内容をGitHub → Settings → SSH and GPG keys → New SSH key に登録

# リモートURLをSSHに変更
git remote set-url origin git@github.com:your-username/my-firebase-app.git

 エラー8：GitHub Actionsが起動しない症状

git push しても、GitHub Actionsが実行されない。
原因
ワークフローファイルが正しく配置されていない
mainブランチ以外にpushしている
GitHub Actionsが無効化されている
対処法
ワークフローファイルの場所を確認
ls -la .github/workflows/
# firebase-hosting-merge.yml が存在するか確認
ブランチ名を確認
git branch
# * main と表示されればOK
GitHub ActionsがONになっているか確認
GitHub リポジトリ → Settings → Actions → General → 「Allow all actions and reusable workflows」が選択されているか確認

 次のステップ（発展）Hello Worldのデプロイに成功したら、以下のステップに進めます。

 1. カスタムドメインの設定Firebase Hostingは、独自ドメイン（例：www.example.com）を無料で設定できます。
Firebase Console → Hosting → ドメインを追加
DNS設定でAレコード/CNAMEレコードを追加
SSL証明書の自動発行（無料）

 2. SPAフレームワークとの統合React、Vue、Angularなどのビルド済みアプリをデプロイできます。
# Reactアプリの例
npm run build
# buildディレクトリが生成される

# firebase.json の public を "build" に変更
firebase deploy

 3. Cloud Functionsとの連携サーバーサイド処理が必要な場合、Cloud Functionsと組み合わせます。
firebase init functions

 4. バージョン管理とロールバックFirebase Hostingは、過去のデプロイを自動で保存します。
Firebase Console → Hosting → リリース履歴から、過去のバージョンにロールバック可能です。

 5. カスタムビルドコマンドの追加React、Vueなどのフレームワークを使う場合、ビルドコマンドを追加できます。
.github/workflows/firebase-hosting-merge.yml を編集：
- run: npm ci && npm run build

 まとめこの記事では、Firebase HostingとGitHub連携を使って、自動デプロイ環境を構築する方法を扱いました。
達成したこと
Firebase CLIのインストールとログイン
GitHubリポジトリの作成
Firebaseプロジェクトの作成
ローカルプロジェクトの初期化（GitHub連携あり）
HTMLファイルの作成
GitHubへのpushによる自動デプロイ
ブラウザでの表示確認
ポイントの再確認
Firebase Hostingは静的サイト向けのホスティングサービス
GitHub連携によりgit pushで自動デプロイが可能
無料枠が充実（10GB/月）
HTTPS対応・CDN配信が標準装備
PRごとにプレビューURLが発行される
よくあるハマりどころ
ログインエラー → --no-localhost オプション
プロジェクトが見つからない → アカウント確認
403エラー（Firebase） → アクセス権確認
403エラー（GitHub Actions） → サービスアカウント確認
git pushエラー → Personal Access Token使用
GitHub Actionsが起動しない → ワークフローファイル確認
これで、Firebase HostingとGitHub連携による自動デプロイ環境の構築は完了です。次は、実際のアプリケーション（React、Vueなど）をデプロイしてみましょう。
私も引き続きアプリを作りながら記事に出来る部分は記事にしていきます！

 参考リンクFirebase Hosting公式ドキュメント
Firebase CLI リファレンス
Firebase Console
Firebase料金プラン
GitHub Actions公式ドキュメント
Firebase HostingとGitHub連携の公式ガイド

Firebase Hosting入門：GitHub連携で自動デプロイ！何も知らない状態からHello Worldまで

はじめに（この記事でわかること）

想定読者

Firebase Hostingとは

主な特徴

他のホスティングサービスとの違い

前提条件

必須

バージョン確認

セットアップ手順（全9ステップ）

ステップ1：Firebase CLIのインストール

ステップ2：Firebaseにログイン

ステップ3：GitHubリポジトリの作成

ステップ4：Firebaseプロジェクトの作成

ステップ5：ローカルプロジェクトの初期化（GitHub連携あり）

ステップ6：Hello Worldページの作成

ステップ7：GitリポジトリとしてGitHubにpush

ステップ8：GitHub Actionsによる自動デプロイを確認

ステップ9：ブラウザで確認

GitHub連携のメリット

ハマりどころ（よくあるエラーと対処法）

エラー2：`firebase init` で「No existing project」と表示される

エラー3：`firebase deploy` で「Error: HTTP Error: 403, The caller does not have permission」

エラー4：デプロイ後、ブラウザで古いコンテンツが表示される

エラー5：`public` ディレクトリ以外をデプロイしたい

エラー6：GitHub Actionsが失敗する「403 Forbidden」

エラー7：git pushで「permission denied」

エラー8：GitHub Actionsが起動しない

次のステップ（発展）

1. カスタムドメインの設定

2. SPAフレームワークとの統合

3. Cloud Functionsとの連携

4. バージョン管理とロールバック

5. カスタムビルドコマンドの追加

まとめ

参考リンク

Discussion

サービス	無料枠	CDN	デプロイ方法	用途
Firebase Hosting	10GB/月	あり	CLI	静的サイト、SPA
GitHub Pages	1GB	あり	Git push	静的サイト
Netlify	100GB/月	あり	Git連携	静的サイト、SPA
Vercel	100GB/月	あり	Git連携	Next.js、SPA
AWS S3 + CloudFront	従量課金	別途設定	AWS CLI	静的サイト