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ê 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.

Se region for omitida de um bloco function da configuração hosting.rewrites , a CLI do Firebase tentará detectar automaticamente a região a partir do código-fonte da função que, se não for especificado, será padronizado como us-central1 . Se o código-fonte da função não estiver disponível, a CLI tentará detectar a região da função implementada. Se a função estiver em várias regiões, a CLI exigirá que region seja especificada na configuração hosting.rewrites .

O recurso pinTag está disponível apenas no Cloud Functions para Firebase (2ª geração). Com esse recurso, você pode garantir que cada função de geração de conteúdo dinâmico do seu site seja mantida sincronizada com seus recursos estáticos de hospedagem e configuração de hospedagem. Além disso, esse recurso permite que você visualize suas reescritas para funções nos canais de visualização do Hosting.

Se você adicionar "pinTag": true a um bloco function da configuração hosting.rewrites , a função "fixada" será implantada junto com seus recursos e configuração estáticos do Hosting, mesmo ao executar firebase deploy --only hosting . Se você reverter uma versão do seu site, a função "fixada" também será revertida.

Esse recurso depende de tags do Cloud Run , que têm um limite de 1.000 tags por serviço e 2.000 tags por região. Isso significa que após centenas de implantações, as versões mais antigas de um site podem parar de funcionar.

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