Firebase Hosting を使ってみる

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

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

始める前に

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

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

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

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

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

firebase init hosting

プロジェクトの初期化中に、Firebase CLI から次のプロンプトを入力します。

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

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

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

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

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

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

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

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

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

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

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

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

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

firebase deploy --only hosting

このコマンドは、Hosting の内容と構成を次のようにデプロイします。 Firebase でプロビジョニングされたサブドメイン:

  • PROJECT_ID.web.app
  • PROJECT_ID.firebaseapp.com

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

次のステップ

これでサイトを公開する準備が整いました。