ウェブ フレームワークを Hosting と統合する

Firebase Hosting は、Angular や Next.js など、よく使われている最新のウェブ フレームワークと統合されます。これらのフレームワークで Firebase HostingCloud Functions for Firebase を使用すると、任意のフレームワーク環境でアプリとマイクロサービスを開発してから、マネージド型の安全なサーバー環境にデプロイできます。

この早期プレビュー版のサポートには次の機能が含まれます。

  • 静的ウェブ コンテンツで構成されるウェブアプリをデプロイする
  • 事前レンダリング / 静的サイト生成(SSG)を使用するウェブアプリをデプロイする
  • サーバーサイド レンダリング(SSR)を使用するウェブアプリをデプロイする - 完全なサーバー レンダリングをオンデマンドで行います。

Firebase は、Firebase CLI を介してこの機能を提供します。Hosting をコマンドラインで初期化するときに、新規または既存のウェブ プロジェクトに関する情報を指定します。さらに、CLI を使用して、選択したウェブ フレームワークに適切なリソースを設定します。

始める前に

Firebase にアプリのデプロイを開始する前に、次の要件とオプションを確認してください。

  • Firebase CLI バージョン 12.1.0 以降。任意の方法で CLI をインストールしている。
  • 省略可: Firebase プロジェクトで課金が有効になっている(SSR を使用する場合は必須)。

ローカルで実行する

統合をローカルでテストする手順は次のとおりです。

  1. ターミナルから firebase emulators:start を実行します。これにより、アプリがビルドされ、Firebase CLI を使用してサービスが提供されます。
  2. CLI から返されたローカル URL(通常は http://localhost:5000)でウェブアプリを開きます。

アプリを Firebase Hosting にデプロイする

変更を共有する準備が整ったら、アプリを実際のサイトにデプロイします。

  1. ターミナルから firebase deploy を実行します。
  2. ウェブサイトを確認します。SITE_ID.web.app または PROJECT_ID.web.app(カスタム ドメインを設定している場合はカスタム ドメイン)を確認します。

さまざまな環境を構成する

ステージング環境や本番環境など、さまざまなプロジェクト環境に複数の環境変数セットをデプロイできます。

Cloud Functions for Firebase と同様に、このツールは .env ファイルで指定された環境変数を読み込むための dotenv ファイル形式をサポートしています。

  • staging プロジェクト エイリアスがある場合は、.env.staging ファイルから環境変数をデプロイできます。
  • production プロジェクト エイリアスがある場合は、.env.production ファイルから環境変数をデプロイできます。
  • ID が PROJECT_ID のプロジェクトがある場合は、.env.PROJECT_ID ファイルから環境変数をデプロイできます。

詳細なガイドについては、Cloud Functions のドキュメントをご覧ください。

次のステップ

任意のフレームワークの詳細については、次のガイドをご覧ください。