App Hosting を使ってみる

既存の Next.js または Angular アプリ（Next.js バージョン 13 以降または Angular 17.2 以降） GitHub リポジトリにある場合は、次のように 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. [プロジェクトを作成]（Firebase を使用している場合は [Firebase を追加]）をクリックします。 既存の Google Cloud プロジェクトなど）にマッピングできます。

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

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

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

npm init @apphosting

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

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

App Hosting バックエンドは、Google Cloud 内でホストされている App Hosting は、ウェブアプリをビルドして実行するために作成します。Google Cloud コンソールの Firebase コンソールまたは App Hosting バックエンド Firebase CLI。

Firebase コンソール: [ビルド] メニューから [App Hosting] を選択し、 使ってみる

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

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

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

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

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

  • live ブランチを設定する

    これは GitHub リポジトリのブランチで 公開 URL。多くの場合、機能ブランチや開発のブランチです。 ブランチがマージされます

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

    自動ロールアウトはデフォルトで有効になっています。バックエンドの作成が完了すると アプリを直ちに App Hosting にデプロイするよう選択できます。

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

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

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

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

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

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

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

次のステップ