Интегрируйте другие платформы с 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. Ответьте «да» на вопрос «Хотите ли вы использовать веб-фреймворк? (экспериментально)»

4. Выберите исходный каталог хостинга; это может быть существующее веб-приложение.

5. При появлении запроса выберите Express.js / custom.

Инициализировать существующий проект

Измените конфигурацию хостинга в firebase.json , указав параметр source вместо public . Например:

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

Подавать статический контент

Перед развертыванием статического контента вам необходимо настроить приложение.

Настроить

Чтобы знать, как развернуть ваше приложение, Firebase CLI должен уметь как собирать его, так и знать, где ваши инструменты размещают ресурсы, предназначенные для Hosting . Это достигается с помощью скрипта сборки npm и директивы CJS directories в package.json .

Дан следующий 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

Подавать динамический контент

Чтобы обслуживать приложение Express в Cloud Functions for Firebase , убедитесь, что ваше приложение Express (или обработчик URL в стиле Express) экспортировано таким образом, чтобы Firebase мог найти его после упаковки вашей библиотеки с помощью npm.

Для этого убедитесь, что ваша директива 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",
    ...
}

Экспортируйте свое приложение Express из функции с именем app :

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

Или, если вы предпочитаете экспортировать обработчик URL в стиле Express, назовите его handle :

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

Развертывать

firebase deploy

Это развернет ваш статический контент на Firebase Hosting и позволит Firebase использовать ваше приложение Express, размещенное на Cloud Functions for Firebase .

Дополнительно: интеграция с аутентификацией Firebase

Инструментарий развертывания Firebase, совместимый с веб-фреймворком, автоматически синхронизирует состояние клиента и сервера с помощью файлов cookie. Для доступа к контексту аутентификации объект Express res.locals может содержать аутентифицированный экземпляр приложения Firebase ( firebaseApp ) и данные текущего пользователя ( currentUser ).