App Hosting を使ってみる

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

始める前に

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

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

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

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

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

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

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

  4. （省略可）プロジェクトに対し Google Analytics を設定します。これにより、次の Firebase プロダクトを使用して最適なエクスペリエンスを実現できます。Firebase A/B Testing、Cloud Messaging、Crashlytics、In-App Messaging、Remote Config（パーソナライズを含む）

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

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

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

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

GitHub リポジトリにウェブアプリがまだ存在しない場合、またはサンプルアプリでフローを試す場合は、まず Next.js または Angular のいずれかのサンプルを初期化します。

npm init @apphosting

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

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

App Hosting バックエンドは、ウェブアプリの構築と実行のために App Hosting が作成するマネージド リソースのコレクションです。

Firebase コンソール: [ビルド] メニューから [アプリ ホスティング] を選択し、[開始] を選択します。

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

firebase apphosting:backends:create --project PROJECT_ID

コンソールまたは 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}

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

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

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

次のステップ