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

Объедините 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 и вы инициализировали 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 .

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

На следующем шаге вы узнаете, как получить доступ к этой функции 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-адресам:

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

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

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

Вы можете использовать веб-платформы, такие как 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 и модулями промежуточного программного обеспечения.

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