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

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

始める前に

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

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

Firebase を初期化する

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

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

  1. Firebase CLI で、ウェブ フレームワークのプレビューを有効にします: 
    firebase experiments:enable webframeworks

  2. CLI から初期化コマンドを実行します。

    firebase init hosting
    というプロンプトが表示されます。

  3. 「Do you want to use a web framework? (experimental)」に「yes」と回答します。

  4. ホスティング ソース ディレクトリを選択します。既存のウェブアプリを指定できます。

  5. プロンプトが表示されたら、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）が含まれている場合があります。