App Hosting を使ってみる

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

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

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

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

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

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

  1. Firebase コンソールで、[**Hosting とサーバーレス**] > [**App Hosting**] に移動します。

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

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

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

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

  • プライマリ リージョンを選択します（通常はユーザーに最も近いリージョン）。
  • GitHub に接続します。firebase-framework-tools リポジトリをフォークして作成したリポジトリを選択します。
  • アプリのルート ディレクトリを次のいずれかに設定します。
  • ライブブランチを main に設定します。
  • 自動ロールアウトを有効にします（自動ロールアウトはデフォルトで有効になっています）。
  • バックエンドに名前を割り当てます。
  • 新しい 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をモニタリングします。ロールアウトが完了すると、アプリのホームページで変更を確認できます。

次のステップ