「ローカルで作ったWebサイトを、インターネット上で公開したい！」
そんなときに便利なのが Firebase Hosting。
この記事では、Firebase Hosting を使って HTML/CSS/JS などの静的サイトを公開する手順を、超わかりやすく解説していきます！

FirebaseはGoogleが提供する包括的なBaaSプラットフォームです。機能の詳細や導入事例などは、下記の公式ページからご確認いただけます。
👉 Firebase公式サイト

Step 1. Firebase CLIをインストールしよう

まず最初に、Firebase CLI（コマンドラインツール）をインストールする必要があります。これはFirebaseを操作するための便利ツールです。

✅ 実行コマンド

npm install -g firebase-tools

• -g は「グローバルインストール」の意味です。どのプロジェクトでもCLIが使えるようになります。

• npmが使えない方は、Node.js公式サイトからNode.jsをインストールしておきましょう。npmも一緒にインストールされます。

Step 2. プロジェクトの初期化をしよう

続いて、Firebase プロジェクトを初期化していきます。

✅ 手順

1. ターミナル（コマンドプロンプト）を開きます。

2. Webサイトのプロジェクトフォルダに移動します。

3. Google アカウントでログイン

4. Firebaseプロジェクトの初期化

✅ firebase init のときに聞かれること

• 「どの機能を使いますか？」 → Hosting をスペースキーで選択（↑ ↓キーで移動）

• 「既存のプロジェクトを使うか、新しく作るか？」 → 既存のFirebaseプロジェクトを選ぶ or 新規作成

• 「どのフォルダを公開しますか？」 → public（変更可能）

• 「index.html を上書きしますか？」 → 初回なら Y でOK（すでにファイルがあるなら N）

Step 3. 静的ファイルを配置しよう

初期化が終わると、プロジェクトフォルダに public フォルダが生成されます。

この中に、index.html、CSS、JavaScriptファイルなどを配置します。

my-project/ 
├── public/ 
│ ├── index.html 
│ ├── style.css 
│ └── main.js 
└── firebase.json

Step 4. Firebase Hosting へデプロイしよう！

サイトの準備ができたら、いよいよ公開！

✅ 実行コマンド

firebase deploy

コマンドを実行すると、数秒でサイトがFirebaseにアップロードされます。完了後に表示されるURLをクリックすると、あなたのサイトが世界に公開されています！

Firebaseコンソールってなに？

Firebaseコンソールは、Firebaseを使ったアプリの設定・管理ができる Webベースのダッシュボードです。以下のような機能が利用できます：

主な機能一覧

1. プロジェクト管理

   • 複数のアプリを1つのプロジェクトで一括管理可能。

2. アプリの登録

   • iOS/Android/Webアプリを簡単に追加。

3. 主要サービスの利用

   • Authentication（認証）

   • Firestore / Realtime Database（DB）

   • Storage（ファイル管理）

   • Hosting（Webサイト公開）

   • Cloud Messaging（プッシュ通知）など

4. セキュリティルールの設定

   • データへのアクセス制限を細かく制御可能。

5. アナリティクスやクラッシュレポート

   • 利用状況やエラー情報を一元管理。

Firebaseは、単にホスティングだけでなく、アプリの運用・分析・拡張において非常に頼もしい存在です。まずは無料で試してみて、自分の開発スタイルに合うか確かめてみましょう！

もっと詳しくFirebaseについて知りたい方は、公式サイトもチェックしてみてください！
👉 Firebase公式サイト