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 バックエンドを作成する
Firebase コンソールで App Hosting を開き、[Get started.] を選択します。App Hosting を使用するには、Blaze プランにアップグレードする必要があります。
プロンプトに沿って、次の手順を完了します。
- プライマリ リージョンを選択します（通常はユーザーに最も近いリージョン）。
- GitHub に接続します。 firebase-framework-tools リポジトリをフォークして作成したリポジトリを選択します。
- アプリのルート ディレクトリを次のいずれかに設定します:
- ライブブランチを main に設定します。
- 自動ロールアウトを有効にします （自動ロールアウトはデフォルトで有効になっています）。
- バックエンドに名前を割り当てます。
- 新しい Firebase ウェブアプリを作成します。
[**完了してデプロイ**] を選択します。
ステップ 3: デプロイされたアプリを表示する
バックエンドを作成すると、Firebase からエンド
ユーザーがウェブアプリにアクセスできる無料のサブドメインが提供されます。形式は
backend-id--project-id.us-central1.hosted.appです。
バックエンドのダッシュボードの [バックエンド情報] 行で、 ライブ バックエンドへのリンクを選択して、新しいウェブサイトを表示します。
ステップ 4: 変更を push してロールアウトをトリガーする
バックエンドが作成され、ライブ URL がある場合は、ウェブアプリの新しいバージョンのロールアウトを トリガーできます。GitHub リポジトリのライブブランチに変更を push するたびに。 の設定をテストするには:App Hosting
デモ GitHub リポジトリのフォークで、 デモアプリのホームページのソースに移動し、認識可能な編集を行い、 変更をメインブランチに push します。ホームページを見つけるには:
- Next.js:
/starters/nextjs/basic/src/app/page.tsx - Angular:
/starters/angular/basic/src/app/pages/home/home.component.html
- Next.js:
Firebase コンソールで、新しい変更が本番環境にロールアウトされるときに App Hostingをモニタリングします。ロールアウトが完了すると、 アプリのホームページで変更を確認できます。
次のステップ
- 詳細を確認する: ホストされているアプリを Firebase Authentication と Google AI 機能に統合する Firebase Codelab を確認する: Next.js | Angular
- カスタム ドメインを接続する。
- バックエンドを構成する - 環境 変数の設定、シークレット パラメータの保存など。
- ロールアウト、サイトの使用状況、ログをモニタリングする。