App Hosting を使ってみる

GitHub リポジトリに既存の Next.js または Angular アプリ（Next.js バージョン 13 以降または Angular 17.2 以降）がある場合、App Hosting バックエンドを作成し、ライブブランチへの push によってロールアウトを開始するのと同じくらい簡単です。アプリをお持ちでない場合は、サンプルアプリのいずれかを使用して、このガイドで説明する手順を実行してください。

始める前に

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

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

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

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

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

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

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

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

    既存の Google アナリティクス アカウントを選択するか、新しいアカウントを作成します。

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

  5. [プロジェクトを作成]（既存の Google Cloud プロジェクトを使用する場合は [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 が作成するマネージド リソースのコレクションです。App Hosting バックエンドの作成と一覧表示には、Firebase コンソールまたは Firebase CLI を使用します。

Firebase コンソール: [ビルド] メニューから [App Hosting]、[使ってみる] の順に選択します。

CLI: （バージョン 3.9 以降）バックエンドを作成するには、ローカル プロジェクト ディレクトリのルートから、引数としてプロジェクト ID を指定して次のコマンドを実行します（プレビューでは us-central1 リージョンのみがサポートされます）。

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

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

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

    通常は、これが package.json ファイルのある場所です。

  • live ブランチを設定する

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

次のステップ