Combine Cloud Functions com Firebase Hosting para gerar e veicular seus conteúdo dinâmico ou criar APIs REST como microsserviços.
O Cloud Functions for Firebase permite executar automaticamente o back-end em resposta a solicitações HTTPS. Seu código é armazenado na nuvem do Google e executado em um ambiente gerenciado. Não é necessário gerenciar e dimensionar servidores próprios.
Por exemplo, casos de uso e amostras para Cloud Functions integrados à Firebase Hosting, acesse nossa visão geral dos recursos sem servidor.
Conectar Cloud Functions a Firebase Hosting
Esta seção fornece um exemplo passo a passo para conectar uma função a Firebase Hosting:
Observe que, para melhorar o desempenho da exibição de conteúdo dinâmico, é possível, opcionalmente, ajustar suas configurações de cache.
Etapa 1: configurar o Cloud Functions
Verifique se você tem a versão mais recente da CLI Firebase e se iniciou o Firebase Hosting.
Para instruções detalhadas sobre como instalar a CLI e inicializar o Hosting, consulte o Guia de início rápido do Hosting.
Verifique se você configurou o Cloud Functions:
Se você já configurou o Cloud Functions, prossiga para Etapa 2: criar e testar uma função HTTPS
Se você não configurou o Cloud Functions:
Inicialize o Cloud Functions executando o seguinte comando na raiz do diretório do projeto:
firebase init functions
Quando solicitado, selecione JavaScript. Observe que este exemplo usa JS.
Verifique se você tem um diretório
functions
no diretório do projeto local (criado pelo comando do Firebase que você acabou de executar). O código de Cloud Functions fica armazenado nesse diretóriofunctions
.
Etapa 2:criar e testar uma função HTTPS para seu site Hosting
Abrir
/functions/index.js
no seu editor favorito.Substitua o conteúdo do arquivo pelo código abaixo.
Esse código cria uma função HTTPS
bigben
que responde a solicitações HTTPS com umBONG
para cada hora do dia, como um relógio.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>`); });
Teste suas funções localmente usando a Firebase Local Emulator Suite
Na raiz do diretório local do projeto, execute o seguinte comando:
firebase emulators:start
Acesse a função por meio do URL local retornado pela CLI. Por exemplo:
.http://localhost:5001/PROJECT_ID/us-central1/bigben
Acesse a documentação do Cloud Functions para saber mais sobre solicitações HTTPS.
A próxima etapa mostra como acessar essa função HTTPS de uma URL do Firebase Hosting para que ele possa gerar conteúdo dinâmico para sua site hospedado pelo Firebase.
Etapa 3: encaminhar solicitações HTTPS para sua função
Com as
regras de substituição, é possível encaminhar solicitações
que correspondam a padrões específicos para um único destino. As etapas a seguir mostram
como direcionar todas as solicitações do caminho ../bigben
no seu site Hosting
para executar a função bigben
.
Adicione a seguinte configuração de
rewrite
na seçãohosting
:"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) } } ] }
Para confirmar se o redirecionamento funciona como esperado, teste novamente com os emuladores do Firebase.
Na raiz do diretório local do projeto, execute o seguinte comando:
firebase emulators:start
Acesse o URL hospedado localmente para seu site, conforme retornado pela CLI (geralmente
localhost:5000
), mas anexe o URL combigben
, assim:http://localhost:5000/bigben
Itere na função e na funcionalidade do seu site. Use os emuladores do Firebase para testar essas iterações.
Para ter o melhor desempenho, coloque suas funções com Hosting da escolhendo uma das seguintes regiões:
us-west1
us-central1
us-east1
europe-west1
asia-east1
Acesse a página de configuração do Hosting para mais detalhes sobre regras de substituição. Saiba mais sobre a ordem de prioridade das respostas para várias configurações de Hosting.
Observe que, para melhorar o desempenho da exibição de conteúdo dinâmico, é possível, opcionalmente, ajustar suas configurações de cache.
Etapa 4: implantar a função
Quando a função estiver funcionando como esperado no emulador, será possível continuar implantando, testando e executando-a com recursos do projeto real. Este é um bom momento para considerar a definição de opções de ambiente de execução para controlar o comportamento do escalonamento para funções em execução na produção.
Implante a função, o conteúdo do Hosting e a configuração no site executando o seguinte comando na raiz do seu projeto local diretório:
firebase deploy --only functions,hosting
Acesse o site ativo e a função nos seguintes URLs:
Subdomínios do Firebase:
PROJECT_ID.web.app/bigben
ePROJECT_ID.firebaseapp.com/bigben
Qualquer domínio personalizado conectado:
CUSTOM_DOMAIN/bigben
Usar um framework Web
É possível usar frameworks da Web, como Express.js, em Cloud Functions para exibir o conteúdo dinâmico do seu aplicativo e escrever aplicativos da Web complexos com mais facilidade.
A seção a seguir fornece um exemplo passo a passo para usar o Express.js com Firebase Hosting e Cloud Functions.
Instale o Express.js no seu projeto local executando o seguinte comando pelo diretório
functions
:npm install express --save
Abra seu arquivo
/functions/index.js
e, em seguida, importe e inicialize o Express.js:const functions = require('firebase-functions/v1'); const express = require('express'); const app = express();
Adicione os dois endpoints a seguir:
Adicione o primeiro ponto de extremidade para exibir o índice do nosso site em
/
.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>`); });
Outro endpoint no formato JSON para retornar a contagem de
BONG
como uma API em/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)}); });
Exporte o app Express.js como uma função HTTPS:
exports.app = functions.https.onRequest(app);
No seu arquivo
firebase.json
, direcione todas as solicitações para a funçãoapp
. Essa substituição permite que o Express.js exiba o subcaminho configurado que, neste exemplo, é/
e/api
.{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
Adicionar middleware
Agora que você está usando o Express.js, poderá adicionar o middleware Express.js (inglês) da maneira usual. Por exemplo, você pode ativar solicitações CORS em nossos pontos de extremidade.
Instale o middleware
cors
executando o seguinte comando:npm install --save cors
Abra seu arquivo
/functions/index.js
e adicionecors
ao seu aplicativo Express.js, da seguinte forma:const cors = require('cors')({origin: true}); app.use(cors);
Acesse a documentação do Cloud Functions para saber como usar o Firebase com apps Express e módulos de middleware.
Próximas etapas
Configure o armazenamento em cache do seu conteúdo dinâmico em uma CDN global.
Interaja com outros serviços do Firebase usando o SDK Admin do Firebase.
Revise os preços e as cotas e limites de Cloud Functions.