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

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

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

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

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

Инициализировать Firebase

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

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

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

   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 должен уметь создавать ваше приложение и знать, где ваши инструменты размещают ресурсы, предназначенные для 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-адресов в экспресс-стиле) экспортировано таким образом, чтобы 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",
    ...
}

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

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

Или, если вы предпочитаете экспортировать обработчик URL-адресов в экспресс-стиле, назовите его 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 ).