【徹底解説】Firebase Hostingの使い方｜プロジェクト作成・アプリ登録・WEBサイトの公開と停止を実例で分かりやすく解説

「簡単なWebサイトをサクッと公開したいけど、サーバーやドメイン設定が複雑で挫折しそう…」

そうお悩みではありませんか？

Googleが提供するFirebase Hostingを使えば、わずか数分で無料かつ安全にウェブサイトをインターネットに公開できます。複雑なサーバー管理は一切不要です。

本記事は、Webアプリ開発者からブログ初心者まで、すべての方を対象に、Firebase Hostingの利用手順を「プロジェクト作成」から「アプリ登録」、「Webサイトのデプロイ（公開）」、さらには「公開中止」まで、具体的なコードと実例でステップ・バイ・ステップで解説します。

この記事を読めば、あなたも今日からWebサイト公開の自動化や運用を迷わず進められるようになります。最速でWebサイトを公開する手順を見ていきましょう！

コンソールに入る
プロジェクトを作成する
アプリを追加する
超簡単なWEBサイトの公開
公開の停止
停止後に再度公開したい場合

コンソールに入る

まずは、Firebaseの公式サイトにアクセスし、コンソールに入ります。

なお、コンソール（Firebase Console）とは、Firebaseのサービスを管理・設定するためのオンライン上の管理画面のことです。

以下の「Get started in console」を選択します。

Firebase Studioとは何か？

console以外にもう一つ「Firebase Studio」とう選択肢があります。

Firebase Studioとは、2025年に発表されたAI統合型のクラウドベース開発環境で、ブラウザ上からフルスタックアプリのプロトタイプ作成・開発・テスト・デプロイまでをワンストップで行えるツールです。

コードを書かずに構築・デプロイできる部分が多いですが、高度な機能には不向きであったり、解説記事がまだ少ない傾向があります。

プロジェクトを作成する

Firebase プロジェクトを設定して開始を選択します。

プロジェクト名をつけて続行します。

GeminiやGoogle Analyticsを使用するか聞かれるので好きに設定します（いちよ入れておくことを推奨します）

アプリを追加する

アプリの登録

プロジェクトを作成したら、そのプロジェクトで利用するアプリを追加します。

例えば、WEB用、iOS用、Android用などそれぞれ作成する場合に使います。これらのアプリは親となるプロジェクトが提供する同じデータベース、同じユーザー認証システムを共有して利用することができます。

アプリの種類を以下の５つから選択します。

アプリの種類

iOS
iPhoneやiPadで動作する、SwiftまたはObjective-Cで開発されたアプリ。
Android
Androidスマートフォンやタブレットで動作する、KotlinまたはJavaで開発されたアプリ。
WEB
ブラウザ上で実行されるアプリケーション。Vanilla JavaScript、React、Vue.js、Next.jsなどのフレームワークなど。
Unity
Unityを使って開発されたゲーム。
Flutter
Googleが開発したDart言語を使用するフレームワーク。一つのコードベースでiOS、Android、Web、デスクトップアプリを構築。

アプリ名をつけて登録します。サーバーとなるFirebase Hostingも設定しておきます。

SDKの追加方法の確認

Firebase SDKとは、アプリに組み込むことで、複雑なサーバー側のコードを書くことなく、認証、データベース、ストレージなどのFirebaseの機能を簡単に利用できるようにするツールです。

インストール方法には①npmと②JavaScriptの２種類が用意されています。

WebpackやRollupなどのモジュールハンドラを使用する場合はnpmでインストールします。

SDKとは？

SDKとは、Software Development Kitの略で、日本語で「ソフトウェア開発キット」のことです。

Firebase CLIのインストール方法の確認

Firebase CLIとは、コマンドラインからFirebaseのプロジェクトやサービスを管理・操作するための公式ツールです。

ターミナルやコマンドプロンプトからテキストコマンドを実行して操作できるようになります。

デプロイ方法の確認

デプロイとは、作成したアプリケーションやウェブサイトのファイルを、実際にユーザーが利用できる本番環境（サーバー）に配置し、動作させる一連の作業です。

デプロイ方法を確認したら「コンソールに進む」をクリックします。

超簡単なWEBサイトの公開

アプリを登録して、Hostingの基本的な使い方を確認したら、いよいよ実際に超簡単なWEBサイトを公開してみましょう。

Node.jsとnpmのインストール

Firebaseを操作するには、Node.jsおよびnpmが必要になります。

Node.jsとnpmをインストールする方法は以下の記事をご参考ください。

＞【徹底解説】ローカルにNode.jsをインストールする方法｜X64とX86の違い,msiとスタンドアローンとは？(Windows)

Firebase CLIのインストール

firebaseコマンドを使えるようにするため「Firebase CLI」をインストールします。

npm install -g firebase-tools

以下のように表示されればインストール完了です。これでfirebaseコマンドが実行できるようになります。

補足

warnで警告が出ていますが、これはインストールされたパッケージの中の「node-domexeption」が非推奨になっているためです。気にしなくて問題ありません。

*「deprecated（デプリケーティッド）」は「非推奨の」という意味です。

Firebaseにログインする

コマンドラインを使ってFirebaseにログインします。

firebase login

Geminiを使うかどうか？

AI（Gemini）による支援機能を使うかどうか聞かれます。使う場合は「Y」を入力します。

>firebase login
i  The Firebase CLI’s MCP server feature can optionally make use of Gemini in Firebase. Learn more about Gemini in Firebase and how it uses your data: https://firebase.google.com/docs/gemini-in-firebase#how-gemini-in-firebase-uses-your-data
? Enable Gemini in Firebase features? (Y/n)

Geminiの導入によるメリット

デプロイ結果の要約や、エラーメッセージの分析、トラブルシューティングのヒント提供などのAI支援機能が利用可能になります。

エラーを共有するか？

エラー情報などをGoogleと共有するか聞かれます。共有しない場合は「n」を入力します。

i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n)

Googleアカウントでログインする

ブラウザでGoogleアカウントへのログイン画面が表示されるので、ログインし許可をします。

ログインが成功すれば以下のように表示されます。

コマンドライン上には以下のように表示されます。

MEMO

Firebaseにログインしたからといって、Success！と表示される以外に、コマンドライン上では何も変化はありません。

ただし裏側では、以降のすべてのFirebase CLIコマンド（firebase init, firebase deployなど）を実行するために必要な設定がシステムに保存されています。

プロジェクトフォルダの作成と初期化（firebase init）

プロジェクトファイルを保存するためのフォルダを作成します。

フォルダを作成したいディレクトリに移動し、以下のコマンドを実行します。

mkdir test-firebase-app
cd test-firebase-app

対象のフォルダに移動したら、Firebaseの初期化処理を行います。

firebase init

以下のように表示されるので「Y」を入力します。

どのFirebase CLI機能を利用するか聞かれるので「Hosting: ～」を選択します。

カーソルで⇓に動かし、スペースでチェックを入れEnterをクリックします。

どのプロジェクトを使うか聞かれます。先ほど作成したプロジェクトを利用するので「Use an existing project」をクリックします。

プロジェクトの一覧が表示されるので、このディレクトリと関連付けたいプロジェクトを選択します。

公開ディレクトリに何を使うかを尋ねられます。ここはデフォルトのpublicのままで大丈夫です。

MEMO

公開ディレクトリとは、ウェブサイトのHTMLファイルなどを置くフォルダです。指定した名前のディレクトリがローカルに作成されます。

SPA（シングルページアプリケーション）として設定するか聞かれるので「n」を入力します。

（※今回は簡易的な静的WEBサイトを作成するため。もしSPAを作成する場合はYとしてください。）

SPAに設定するとどうなるか？

「Y」を選択すると、以下のリライトルールがfirebase.jsonファイルに自動で追加されます。

これにより、存在しないパスへのアクセスがあった場合に404エラーを返さずに、リクエストを/index.htmlに内部的に書き換えます（リライト）。

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

ブラウザには常に/index.htmlの内容が返されますが、URLはそのままとなります。

これにより、React、Vue、AngularなどのSPA（Single Page Application）フレームワークが、ブラウザのHistory APIを使ってURLに基づいた画面の切り替え（クライアントサイドルーティング）を適切に行えるようになります。

Githubと連携して自動でビルド＆デプロイを行うか聞かれます。ここでは「n」とします。

「Firebase initialization complete!（初期設定完了！）」と表示されれば、Firebase hostingの初期化処理は完了です。

初期化の設定を途中で間違えてしまった場合

初期化の設定を途中で間違ってしまった場合は、一度設定を全て終わらせた後に、再度「firebase init」を実行することで、再度初期化処理を行うことができます。

（補足）作成されるファイル

初期化が完了すると、プロジェクトのディレクトリに以下のフォルダやファイルが自動で生成されます。

自動生成されるフォルダとファイル

public
.firebaserc
.gitignore
firebase.json

これらのフォルダやファイルの詳細については下記をご参考ください。

＞ firebase initで生成される初期フォルダとファイルの役割｜public, .firebase, .gitignore, firebase.json

公開するHTMLファイルの作成

初期化をした段階でpublicフォルダの中にindex.htmlが生成されます。

デフォルトの状態でもWEBサイトとして公開することは可能ですが、ここではこのindex.htmlの中身をより簡単な内容に書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>確認用WEBサイト！</title>
</head>
<body>
    <h1>こんにちは、Firebase Hostingを使ったWEBサイトです!</h1>
    <p>このサイトはFirebase Hostingで公開されています。</p>
</body>
</html>

デプロイする

実際にWEBサイトを公開（デプロイ）します。以下のコードを実行します。

firebase deploy --only hosting

コード解説

firebase deploy: Firebaseにファイルをデプロイ（配置・公開）するコマンドです。
--only hosting: Hosting機能のみをデプロイ対象と指定します（他の機能の設定はデプロイしません）。

以下のように表示され、公開後のURLが表示されます。

> firebase deploy --only hosting

=== Deploying to 'test-7521e'...

i  deploying hosting
i  hosting[test-7521e]: beginning deploy...
i  hosting[test-7521e]: found 2 files in public
+  hosting[test-7521e]: file upload complete
i  hosting[test-7521e]: finalizing version...
+  hosting[test-7521e]: version finalized
i  hosting[test-7521e]: releasing new version...
+  hosting[test-7521e]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/test-7521e/overview
Hosting URL: https://test-7521e.web.app

実際に表示されたURLを叩くと、HMTLの内容が表示されます。

これで、Firebase Hostingを使ったWEBサイトの公開は完了です。

公開の停止

公開を停止したい場合は、プロジェクトのディレクトリで以下のコマンドを実行します。

firebase hosting:disable

もしくは、プロジェクト名を指定して実行することもできます。

firebase hosting:disable --project <あなたのプロジェクトID>

本当に即座に停止していいか？と聞かれるので「Y」を入力します。

このコマンドを実行すると、サイトのURLにアクセスしてもカスタムエラーページが表示され、デプロイされたコンテンツは見えなくなります。

対象のURLにアクセスすると以下のようになります。

停止後に再度公開したい場合

firebase hosting:disableでWEBサイトの公開を停止した後に再度公開したい場合は、再度デプロイを実行します。

firebase deploy --only hosting