Интегрируйте другие платформы с 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 directorys в 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 Authentication

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