Google I/O 2023 での Firebase の最新情報。詳細

Firebase Hosting を使ってみる

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

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

始める前に

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

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

CLI をインストールする方法または最新バージョンに更新する方法については、Firebase 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

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

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

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

次のステップ

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