App Hosting を使ってみる

GitHub リポジトリに既存の Next.js アプリまたは Angular アプリ（Next.js バージョン 13 以降または Angular 17.2 以降）がある場合、App Hosting の使用を開始するのは、App Hosting バックエンドを作成し、ライブブランチに push してロールアウトを開始するだけです。アプリがない場合は、サンプルアプリのいずれかを使用して、このガイドの手順に沿って操作します。

始める前に

Firebase App Hosting を設定する前に、Firebase プロジェクトを作成（まだ作成していない場合）し、Blaze プランにアップグレードする必要があります。

プロジェクトを作成するには:

  1. Firebase コンソールで [プロジェクトを追加] をクリックします。

    • Firebase リソースを既存の Google Cloud プロジェクトに追加するには、そのプロジェクト名を入力するか、プルダウン メニューから選択します。

    • 新しいプロジェクトを作成するには、任意のプロジェクト名を入力します。必要に応じて、プロジェクト名の下に表示されるプロジェクト ID を編集することもできます。

  2. Firebase の利用規約が表示されたら、内容を読み、同意します。

  3. [続行] をクリックします。

  4. （省略可）プロジェクトに対し Google Analyticsを設定します。これにより、次の Firebase プロダクトを使用する際のエクスペリエンスを最適化できます。

    既存の Google Analytics アカウントを選択するか、新しいアカウントを作成します。

    新しいアカウントを作成する場合は、Analytics レポートのロケーションを選択し、プロジェクトのデータ共有設定と Google Analyticsの規約に同意します。

  5. [プロジェクトを作成]（既存の Google Cloud プロジェクトを使用する場合は [Firebase を追加]）をクリックします。

Firebase プロジェクトのリソースが自動的にプロビジョニングされます。処理が完了すると、Firebase コンソールに Firebase プロジェクトの概要ページが表示されます。

ステップ 0（省略可）: GitHub リポジトリとウェブアプリを作成する

GitHub リポジトリに Web アプリがまだない場合や、サンプルアプリでフローを確認したい場合は、まず Next.js または Angular のサンプルを初期化します。

npm init @apphosting

サンプルアプリは、next dev または ng start を使用してローカルで実行できます。続行するには、新しい GitHub リポジトリを作成し、新しく初期化されたサンプルコードを push します。

ステップ 1: App Hosting バックエンドを作成する

App Hosting バックエンドは、App Hosting がウェブアプリの構築と実行のために作成するマネージド リソースのコレクションです。プロジェクト オーナーは、Firebase コンソールまたは Firebase CLI を使用して、プロジェクトの最初の App Hosting バックエンドを作成できます。この初期設定後、App Hosting 管理者は追加のバックエンドを作成して管理することもできます。詳細については、Firebase App Hosting IAM ロールをご覧ください。

Firebase コンソール: [Build] メニューで [App Hosting]、[Get started] の順に選択します。

CLI:（バージョン 13.15.4 以降）バックエンドを作成するには、ローカル プロジェクト ディレクトリのルートから次のコマンドを実行し、projectID と優先するリージョンを引数として指定します。

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

コンソールまたは CLI のどちらでも、プロンプトに沿ってバックエンドに名前を割り当て、GitHub 接続を設定し、次の基本的なデプロイ設定を構成します。

  • アプリのルート ディレクトリを設定します（デフォルトは /）。

    通常、ここに package.json ファイルが配置されます。

  • ライブブランチを設定する

    これは、公開 URL にデプロイされる GitHub リポジトリのブランチです。多くの場合、これは、機能ブランチまたは開発ブランチが統合されるブランチです。

  • 自動ロールアウトを承認または拒否する

    自動ロールアウトはデフォルトで有効になっています。バックエンドを作成したら、アプリをすぐに App Hosting にデプロイするように選択できます。

ステップ 2: デプロイされたアプリを表示する

バックエンドを作成すると、エンドユーザーがウェブアプリにアクセスできる無料のサブドメインが Firebase から提供されます。その形式は backend-id--project-id.us-central1.hosted.app です。

ウェブアプリの URL を表示するには、Firebase コンソールで確認するか、次の CLI コマンドを実行します。

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

ステップ 3: 変更を push してロールアウトをトリガーする

バックエンドが作成され、公開 URL が設定されたら、GitHub リポジトリの公開ブランチに変更を push するたびに、ウェブアプリの新しいバージョンのロールアウトをトリガーできます。App Hosting の設定をテストするには:

  1. GitHub で、ウェブアプリのライブブランチに変更を push します。
  2. Firebase コンソールの [App Hosting タブ] を開き、バックエンドの [ダッシュボードを表示] を選択します。テーブルリストには、変更によってトリガーされたロールアウトに関連付けられた特定の commit が表示されます。

次のステップ