サーバーでレンダリングされる Angular または Next.js アプリを構築する場合は、最新のウェブフレームワーク向けのフルスタックソリューションである次世代の Firebase App Hosting をご確認ください。

他のフレームワークを Express.js と統合する

追加の構成を行うことで、基本的なフレームワークに対応する CLI 機能を基に、Angular と Next.js 以外のフレームワークに統合サポートを拡張できます。

始める前に

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

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

Firebase を初期化する

まず、フレームワークプロジェクトで Firebase を初期化します。新しいプロジェクトの場合は Firebase CLI を使用します。既存のプロジェクトの場合は firebase.json を変更します。

新しいプロジェクトを初期化する

Firebase CLI で、ウェブフレームワークのプレビューを有効にします。
```
firebase experiments:enable webframeworks
```
CLI から初期化コマンドを実行し、プロンプトに沿って操作します。
```
firebase init hosting
```
ホスティングソースディレクトリを選択します。既存のウェブアプリを指定できます。
[Dynamic web hosting with web framework] を選択します。
Express.js / custom を選択します。

既存のプロジェクトを初期化する

firebase.json のホスティング構成を変更して、public オプションではなく source オプションを設定します。例:

{
  "hosting": {
    "source": "./path-to-your-express-directory",
  }
}

静的コンテンツを提供する

静的コンテンツをデプロイする前に、アプリケーションを構成する必要があります。

構成

アプリケーションのデプロイ方法を理解するには、Firebase CLI がアプリをビルドできるだけでなく、Hosting 向けアセットの配置場所を認識できる必要があります。これは、package.json の npm ビルドスクリプトと CJS ディレクトリディレクティブを使用して行います。

次の package.json について考えてみましょう。

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

Firebase CLI はビルドスクリプトのみを呼び出するため、ビルドスクリプトがすべてを網羅していることを確認する必要があります。

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

フレームワークですぐに使用できる事前レンダリングがサポートされていない場合は、Rendertron などのツールの使用を検討してください。Rendertron を使用すると、アプリのローカルインスタンスに対するヘッドレス Chrome リクエストを作成し、結果の HTML を Hosting で提供できます。

さまざまなフレームワークとビルドツールによって、アーティファクトがさまざまな場所に保存されます。directories.serve を使用して、ビルドスクリプトが結果のアーティファクトを出力する場所を CLI に指示します。

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

デプロイ

アプリの構成後、標準のデプロイコマンドを使用して静的コンテンツを提供できます。

firebase deploy

動的コンテンツを提供する

Cloud Functions for Firebase で Express アプリを提供するには、ライブラリが npm でパッケージ化された後に Firebase が検出できるように、Express アプリ（または Express スタイルの URL ハンドラ）をエクスポートします。

これを行うには、files ディレクティブがサーバーに必要なすべての要素を含んでいることを確認します。また、メインエントリポイントが package.json で正しく設定されていることも確認します。

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

app という名前の関数から Express アプリをエクスポートします。

// server.js
export function app() {
  const server = express();
   …
   return server;
}

Express スタイルの URL ハンドラをエクスポートする場合は、handle という名前を付けます。

export function handle(req, res) {
   res.send(‘hello world’);
}

デプロイ

firebase deploy

この処理では、静的コンテンツを Firebase Hosting にデプロイします。また、Firebase は、Cloud Functions for Firebase でホストされている Express アプリにフォールバックできます。

省略可: Firebase Authentication との統合

ウェブフレームワーク対応の Firebase デプロイツールは、Cookie を使用してクライアントとサーバーの状態を自動的に同期します。認証コンテキストにアクセスするために、Express の res.locals オブジェクトに認証済みの Firebase アプリインスタンス（firebaseApp）と現在ログインしているユーザー（currentUser）が含まれている場合があります。