Интегрируйте другие платформы с Express.js

С помощью дополнительной настройки вы можете расширить базовую функциональность CLI, учитывающую особенности фреймворков, и добавить поддержку интеграции с фреймворками, отличными от Angular и Next.js.

Прежде чем начать

Прежде чем приступить к развертыванию приложения в Firebase, ознакомьтесь со следующими требованиями и параметрами:

  • Firebase CLI версии 12.1.0 или более поздней. Убедитесь, что вы установили CLI выбранным вами способом.
  • Необязательно: включите оплату в вашем проекте Firebase (обязательно, если вы планируете использовать SSR).

Инициализация Firebase

Для начала инициализируйте Firebase для вашего проекта на основе фреймворка. Используйте Firebase CLI для нового проекта или измените firebase.json для существующего проекта.

Инициализировать новый проект

  1. В интерфейсе командной строки Firebase включите предварительный просмотр веб-фреймворков: 
    firebase experiments:enable webframeworks

  2. Выполните команду инициализации из командной строки, а затем следуйте инструкциям:

    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 в package.json .

Учитывая следующий файл package.json:

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

Интерфейс командной строки Firebase вызывает только ваш скрипт сборки, поэтому вам необходимо убедиться, что ваш скрипт сборки является исчерпывающим.

{
    "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 ).