Соедините облачные функции с хостингом Firebase, чтобы создавать и обслуживать динамический контент или создавать API-интерфейсы REST в виде микросервисов.
Облачные функции для Firebase позволяют автоматически запускать серверный код в ответ на HTTPS-запросы. Ваш код хранится в облаке Google и работает в управляемой среде. Нет необходимости управлять собственными серверами и масштабировать их.
Примеры использования и примеры облачных функций, интегрированных с Firebase Hosting, см. в нашем обзоре бессерверных решений .
Подключите облачные функции к хостингу Firebase
В этом разделе представлен пошаговый пример подключения функции к Firebase Hosting.
Обратите внимание, что для повышения производительности обслуживания динамического контента вы можете дополнительно настроить параметры кэширования .
Шаг 1. Настройте облачные функции
Убедитесь, что у вас установлена последняя версия интерфейса командной строки Firebase и что вы инициализировали Firebase Hosting.
Подробные инструкции по установке CLI и инициализации хостинга см. в руководстве по началу работы для хостинга .
Убедитесь, что вы настроили облачные функции:
Если вы уже настроили облачные функции, вы можете перейти к шагу 2. Создание и тестирование функции HTTPS .
Если вы не настроили Cloud Functions:
Инициализируйте Cloud Functions, выполнив следующую команду из корня каталога вашего проекта:
firebase init functions
При появлении запроса выберите JavaScript (в этом пошаговом примере используется JS).
Убедитесь, что у вас есть каталог
functions
в вашем локальном каталоге проекта (созданный командой Firebase, которую вы только что запустили). В этом каталогеfunctions
находится код облачных функций.
Шаг 2. Создайте и протестируйте функцию HTTPS для своего сайта хостинга.
Откройте
/functions/index.js
в вашем любимом редакторе.Замените содержимое файла следующим кодом.
Этот код создает функцию 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>`); });
Протестируйте свои функции локально с помощью Firebase Local Emulator Suite .
В корне вашего локального каталога проекта выполните следующую команду:
firebase emulators:start
Получите доступ к функции через локальный URL-адрес, возвращенный интерфейсом командной строки, например:
.http://localhost:5001/ PROJECT_ID /us-central1/bigben
Посетите документацию по облачным функциям , чтобы узнать больше о HTTPS-запросах.
На следующем шаге вы узнаете, как получить доступ к этой функции HTTPS из URL-адреса хостинга Firebase , чтобы он мог генерировать динамический контент для вашего сайта, размещенного в Firebase.
Шаг 3. Направьте HTTPS-запросы к вашей функции.
С помощью правил перезаписи вы можете направлять запросы, соответствующие определенным шаблонам, в одно место назначения. Следующие шаги показывают, как направить все запросы по пути ../bigben
на вашем хостинг-сайте на выполнение функции bigben
.
Откройте файл
firebase.json
.Добавьте следующую конфигурацию
rewrite
в разделеhosting
:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": "bigben", "region": "us-central1" // optional (see note below) } ] }
Убедитесь, что ваше перенаправление работает должным образом, снова протестировав эмуляторы Firebase.
В корне вашего локального каталога проекта выполните следующую команду:
firebase emulators:start
Посетите локально размещенный URL-адрес вашего сайта, возвращенный CLI (обычно
localhost:5000
), но добавьте URL-адрес с помощьюbigben
, например:http://localhost:5000/bigben
Повторите свою функцию и ее функциональность для вашего сайта. Используйте эмуляторы Firebase для тестирования этих итераций.
Посетите страницу конфигурации хостинга, чтобы узнать больше о правилах перезаписи . Вы также можете узнать о приоритетном порядке ответов для различных конфигураций хостинга.
Обратите внимание, что для повышения производительности обслуживания динамического контента вы можете дополнительно настроить параметры кэширования .
Шаг 4. Разверните свою функцию
После того, как ваша функция заработает в эмуляторе должным образом, вы можете приступить к ее развертыванию, тестированию и запуску с реальными ресурсами проекта. Это хорошее время, чтобы подумать о настройке параметров среды выполнения для управления поведением масштабирования для функций, работающих в рабочей среде.
Разверните свою функцию, а также контент и конфигурацию хостинга на своем сайте, выполнив следующую команду из корня локального каталога проекта:
firebase deploy --only functions,hosting
Получите доступ к вашему действующему сайту и вашей функции по следующим URL-адресам:
Ваши поддомены Firebase:
PROJECT_ID .web.app/bigben
иPROJECT_ID .firebaseapp.com/bigben
Любые подключенные персональные домены :
CUSTOM_DOMAIN /bigben
Используйте веб-фреймворк
Вы можете использовать веб-фреймворки, такие как Express.js , в Cloud Functions, чтобы обслуживать динамический контент вашего приложения и упростить написание сложных веб-приложений.
В следующем разделе представлен пошаговый пример использования Express.js с хостингом Firebase и облачными функциями.
Установите Express.js в свой локальный проект, выполнив следующую команду из каталога
functions
:npm install express --save
Откройте файл
/functions/index.js
, затем импортируйте и инициализируйте Express.js:const functions = require('firebase-functions'); const express = require('express'); const app = express();
Добавьте следующие две конечные точки:
Добавьте первую конечную точку для обслуживания индекса нашего веб-сайта в
/
.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>`); });
И еще одна конечная точка для возврата счетчика
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)}); });
Экспортируйте приложение Express.js как функцию HTTPS:
exports.app = functions.https.onRequest(app);
В файле
firebase.json
направьте все запросы к функцииapp
. Это переписывание позволяет Express.js обслуживать другой подпуть, который мы настроили (в этом примере/
и/api
).{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
Добавить промежуточное ПО
Продолжая наш пример, теперь, когда вы используете Express.js, вы можете добавить промежуточное ПО Express.js обычным способом. Например, вы можете включить запросы CORS на наших конечных точках.
Установите промежуточное ПО
cors
, выполнив следующую команду:npm install --save cors
Откройте файл
/functions/index.js
, затем добавьтеcors
в свое приложение Express.js, например:const cors = require('cors')({origin: true}); app.use(cors);
Посетите документацию по облачным функциям , чтобы узнать больше об использовании Firebase с приложениями Express и модулями промежуточного ПО.
Следующие шаги
Настройте кэширование вашего динамического контента в глобальной CDN.
Взаимодействие с другими сервисами Firebase с помощью Firebase Admin SDK .
Ознакомьтесь с ценами , квотами и ограничениями для облачных функций.