Ofereça conteúdo dinâmico e hospede microsserviços com o Cloud Functions

Combine o Cloud Functions com o Firebase Hosting para gerar e veicular seu conteúdo dinâmico ou criar APIs REST como microsserviços.

O Cloud Functions para Firebase permite executar automaticamente código de back-end em resposta a solicitações HTTPS. Seu código é armazenado na nuvem do Google e executado em um ambiente gerenciado. Não há necessidade de gerenciar e dimensionar seus próprios servidores.

Para ver exemplos de casos de uso e exemplos de Cloud Functions integrados ao Firebase Hosting, visite nossa visão geral sem servidor .

Conecte o Cloud Functions ao Firebase Hosting

Esta seção fornece um exemplo passo a passo para conectar uma função ao Firebase Hosting.

Observe que, para melhorar o desempenho do fornecimento de conteúdo dinâmico, você pode opcionalmente ajustar as configurações de cache .

Etapa 1: configurar o Cloud Functions

  1. Verifique se você tem a versão mais recente da CLI do Firebase e se inicializou o Firebase Hosting.

    Para obter instruções detalhadas sobre como instalar a CLI e inicializar o Hosting, consulte o guia de primeiros passos do Hosting .

  2. Certifique-se de configurar o Cloud Functions:

    • Se você já configurou o Cloud Functions, prossiga para a Etapa 2: criar e testar uma função HTTPS .

    • Se você não configurou o Cloud Functions:

      1. Inicialize o Cloud Functions executando o seguinte comando na raiz do diretório do projeto:

        firebase init functions

      2. Quando solicitado, selecione JavaScript (este exemplo passo a passo usa JS).

      3. Verifique se você tem um diretório functions no diretório local do projeto (criado pelo comando do Firebase que você acabou de executar). Este diretório functions é onde reside o código do Cloud Functions.

Etapa 2: Crie e teste uma função HTTPS para seu site de hospedagem

  1. Abra /functions/index.js em seu editor favorito.

  2. Substitua o conteúdo do arquivo pelo código a seguir.

    Este código cria uma função HTTPS (chamada bigben ) que responde às solicitações HTTPS com um BONG para cada hora do dia, como um relógio.

    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. Teste suas funções localmente usando o Firebase Local Emulator Suite .

    1. Na raiz do diretório local do projeto, execute o seguinte comando:

      firebase emulators:start

    2. Acesse a função por meio da URL local retornada 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 a partir de um URL do Firebase Hosting para que ela possa gerar conteúdo dinâmico para seu site hospedado no Firebase.

Etapa 3: direcionar solicitações HTTPS para sua função

Com regras de reescrita , você pode direcionar 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 em seu site de hospedagem para executar a função bigben .

  1. Abra seu arquivo firebase.json .

  2. Adicione a seguinte configuração rewrite na seção 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. Confirme se o seu redirecionamento funciona conforme o esperado testando novamente com os emuladores do Firebase.

    1. Na raiz do diretório local do projeto, execute o seguinte comando:

      firebase emulators:start

    2. Visite o URL hospedado localmente do seu site conforme retornado pela CLI (geralmente localhost:5000 ), mas anexe o URL com bigben , assim: http://localhost:5000/bigben

  4. Itere sua função e sua funcionalidade para seu site. Use os emuladores do Firebase para testar essas iterações.

Para obter o melhor desempenho, coloque suas funções com Hosting escolhendo uma das seguintes regiões:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

Visite a página de configuração de hospedagem para obter mais detalhes sobre regras de reescrita . Você também pode aprender sobre a ordem de prioridade das respostas para diversas configurações de hospedagem.

Observe que, para melhorar o desempenho do fornecimento de conteúdo dinâmico, você pode opcionalmente ajustar as configurações de cache .

Etapa 4: implantar sua função

Depois que sua função estiver funcionando conforme desejado no emulador, você poderá prosseguir com a implantação, teste e execução com recursos reais do projeto. Este é um bom momento para considerar a configuração de opções de tempo de execução para controlar o comportamento de escalabilidade para funções em execução na produção.

  1. Implante sua função, bem como seu conteúdo e configuração de hospedagem em seu site, executando o seguinte comando na raiz do diretório local do projeto:

    firebase deploy --only functions,hosting

  2. Acesse seu site ativo e sua função nos seguintes URLs:

    • Seus subdomínios do Firebase:
      PROJECT_ID .web.app/bigben e PROJECT_ID .firebaseapp.com/bigben

    • Quaisquer domínios personalizados conectados:
      CUSTOM_DOMAIN /bigben

Use uma estrutura da web

Você pode usar estruturas da Web, como Express.js , no Cloud Functions para fornecer 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 Express.js com Firebase Hosting e Cloud Functions.

  1. Instale Express.js em seu projeto local executando o seguinte comando em seu diretório functions :

    npm install express --save

  2. Abra seu arquivo /functions/index.js , importe e inicialize Express.js:

    const functions = require('firebase-functions');
const express = require('express');
const app = express();

  3. Adicione os dois pontos de extremidade a seguir:

    1. Adicione o primeiro endpoint para servir 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>`);
});

    2. E outro endpoint para retornar a contagem do BONG como uma API, no formato JSON, 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)});
});

  4. Exporte o aplicativo Express.js como uma função HTTPS:

    exports.app = functions.https.onRequest(app);

  5. No seu arquivo firebase.json , direcione todas as solicitações para a função app . Essa reescrita permite que o Express.js atenda aos diferentes subcaminhos que configuramos (neste exemplo, / e /api ).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Adicionar middleware

Continuando nosso exemplo, agora que você está usando Express.js, você pode adicionar o middleware Express.js da maneira típica. Por exemplo, você pode habilitar solicitações CORS em nossos endpoints.

  1. Instale o middleware cors executando o seguinte comando:

    npm install --save cors

  2. Abra seu arquivo /functions/index.js e adicione cors ao seu aplicativo Express.js, assim:

    const cors = require('cors')({origin: true});
app.use(cors);

Acesse a documentação do Cloud Functions para saber mais sobre como usar o Firebase com aplicativos Express e módulos de middleware.

Próximos passos