Предоставляйте динамический контент и размещайте микросервисы с помощью облачных функций.

Объедините облачные функции с хостингом Firebase, чтобы создавать и обслуживать динамический контент или создавать REST API в виде микросервисов.

Облачные функции для Firebase позволяют автоматически запускать серверный код в ответ на запросы HTTPS. Ваш код хранится в облаке Google и выполняется в управляемой среде. Нет необходимости управлять и масштабировать собственные серверы.

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

Подключите облачные функции к хостингу Firebase

В этом разделе представлен пошаговый пример подключения функции к хостингу Firebase.

Обратите внимание: чтобы повысить производительность обслуживания динамического контента, вы можете дополнительно настроить параметры кэша .

Шаг 1. Настройте облачные функции

  1. Убедитесь, что у вас установлена ​​последняя версия интерфейса командной строки Firebase и что вы инициализировали хостинг Firebase.

    Подробные инструкции по установке CLI и инициализации хостинга см. в руководстве «Начало работы с хостингом» .

  2. Убедитесь, что вы настроили облачные функции:

    • Если вы уже настроили облачные функции, вы можете перейти к шагу 2. Создайте и протестируйте функцию HTTPS .

    • Если вы не настроили облачные функции:

      1. Инициализируйте облачные функции, выполнив следующую команду из корня каталога вашего проекта:

        firebase init functions

      2. При появлении запроса выберите JavaScript (в этом пошаговом примере используется JS).

      3. Убедитесь, что у вас есть каталог functions в локальном каталоге проекта (созданный командой Firebase, которую вы только что выполнили). В этом каталоге functions находится код облачных функций.

Шаг 2. Создайте и протестируйте функцию HTTPS для вашего хостинг-сайта.

  1. Откройте /functions/index.js в своем любимом редакторе.

  2. Замените содержимое файла следующим кодом.

    Этот код создает функцию HTTPS (с именем bigben ), которая отвечает на запросы HTTPS с помощью BONG для каждого часа дня, как часы.

    const functions = require('firebase-functions');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. Проверьте свои функции локально с помощью Firebase Local Emulator Suite .

    1. Из корня локального каталога проекта выполните следующую команду:

      firebase emulators:start

    2. Получите доступ к функции через локальный URL-адрес, возвращаемый CLI, например: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

Посетите документацию по облачным функциям , чтобы узнать больше о запросах HTTPS.

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

Шаг 3. Направьте HTTPS-запросы к вашей функции.

С помощью правил перезаписи вы можете направлять запросы, соответствующие определенным шаблонам, в один пункт назначения. Следующие шаги покажут вам, как направить все запросы с пути ../bigben на вашем хостинг-сайте для выполнения функции bigben .

  1. Откройте файл firebase.json .

  2. Добавьте следующую конфигурацию rewrite в раздел hosting :

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. Убедитесь, что ваше перенаправление работает должным образом, снова протестировав его с помощью эмуляторов Firebase.

    1. Из корня локального каталога проекта выполните следующую команду:

      firebase emulators:start

    2. Посетите локально размещенный URL-адрес вашего сайта, возвращаемый CLI (обычно localhost:5000 ), но добавьте URL-адрес с помощью bigben , например: http://localhost:5000/bigben

  4. Повторите свою функцию и ее функциональность для вашего сайта. Используйте эмуляторы Firebase для тестирования этих итераций.

Для достижения наилучшей производительности разместите свои функции на хостинге, выбрав один из следующих регионов:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

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

Обратите внимание: чтобы повысить производительность обслуживания динамического контента, вы можете дополнительно настроить параметры кэша .

Шаг 4. Разверните функцию

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

  1. Разверните свою функцию, а также содержимое и конфигурацию хостинга на своем сайте, выполнив следующую команду из корня локального каталога проекта:

    firebase deploy --only functions,hosting

  2. Получите доступ к своему действующему сайту и своей функции по следующим URL-адресам:

    • Ваши субдомены Firebase:
      PROJECT_ID .web.app/bigben и PROJECT_ID .firebaseapp.com/bigben

    • Любые подключенные персональные домены :
      CUSTOM_DOMAIN /bigben

Используйте веб-фреймворк

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

В следующем разделе представлен пошаговый пример использования Express.js с хостингом Firebase и облачными функциями.

  1. Установите Express.js в свой локальный проект, выполнив следующую команду из каталога functions :

    npm install express --save

  2. Откройте файл /functions/index.js , затем импортируйте и инициализируйте Express.js:

    const functions = require('firebase-functions');
const express = require('express');
const app = express();

  3. Добавьте следующие две конечные точки:

    1. Добавьте первую конечную точку для обслуживания индекса нашего веб-сайта в / .

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. И еще одна конечная точка для возврата счетчика BONG в виде API в формате JSON в /api :

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. Экспортируйте приложение Express.js как функцию HTTPS:

    exports.app = functions.https.onRequest(app);

  5. В файле firebase.json направьте все запросы к функции app . Эта перезапись позволяет Express.js обслуживать другой настроенный нами подпуть (в этом примере / и /api ).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Добавить промежуточное ПО

Продолжая наш пример, теперь, когда вы используете Express.js, вы можете добавить промежуточное программное обеспечение Express.js обычным способом. Например, вы можете включить запросы CORS на наших конечных точках.

  1. Установите промежуточное программное обеспечение cors , выполнив следующую команду:

    npm install --save cors

  2. Откройте файл /functions/index.js , затем добавьте cors в приложение Express.js, например:

    const cors = require('cors')({origin: true});
app.use(cors);

Посетите документацию по облачным функциям , чтобы узнать больше об использовании Firebase с приложениями Express и модулями промежуточного программного обеспечения.

Следующие шаги