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 にアクセスして [Fork] を選択します。

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

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

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

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

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

次のステップ