Firebase Hosting を使ってみる

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

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

始める前に

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

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

CLI をインストールする方法または最新バージョンに更新する方法については、Firebase CLI のドキュメントをご覧ください。

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

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

firebase init

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

Hosting の設定を選択する。

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

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

このディレクトリには、index.html ファイルや Firebase Hosting にデプロイするアセットなど、一般に公開されるすべての静的ファイルが含まれます。
- 公開ルートディレクトリのデフォルトは public です。
  - 公開ルートディレクトリは、ここで指定することも、firebase.json 構成ファイルで後で指定することもできます。
  - デフォルトを選択したときに、public というディレクトリが存在しないと、Firebase によって自動的に作成されます。
- 公開ルートディレクトリに有効な index.html ファイルまたは 404.html ファイルが存在しない場合、これらのファイルが Firebase によって作成されます。
サイトの構成を選択する。

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

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

プロジェクトの構成を含む firebase.json 構成ファイル。このファイルの詳細については、Hosting 動作を構成するをご覧ください。
プロジェクトエイリアスが保存される .firebaserc ファイル。

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

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

firebase deploy

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

projectID.web.app
projectID.firebaseapp.com

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

次のステップ

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

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