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

Используйте 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-адрес, возвращаемый интерфейсом командной строки, например: 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-адресам:

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

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

В следующем разделе представлен пошаговый пример использования 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 в формате JSON через API, доступный по адресу /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 .

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