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

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

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

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

Подключите 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. Проверьте, есть ли у вас каталог functions в локальном каталоге проекта (созданном командой Firebase, которую вы только что запустили). В этом каталоге functions находится код для Cloud 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);

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

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