Google is committed to advancing racial equity for Black communities. See how.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

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

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

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

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

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

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

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

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

  1. Удостоверься что:

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

  2. Если вы уже настроили функции облака, вы можете перейти к шагу 2: создать функцию HTTP .

  3. Если вы еще не настроили облачные функции:

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

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

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

Шаг 2: Создайте функцию HTTP для вашего хостинга

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

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

    Этот код создает функцию HTTP (с именем bigben ), которая отвечает на запросы HTTP с 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 deploy

    Функция теперь доступна по URL
    https://us-central1- PROJECT_ID .cloudfunctions.net/bigben .

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

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

Шаг 3: Направьте запросы хостинга на вашу функцию

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

  1. Откройте файл firebase.json .

  2. Добавьте следующую конфигурацию rewrite в разделе hosting :

    "hosting": {
     // ...
    
     // Add the "rewrites" attribute within "hosting"
     "rewrites": [ {
       "source": "/bigben",
       "function": "bigben"
     } ]
    }
    
  3. Запустите команду firebase deploy снова.

    Ваша функция теперь доступна через следующие URL:

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

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

Вы можете использовать веб-фреймворки, такие как 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');
    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 как функцию HTTP:

    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 и модулями промежуточного программного обеспечения.

Тест локально

Вы можете обслуживать и запускать свои функции HTTP локально, используя Firebase CLI. Это позволяет вам просматривать и тестировать ваш проект Firebase перед развертыванием в производство.

  1. Убедитесь, что Firebase CLI и SDK Firebase firebase-functions являются самыми последними доступными версиями. Чтобы обновить оба, выполните следующие две команды из каталога functions вашего локального проекта:

    npm install -g firebase-tools
    npm install --save firebase-functions@latest
  2. Обслуживайте ваш проект Firebase локально, выполнив следующую команду в корневом каталоге вашего проекта.

    Эта команда эмулирует хостинг и функционирует на локально размещенных URL-адресах.

    firebase serve
Когда вы используете облачные функции для генерации динамического контента для Firebase Hosting, firebase serve по умолчанию использует ваши локальные HTTP-функции в качестве прокси для хостинга. Дополнительные параметры конфигурации для функций Firebase Hosting и Cloud см. В справочнике по интерфейсу командной строки Firebase .

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