この記事では、Firebase Hosting を使って静的サイトを公開する方法を簡潔に説明します。
初めて設定する場合は、できるだけクリーンな環境で行うことをおすすめします。
流れ
作業の流れは以下のようになります：
-
CLIツールのインストール
Firebase CLI をインストールします（まだインストールしていない場合は Node.jsのダウンロードも必要です）。 -
ログイン
firebase loginコマンドで Firebase にログインします。 -
初期設定
firebase initコマンドで Firebase Hosting の設定を行います。 -
デプロイ
firebase deployコマンドでサイトを公開します。
順を追って詳しく説明していきます。
準備
まず、公開したいサイトのフォルダを準備します。フォルダ構成の例を以下に示します
mysite（任意のフォルダ名）
└ public（この名前は必ずpublicにする）
publicフォルダにはサイトに必要なHTMLやCSS、JavaScriptファイルのみを配置してください。
※不要なファイルを含めると、デプロイ時にエラーが発生することがあります。
Firebaseの初期設定（init）を行うとファイルが上書きされるため、必要であれば Git などでバックアップを取っておくことをおすすめします。
Firebase CLI のインストール
ターミナルを開き、以下のコマンドで Firebase CLI をインストールします
npm install -g firebase-tools
インストール後、次のコマンドでバージョンを確認してください
firebase --version
Firebase login
次に、以下のコマンドを実行して Firebase にログインします
firebase login
初回ログイン時には以下のような画面が表示されます
データ送信に関する確認画面なので、n (No) を選んでも問題ありません。
その後、ブラウザが開いてログイン操作を行います。ログインが完了すると以下の画面が表示されます。
ログイン成功後はターミナルに戻ります。
Firebase Hosting の初期設定（firebase init）
次に、公開するサイトのフォルダに移動します。
cd desktop/mysite
フォルダ内に移動したら、以下のコマンドを実行します
firebase init
「proceed（進めるか？）」という質問には y (Yes) を入力します。
次に「Hosting」を選び、スペースキー を押して選択後、Enter を押します。
プロジェクトを新規作成する場合は「new project」を選び、プロジェクトIDを入力します（他のプロジェクトと重複しないIDを設定）。
既存のプロジェクトを使用する場合は「using」を選択します。
以下の選択肢では、適宜設定を行います：
「use as your public directory?」→ publicフォルダを使用するのでそのままEnter。
「Configure as a single-page app?」→ シングルページアプリケーションでない場合はn(No)。
「deploys with GitHub?」→ GitHubを使わない場合はn (No)。
初期設定後、publicフォルダ内に設定ファイルが追加されていることを確認してください。
サイトのデプロイ（firebase deploy）
小時間待つと、URLが出ます。
firebase open、かURLを開くとサイトが表示され終了です。
初めは一発で表示まで成功しないとは思います。
失敗した場合フォルダ構造やディレクトリに問題がないか再確認しておきましょう。
Hostingで使えるファイルはHTML/CSS/JavaScriptのみです。
更新する際は再度デプロイすれば行えます。
さいごに
ここまで書いて思いましたが、簡易的な静的サイトであればNetlifyやGitHub Pages、最近ではVercelでも十分対応可能だと思います。ただしFirebaseの無料枠でFirestoreなどの機能を活用できれば、より実用的なプロジェクトが作れるでしょう。
(※2024年追記。久しぶりに触ってみたら環境がだいぶ変わってましたので、この手法はあくまで参考程度になります)