Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Обслуживайте динамический контент и размещайте микросервисы с помощью Cloud Functions

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

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

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

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

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

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

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

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

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

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

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

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

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

        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-адрес, возвращенный интерфейсом командной строки, например: 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": "bigben",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. Убедитесь, что ваше перенаправление работает должным образом, снова протестировав эмуляторы Firebase.

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

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

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

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

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

Шаг 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 , в Cloud Functions, чтобы обслуживать динамический контент вашего приложения и упростить написание сложных веб-приложений.

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

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