Firebaseで静的サイトを
ホスティングする方法【初心者向け】

1. Firebase Hostingとは

Firebase Hostingは、Googleが提供する静的サイトのホスティングサービスです。 HTML、CSS、JavaScript、画像ファイルなどで構成されるWebサイトを、 簡単に世界中に公開できます。

Firebase Hostingの主な特徴は以下の通りです。

• 無料で始められる：小規模なサイトなら無料枠で十分運用可能
• 高速なCDN：世界中のエッジサーバーから配信されるため、どこからアクセスしても高速
• SSL証明書が自動：HTTPSが自動で有効になり、セキュリティも安心
• 独自ドメイン対応：自分のドメインを使ってサイトを公開可能
• 簡単デプロイ：コマンド一つでサイトを更新できる

2. 事前準備

Firebase Hostingを使うには、以下の準備が必要です。

• Googleアカウント
• Node.js（バージョン14以上推奨）
• 公開したいWebサイトのファイル（HTML、CSS、JavaScriptなど）

Node.jsのインストール確認

ターミナル（コマンドプロンプト）で以下のコマンドを実行して、 Node.jsがインストールされているか確認します。

node --version

バージョン番号が表示されればOKです。 インストールされていない場合は、 Node.js公式サイトからダウンロードしてインストールしてください。

3. Firebaseプロジェクトの作成

4. Firebase CLIのセットアップ

Firebase CLIは、コマンドラインからFirebaseを操作するためのツールです。 以下のコマンドでインストールします。

npm install -g firebase-tools

インストールが完了したら、Firebaseにログインします。

firebase login

ブラウザが開くので、Googleアカウントでログインして権限を許可します。

プロジェクトの初期化

サイトのファイルがあるディレクトリに移動して、Firebaseの初期化を行います。

cd /path/to/your/project
firebase init

対話形式で設定を進めます。

1. 機能の選択：「Hosting: Configure files for Firebase Hosting...」を選択（スペースキーで選択、Enterで確定）
2. プロジェクトの選択：「Use an existing project」を選択し、先ほど作成したプロジェクトを選ぶ
3. 公開ディレクトリ：公開するファイルがあるディレクトリ名を入力（通常は「public」）
4. シングルページアプリ：通常のサイトなら「No」を選択
5. GitHub連携：自動デプロイを設定する場合は「Yes」、とりあえず「No」でOK

5. サイトをデプロイする

設定が完了したら、以下のコマンドでサイトをデプロイします。

firebase deploy

デプロイが完了すると、以下のようなURLが表示されます。

Hosting URL: https://your-project-id.web.app

このURLにアクセスすると、公開されたサイトを確認できます。 おめでとうございます！これでサイトが世界中に公開されました。

6. 独自ドメインの設定

独自ドメインを使いたい場合は、Firebaseコンソールから設定できます。

7. 便利なTips

プレビューチャンネルを使う

本番環境に影響を与えずに変更を確認したい場合、プレビューチャンネルが便利です。

firebase hosting:channel:deploy preview

一時的なURLが発行され、変更を確認できます。確認後に本番デプロイすれば安心です。

キャッシュの設定

firebase.jsonでキャッシュの設定をカスタマイズできます。 静的ファイルを長期キャッシュすることで、サイトの表示速度が向上します。

{
      "hosting": {
        "public": "public",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "headers": [
          {
            "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
            "headers": [
              {
                "key": "Cache-Control",
                "value": "max-age=31536000"
              }
            ]
          },
          {
            "source": "**/*.@(css|js)",
            "headers": [
              {
                "key": "Cache-Control",
                "value": "max-age=31536000"
              }
            ]
          }
        ]
      }
    }

リダイレクトの設定

URLの変更やwwwありなしの統一など、リダイレクトも設定できます。

{
      "hosting": {
        "public": "public",
        "redirects": [
          {
            "source": "/old-page",
            "destination": "/new-page",
            "type": 301
          }
        ]
      }
    }

404ページのカスタマイズ

存在しないページにアクセスされた時に表示される404ページは、 publicディレクトリに404.htmlを配置するだけでカスタマイズできます。

Firebase Hostingは、個人のポートフォリオサイトから企業のランディングページまで、 幅広い用途で活用できます。無料で始められるので、ぜひ試してみてください。