App Hosting を使ってみる

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

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

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

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

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

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

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

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

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

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

プロンプトに沿って、次の手順を完了します。

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

[完了してデプロイ] を選択します。

ステップ 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 をモニタリングします。ロールアウトが完了すると、アプリのホームページで変更内容を確認できます。

次のステップ