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

Объедините Cloud Functions с Firebase Hosting для генерации и обслуживания динамического контента или создавайте REST API в качестве микросервисов.

Cloud Functions for Firebase позволяют автоматически запускать бэкенд-код в ответ на HTTPS-запросы. Ваш код хранится в облаке Google и работает в управляемой среде. Вам не нужно управлять собственными серверами и масштабировать их.

Примеры использования и примеры Cloud Functions интегрированных с Firebase Hosting , можно найти в нашем обзоре бессерверных решений .

Подключите Cloud Functions к Firebase Hosting

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

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

Шаг 1: Настройка Cloud Functions

  1. Убедитесь, что у вас установлена ​​последняя версия Firebase CLI и вы инициализировали Firebase Hosting .

    Подробные инструкции по установке CLI и инициализации Hosting см. в руководстве по началу работы с Hosting .

  2. Убедитесь, что вы настроили Cloud Functions :

    • Если вы уже настроили Cloud Functions , вы можете перейти к Шагу 2: Создание и тестирование HTTPS-функции .

    • Если вы не настроили Cloud Functions :

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

        firebase init functions

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

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

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

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

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

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

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

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-запросах можно узнать в документации Cloud Functions .

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

Шаг 3: Прямые HTTPS-запросы к вашей функции

С помощью правил перезаписи вы можете направлять запросы, соответствующие определённым шаблонам, в один пункт назначения. Следующие шаги показывают, как направить все запросы с пути ../bigben на вашем Hosting сайте для выполнения функции 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 для тестирования этих итераций.

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

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

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

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

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

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

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

    firebase deploy --only functions,hosting

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

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

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

В следующем разделе представлен пошаговый пример использования Express.js с Firebase Hosting и Cloud Functions .

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

    npm install express --save

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

    const functions = require('firebase-functions/v1');
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 и модулями промежуточного программного обеспечения можно найти в документации Cloud Functions .

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