Firebase Hosting を使ってみる

Firebase Hosting では、高速で安全性と信頼性の高い方法で、アプリの静的アセット（HTML、CSS、JavaScript、メディア ファイルなど）をホストできます。また動的コンテンツの配信やマイクロサービスのホスティングも行うことができます。

本番環境レベルのホスティングはグローバル コンテンツ配信ネットワーク（CDN）を基盤としています。ホスティングのデフォルトでは、コンテンツが SSL 経由で配信され、お客様所有のカスタム ドメインや、プロジェクトの web.app や firebaseapp.com の無料サブドメインで使用できます。

始める前に

Firebase Hosting を設定する前に、Firebase プロジェクトを作成する必要があります。

ステップ 1: Firebase CLI をインストールする

Firebase CLI（コマンドライン インターフェース）には、Node.js と npm（Node Package Manager）が必要です。

1. 以下のいずれかのオプションを使用して、Node.js をインストールします。Node.js をインストールすると、npm が自動的にインストールされます。

   • Mac または Linux の場合は、nvm（Node Version Manager）を使用します。
   • Windows の場合は、nvm-windows を使用します。

2. 次のコマンドを実行して、npm で Firebase CLI をインストールします。

   npm install -g firebase-tools

   これにより、グローバルに使用できる firebase コマンドがインストールされます。Firebase CLI の最新バージョンに更新するには、同じ npm install コマンドを実行します。

3. 次のコマンドを実行し、Google アカウントで Firebase にログインします。

   firebase login

   このコマンドにより、ローカルマシンが Firebase に接続し、Firebase プロジェクトへのアクセスが許可されます。

4. 認証が機能したことをテストするには、次のコマンドを実行します。Firebase プロジェクトの一覧を表示する場合にも、このコマンドを使用します。

   firebase list

   Firebase コンソールと同じ Firebase プロジェクトが表示されているはずです。

最新の CLI バージョンに更新する

CLI のインストール コマンドを再度実行して、Firebase CLI の最新バージョンを使用していることを確認します。

npm install -g firebase-tools

ステップ 2: プロジェクトを初期化する

ローカル プロジェクトを Firebase プロジェクトに接続するには、ローカル プロジェクト ディレクトリのルートから次のコマンドを実行します。

firebase init

プロジェクトの初期化中に、Firebase CLI のプロンプトが表示され、次の操作を行うように指示されます。

1. Hosting の設定を選択する。

   プロジェクトに他の Firebase サービスを設定する場合は、該当するサービスのドキュメントで設定情報をご覧ください。あとで firebase init を実行して別の Firebase サービスを設定することもできます。

2. ローカル プロジェクト ディレクトリに接続する Firebase プロジェクトを選択する。

   選択した Firebase プロジェクトが、ローカル プロジェクト ディレクトリのデフォルトの Firebase プロジェクトになります。別の Firebase プロジェクトをローカル プロジェクト ディレクトリに接続するには、プロジェクト エイリアスを設定します。

3. 公開ルート ディレクトリとして使用するディレクトリを指定する。

   このディレクトリには、index.html ファイルや Firebase Hosting にデプロイするアセットなど、一般に公開されるすべての静的ファイルが含まれます。

   • 公開ルート ディレクトリのデフォルトは public です。

     • 公開ルート ディレクトリは、ここで指定することも、firebase.json 構成ファイルで後で指定することもできます。

     • デフォルトを選択したときに、public というディレクトリが存在しないと、Firebase によって自動的に作成されます。

   • 公開ルート ディレクトリに有効な index.html ファイルまたは 404.html ファイルが存在しない場合、これらのファイルが Firebase によって作成されます。

4. サイトの構成を選択する。

   1 ページアプリの作成を選択した場合、Firebase は書き換え構成を自動的に追加します。

初期化の最後に、Firebase は 2 つのファイルを自動的に作成し、ローカルアプリ ディレクトリのルートに追加します。

• プロジェクトの構成を含む firebase.json 構成ファイル。このファイルの詳細については、Hosting 動作を構成するをご覧ください。

• プロジェクト エイリアスが保存される .firebaserc ファイル。

ステップ 3: サイトにデプロイする

サイトにデプロイするには、ローカル プロジェクト ディレクトリのルートから次のコマンドを実行します。

firebase deploy

このコマンドは、リリースを Firebase プロジェクトのデフォルトの Hosting サイトにデプロイします。

• projectID.web.app
• projectID.firebaseapp.com

詳細については、デプロイとローカルでのサイトのテストをご覧ください。

次のステップ

これでサイトを公開する準備が整いました。次の方法も学習できます。

• Hosting 動作を構成する
• カスタム ドメインを接続する
• 動的コンテンツの配信とマイクロサービスのホスティング

また、Firebase CLI の他のドキュメントもご覧ください。