App Hosting を使ってみる

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

AI アシスタンスを利用するには、以下のプロンプトを AI コーディング エージェント（Antigravity、Claude Code、Codex、Cursor など）にコピーします。 プロンプトをカスタマイズして、エージェントを繰り返し調整できます。インストールの詳細については、Firebase エージェント スキルをご覧ください。

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

このガイドでは、GitHub リポジトリに新しい commit が行われるたびに自動的にデプロイされるように、Firebase コンソールで App Hosting を設定する方法について説明します。このフローの最後には、GitHub リポジトリの main ブランチに新しい変更を commit するたびに再デプロイされる、Next.js または Angular のサンプルアプリが公開されます。

このガイドでは、推奨される Firebase コンソール フローに焦点を当てていますが、他のデプロイ方法もあります。たとえば、Firebase CLI を使用して GitHub 接続なしでローカルコードをデプロイする方法などです。

ステップ 1: デモリポジトリをフォークする

https://github.com/firebase/apphosting-adapters にアクセスし、[Fork] を選択します。

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

  1. Firebase コンソールで、[Hosting & Serverless] > [App Hosting] に移動します。

  2. [開始] をクリックします。

  3. プロンプトが表示されたら、従量課金制の Blaze のお支払いプランにアップグレードして App Hosting を使用します。

App Hosting バックエンドの設定のスクリーンショット。

表示される手順に沿って、次の操作を行います。

  • プライマリ リージョン（通常はユーザーに最も近いリージョン）を選択します。
  • GitHub に接続します。apphosting-adapters リポジトリをフォークして作成したリポジトリを選択します。
  • アプリのルート ディレクトリを次のいずれかに設定します。
  • ライブ ブランチを main に設定します。
  • 自動ロールアウトを有効にします（自動ロールアウトはデフォルトで有効になっています）。
  • バックエンドに名前を割り当てます。
  • ランタイム環境を選択します。デフォルトでは、推奨される最新の Node.js バージョンが事前に選択されています。
    • ベースイメージの自動更新（ABIU）を構成します。ABIU はデフォルトで有効になっており、基盤となる環境にセキュリティ パッチを自動的に適用します。ABIU を無効にするには、ランタイムで [指定なし] を選択します。
  • 新しい Firebase ウェブアプリを作成します。

[Finish and deploy] を選択します。

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

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

バックエンドのダッシュボードの [バックエンド情報] 行で、ライブ バックエンドへのリンクを選択して、新しいウェブサイトを表示します。

バックエンド情報行のスクリーンショット。ライブアプリのリンクが強調表示されています。

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

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

  1. デモ GitHub リポジトリのフォークで、デモアプリのホームページのソースに移動し、認識可能な編集を加えて、変更をメインブランチに push します。ホームページを確認するには:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. Firebase コンソールで、新しい変更が本番環境にロールアウトされるときに App Hosting をモニタリングします。ロールアウトが完了すると、アプリのホームページで変更を確認できます。

次のステップ