この記事の要点

firebase-tools を npm でグローバルインストールして CLI を整える firebase login でブラウザ経由の OAuth 認証を行い、Google アカウントを CLI に紐付ける firebase init で利用機能（Hosting / Firestore / Functions / Storage / Realtime DB）を選択しプロジェクト初期化 firebase serve で開発用ローカルサーバ（既定 http://localhost:5000）を起動して動作確認 SPA にしない場合は「rewrite all urls to /index.html」の質問で No を選ぶ

前提

• Node.js（および npm）をインストール済み（未インストールならNode.jsを参照）
• Firebase のプロジェクトを Firebase コンソールで作成済み
• Firebase プロジェクトに紐付ける Google アカウントでログインできる状態

1. firebase-tools のインストール

Firebase CLI（firebase コマンド）は firebase-tools という npm パッケージで提供されます。グローバルインストールしておくと、どのディレクトリからでも実行できます。

# グローバルインストール
npm install -g firebase-tools

# バージョン確認
firebase --version

権限エラー（EACCES）が出る場合は、sudo を付けるか、Node のバージョン管理ツール（nvm 等）配下に Node を入れて npm のグローバル領域をユーザ権限にしておくと安全です。

2. Firebase へのログイン認証

Firebase コンソールでプロジェクトを作成した Google アカウントと、CLI を結び付ける必要があります。

firebase login

コマンドを実行するとブラウザが自動で開き、Google の同意画面が表示されます。サインインして許可するとターミナルに Success! Logged in as ... と出ます。

ヘッドレス環境（SSH 越しの VM など）でブラウザが開けないときは firebase login --no-localhost を使い、表示された URL を別端末のブラウザに貼り付けて認可コードを取得します。

3. プロジェクトの初期化（firebase init）

アプリを作りたい任意のフォルダに移動して firebase init を実行します。対話的に複数の質問が出るので、必要な機能だけ選びます。

mkdir my-firebase-app && cd my-firebase-app
firebase init

3-1. 利用する機能の選択

スペースキーで選択 / 解除、Enter で確定です。

? Which Firebase features do you want to set up for this directory?
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 (*) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules

3-2. プロジェクトの紐付け

「Use an existing project」を選び、Firebase コンソールで作成済みのプロジェクトを選択します。

3-3. Functions を選んだ場合の言語選択

? What language would you like to use to write Cloud Functions?
> JavaScript
  TypeScript

型安全性を重視するなら TypeScript、シンプルに始めたいなら JavaScript を選びます。

3-4. SPA（Single Page Application）の設定

Hosting を選択した場合、最後に SPA 用の rewrite を作るか質問されます。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Yes にすると React / Vue / Angular のような SPA 向けに、すべての URL を /index.html に書き換える rewrites 設定が firebase.json に追加されます。SPA でない静的サイトなら No を選びます。

4. 生成されるファイル構成

ファイル / フォルダ	役割
firebase.json	Hosting / Functions などのデプロイ設定
.firebaserc	関連付けた Firebase プロジェクト ID
public/	Hosting で配信される静的ファイル（index.html など）
functions/	Cloud Functions のソース（選択時のみ）
firestore.rules	Firestore のセキュリティルール（選択時のみ）
storage.rules	Cloud Storage のセキュリティルール（選択時のみ）

5. ローカルサーバの起動（firebase serve）

初期化後、開発用のローカルサーバを起動して動作確認します。

firebase serve

ブラウザで http://localhost:5000 にアクセスし、Firebase のスタートページ（または自分の public/index.html）が表示されれば成功です。

ポート指定

# Hosting だけを 8080 番で起動
firebase serve --only hosting --port 8080

# Functions と一緒にローカルエミュレートする場合
firebase serve --only hosting,functions

firebase serve と firebase emulators の違い

コマンド	用途
firebase serve	Hosting と Functions の簡易プレビュー
firebase emulators:start	Firestore / Auth / Database / Storage / Functions / Hosting を統合エミュレートする本命の開発環境

新規プロジェクトでは原則 emulators:start を使うのが推奨です。firebase serve は Hosting だけ確認したいときの最速手段として今も有用です。

よくあるエラーと対処

症状	原因 / 対処
command not found: firebase	グローバルインストール失敗 / PATH 未通し。npm root -g の bin を PATH に追加
Error: HTTP Error: 401, Request had invalid authentication credentials	トークン切れ。firebase logout → firebase login で再認証
Failed to list Firebase projects	違う Google アカウントで login 済み。firebase login:list で確認、firebase logout → 正しいアカウントで再ログイン
EADDRINUSE :::5000	5000 番が macOS の AirPlay 等で使用中。--port 5001 で回避
Hosting の変更がブラウザに反映されない	Service Worker / ブラウザキャッシュ。シークレットウィンドウや DevTools の「Disable cache」で確認

次にやること

• public/index.html を編集して、自分のアプリの中身を作る
• firebase deploy --only hosting で本番 Firebase Hosting にデプロイする
• Firestore や Authentication を使うなら SDK を npm i firebase で導入し、初期化コードを public/index.html に書く

関連

• Firebase — 親カテゴリ
• Node.js — CLI の前提