Firebase Hosting 入門ガイド: Webサイトを無料で高速公開🚀

Firebase Hosting とは？🤔

Firebase Hosting は、Google が提供する Firebase プラットフォームの一部で、Web アプリケーションや静的コンテンツ（HTML, CSS, JavaScript, 画像ファイルなど）を高速かつ安全に、そして簡単に公開できるホスティングサービスです。開発者向けに設計されており、特に静的なウェブサイトや、React、Vue.js、Angular などで作られたシングルページアプリケーション（SPA）のホスティングに最適化されています。

主な特徴として、グローバルな CDN (コンテンツデリバリネットワーク) を基盤としているため、世界中のどこからアクセスしてもコンテンツが高速に配信されます。さらに、SSL 証明書が自動で無料で提供されるため、特別な設定なしに HTTPS 通信を実現でき、セキュリティ面でも安心です。 Cloud Functions や Cloud Run と組み合わせることで、動的なコンテンツ配信やマイクロサービスのホスティングも可能です。

「Webサイトを公開したいけど、サーバーの設定とか難しそう…」「無料で手軽に始められるホスティングサービスを探している」といった方には特におすすめのサービスです。😊

Firebase Hosting の主な機能とメリット✨

Firebase Hosting には、開発者にとって魅力的な機能がたくさんあります。

🚀 高速なコンテンツ配信

アップロードされたファイルは、世界中に配置された Google の CDN エッジサーバー (SSD ストレージ) にキャッシュされます。ユーザーに最も近いサーバーからコンテンツが配信されるため、表示速度が非常に高速です。また、Gzip や Brotli による自動的なコンテンツ圧縮も行われ、転送量を削減し、さらなる高速化に貢献します。
🔒 セキュリティ (無料 SSL 証明書)

独自ドメインを設定した場合でも、Firebase が自動的に SSL 証明書をプロビジョニングし、管理してくれます。追加の設定や費用は不要で、常に HTTPS で安全な通信を提供できます。
🌐 カスタムドメイン対応

デフォルトで提供される *.web.app や *.firebaseapp.com のサブドメインに加え、自身で取得した独自ドメイン (例: example.com や app.example.com) を簡単に設定できます。もちろん、カスタムドメインでも無料の SSL 証明書が利用可能です。
🔧 簡単なデプロイとバージョン管理 (ロールバック)

Firebase CLI (コマンドラインインターフェース) を使えば、たった一つのコマンド (firebase deploy) で簡単に Web サイトやアプリをデプロイできます。デプロイ履歴は Firebase コンソールで管理され、問題が発生した場合でも、過去のバージョンにワンクリックでロールバックすることが可能です。これにより、安心して更新作業を行えます。
💻 ローカルでのエミュレートとプレビュー機能

デプロイ前にローカル環境で動作を確認できるエミュレータ機能があります。また、一時的なプレビュー URL を生成して、チームメンバーなどに変更内容を共有することも可能です。GitHub との連携機能を使えば、プルリクエストごとにプレビュー環境を自動生成することもできます。
💰 魅力的な無料枠

Firebase Hosting には generous な無料枠 (Spark プラン) が用意されています。小規模なサイトや個人プロジェクトであれば、無料で運用できる可能性が高いです。無料枠の主な内容は以下の通りです（2025年3月時点での情報ですが、最新の情報は公式サイトでご確認ください）。

項目無料枠 (Spark プラン)

ストレージ容量 10 GB

データ転送量 10 GB / 月

カスタムドメイン対応 (複数可)

SSL 証明書無料

無料枠を超える場合は、従量課金制の Blaze プランにアップグレードすることで対応できます。
🧩 他の Firebase サービスとの連携

Cloud Functions for Firebase (サーバーレス関数) や Cloud Firestore (NoSQL データベース)、Firebase Authentication (認証) など、他の Firebase サービスとシームレスに連携できます。これにより、バックエンド機能を持つ動的な Web アプリケーションも効率的に構築できます。

項目	無料枠 (Spark プラン)
ストレージ容量	10 GB
データ転送量	10 GB / 月
カスタムドメイン	対応 (複数可)
SSL 証明書	無料

Firebase Hosting を始めてみよう！🔰

実際に Firebase Hosting を使って Web サイトを公開する手順を見ていきましょう。ここでは、基本的な静的サイト（HTML, CSS, JS ファイル）をデプロイする流れを説明します。

1. 準備するもの

Google アカウント: Firebase を利用するには Google アカウントが必要です。
Firebase プロジェクト: Firebase コンソールから無料で作成できます。 (Firebase コンソール)
Node.js と npm: Firebase CLI をインストールするために必要です。インストールされていない場合は、Node.js 公式サイトからダウンロードしてインストールしてください。npm は Node.js に同梱されています。
公開したい Web サイトのファイル: HTML, CSS, JavaScript ファイルなどを用意します。

2. Firebase CLI のインストール

ターミナル (Windows ではコマンドプロンプトや PowerShell、Git Bash など) を開き、以下のコマンドを実行して Firebase CLI をインストールします。 -g オプションは、グローバルにインストールすることを意味し、どのディレクトリからでも firebase コマンドを実行できるようになります。

npm install -g firebase-tools

インストールが完了したら、バージョンを確認してみましょう。

firebase --version

バージョン番号が表示されれば、正常にインストールされています。

3. Firebase へのログイン

次に、Firebase CLI を使って Google アカウントにログインします。以下のコマンドを実行してください。

firebase login

このコマンドを実行すると、ブラウザが自動的に開き、Google アカウントへのログインと Firebase CLI へのアクセス許可を求められます。指示に従ってログインと許可を行うと、ターミナルに “Success! Logged in as your_email@example.com” のようなメッセージが表示されます。

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

公開したい Web サイトのファイルが格納されているディレクトリ (プロジェクトのルートディレクトリ) にターミナルで移動します。そして、以下のコマンドを実行して Firebase プロジェクトの初期化を行います。

firebase init

このコマンドを実行すると、対話形式でいくつかの質問が表示されます。

Which Firebase features do you want to set up for this folder?
どの Firebase 機能を使用するか尋ねられます。矢印キーで Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys を選択し、スペースキーで選択状態 (アスタリスクが表示される) にしてから Enter キーを押します。
Please select an option: (Use arrow keys)
既存の Firebase プロジェクトを使用するか、新規に作成するかなどを尋ねられます。通常は Use an existing project を選択し、Enter キーを押します。
Select a default Firebase project for this directory:
ログインした Google アカウントに関連付けられている Firebase プロジェクトの一覧が表示されます。このディレクトリで使用したいプロジェクトを選択し、Enter キーを押します。
What do you want to use as your public directory?
公開するファイル (HTML, CSS, JS など) が格納されているディレクトリ名を指定します。デフォルトは public です。特に変更する必要がなければ、そのまま Enter キーを押します。もし指定したディレクトリが存在しない場合は、自動的に作成されます。ここに index.html などの公開ファイルを配置します。
Configure as a single-page app (rewrite all urls to /index.html)?
作成するサイトがシングルページアプリケーション (SPA) かどうかを尋ねられます。SPA の場合は y (Yes)、そうでない場合 (通常の複数ページの Web サイトなど) は n (No) を入力して Enter キーを押します。SPA の場合、存在しない URL へのアクセスをすべて index.html にリダイレクトする設定が追加されます。
Set up automatic builds and deploys with GitHub?
GitHub と連携して、リポジトリへのプッシュをトリガーに自動でビルドとデプロイを行うか尋ねられます。ここでは n (No) を選択しておきます (後から設定可能です)。

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

firebase.json: Hosting の設定ファイル (公開ディレクトリの指定、リダイレクトルールなど)。
.firebaserc: プロジェクトエイリアスなどの設定ファイル。
public (または指定した公開ディレクトリ): 公開するファイルを置く場所。デフォルトで簡単な index.html と 404.html が生成される場合があります。

公開したいファイル (例: 自作の index.html, style.css, script.js など) を、指定した公開ディレクトリ (デフォルトでは public) の中に配置してください。

5. ローカルでのテスト (任意)

デプロイする前に、ローカル環境でサイトの表示を確認することができます。以下のコマンドを実行します。

firebase serve

コマンドを実行すると、ローカルサーバーが起動し、http://localhost:5000 のような URL が表示されます。ブラウザでこの URL にアクセスすると、デプロイされるサイトをローカルで確認できます。確認が終わったら、ターミナルで Ctrl + C を押してサーバーを停止します。

6. デプロイ！🚀

いよいよデプロイです！以下のコマンドを実行して、ローカルのファイルを Firebase Hosting にアップロードし、公開します。

firebase deploy

デプロイが開始され、ファイルのアップロード状況などが表示されます。完了すると、以下のようなメッセージが表示されます (URL は異なります)。

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project-id/overview
Hosting URL: https://your-project-id.web.app

表示された Hosting URL にブラウザでアクセスしてみてください。作成した Web サイトがインターネット上に公開されているはずです！🎉

サイトの内容を更新した場合は、再度 firebase deploy コマンドを実行するだけで、最新の内容が反映されます。

`firebase.json` による設定のカスタマイズ⚙️

firebase init で生成された firebase.json ファイルを編集することで、Firebase Hosting の動作をより細かくカスタマイズできます。以下は、基本的な firebase.json の例と、よく使われる設定項目です。

{
  "hosting": {
    "public": "public", // 公開ディレクトリの指定 (必須)
    "ignore": [ // デプロイ時に無視するファイルやディレクトリのパターン
      "firebase.json",
      "**/.*", // ドット始まりのファイル (例: .git, .gitignore)
      "**/node_modules/**" // node_modules ディレクトリ
    ],
    "rewrites": [ // URL の書き換えルール
      {
        "source": "**", // すべての URL パス
        "destination": "/index.html" // /index.html に転送 (SPA の場合)
      }
    ],
    "headers": [ // カスタムヘッダーの設定
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp)", // 画像ファイル
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=7200" // キャッシュ期間を2時間に設定
          }
        ]
      },
      {
        "source": "**/*.@(css|js)", // CSS/JS ファイル
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=86400" // キャッシュ期間を1日に設定
          }
        ]
      }
    ],
    "redirects": [ // リダイレクトルール
      {
        "source": "/old-page.html",
        "destination": "/new-page.html",
        "type": 301 // 永続的なリダイレクト
      }
    ],
    "cleanUrls": true, // URL から .html 拡張子を省略可能にする
    "trailingSlash": false // URL 末尾のスラッシュを削除する
  }
}

主な設定項目

public: (必須) デプロイするファイルが含まれるディレクトリを指定します。
ignore: デプロイ時に無視するファイルやディレクトリを glob パターンで指定します。firebase.json 自体や .git ディレクトリ、node_modules などは通常無視するように設定します。
rewrites: 特定の URL パスへのリクエストを別のパスや Cloud Functions の関数に内部的に転送します。SPA でルーティングを実現するためによく使われます。"source": "**", "destination": "/index.html" と設定すると、どの URL にアクセスしても index.html が返され、クライアントサイドの JavaScript でルーティングを処理できます。
redirects: 特定の URL へのアクセスを別の URL にリダイレクト (転送) します。古い URL から新しい URL への移行などに使います。type でリダイレクトの種類 (301: 永続的, 302: 一時的) を指定できます。
headers: 特定のパスに対してカスタム HTTP ヘッダーを設定します。キャッシュ制御 (Cache-Control) やセキュリティ関連のヘッダー (Content-Security-Policy など) を設定するのに便利です。
cleanUrls: true に設定すると、/about.html のような URL に /about でアクセスできるようになります。
trailingSlash: false に設定すると、URL の末尾にスラッシュがある場合 (例: /contact/)、自動的に削除して /contact にリダイレクトします。true にすると逆の動作になります。

これらの設定を組み合わせることで、より柔軟なサイト構築が可能になります。詳細は Firebase Hosting の構成に関するドキュメントを参照してください。

カスタムドメインの設定 🔗

Firebase Hosting では、your-project-id.web.app のようなデフォルトのドメインだけでなく、独自のドメイン (例: www.your-awesome-site.com) を設定することも簡単です。

Firebase コンソールを開く: Firebase コンソールにアクセスし、対象のプロジェクトを選択します。
Hosting セクションへ移動: 左側のメニューから「構築」>「Hosting」を選択します。
カスタムドメインを追加: ダッシュボード画面にある「カスタムドメインを追加」ボタンをクリックします。
ドメイン名の入力: 設定したいドメイン名 (例: www.your-awesome-site.com や your-awesome-site.com) を入力し、「続行」をクリックします。
所有権の確認: ドメインの所有権を確認するための手順が表示されます。通常は、指定された TXT レコードを、ドメインを管理しているレジストラ (例: Google Domains, お名前.com, ムームードメインなど) の DNS 設定に追加します。
DNS レコードの設定: 所有権の確認後、Firebase Hosting のサーバーを指すように DNS レコード (通常は A レコード) を設定する手順が表示されます。指示に従って、ドメイン管理画面で A レコードを追加または更新します。
SSL 証明書のプロビジョニング: DNS 設定が正しく反映されると、Firebase が自動的に SSL 証明書を発行し、設定します。これには数分から数時間かかる場合があります。
完了: ステータスが「接続済み」になれば設定完了です。カスタムドメインでサイトにアクセスできるようになります。

DNS の設定方法はドメインレジストラによって異なります。詳細は各レジストラのヘルプドキュメントを参照してください。 Firebase コンソールの指示に従えば、比較的簡単に設定できます。

Firebase Hosting の活用例 💡

Firebase Hosting は様々な用途で活用できます。

静的なポートフォリオサイトやブログ: HTML, CSS, JavaScript で構成されたシンプルな Web サイトの公開に最適です。
シングルページアプリケーション (SPA): React, Vue, Angular などで構築された SPA のデプロイ先として非常に人気があります。rewrites 設定を使えば、クライアントサイドルーティングも問題なく動作します。
ランディングページ (LP): 新しいサービスやキャンペーンの紹介ページの公開に手軽に利用できます。
プログレッシブウェブアプリ (PWA): オフライン対応やプッシュ通知などの機能を持つ PWA のホスティングにも適しています。
Web アプリのフロントエンド: バックエンド API を別に用意し、Firebase Hosting でフロントエンド部分だけをホスティングする構成も一般的です。
プロトタイピング: 開発中の Web アプリを素早く公開し、関係者に共有する用途にも便利です。

まとめ 🏁

Firebase Hosting は、Web サイトや Web アプリケーションを高速・安全・簡単に公開できる素晴らしいサービスです。充実した無料枠、簡単なデプロイ、自動 SSL、グローバル CDN など、多くのメリットがあります。特に静的サイトや SPA のホスティングには最適解と言えるでしょう。

まだ試したことがない方は、ぜひこの機会に Firebase Hosting を使って、あなたの Web プロジェクトを世界に公開してみてはいかがでしょうか？きっとその手軽さとパワフルさに驚くはずです！😄

Firebase Hosting とは？🤔

Firebase Hosting の主な機能とメリット✨

🚀 高速なコンテンツ配信

🔒 セキュリティ (無料 SSL 証明書)

🌐 カスタムドメイン対応

🔧 簡単なデプロイとバージョン管理 (ロールバック)

💻 ローカルでのエミュレートとプレビュー機能

💰 魅力的な無料枠

🧩 他の Firebase サービスとの連携