Exibir conteúdo dinâmico e hospedar microsserviços com o Cloud Run

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

O Cloud Functions for Firebase permite executar automaticamente o 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 é necessário gerenciar e dimensionar servidores próprios.

Se você quiser encontrar exemplos de casos de uso e amostras do Cloud Functions integrado ao Firebase Hosting, acesse nossa visão geral de opções sem servidor.

Conectar a Cloud Functions e Firebase Hosting

Nesta seção, apresentamos um exemplo passo a passo sobre como conectar uma função ao 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 Cloud Functions

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

  2. Verifique se você configurou 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. Observe que este exemplo usa JS.

      3. 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ório functions.

Etapa 2: criar e testar uma função HTTPS para seu site do Hosting

  1. Abrir /functions/index.js no seu editor favorito.

  2. 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 um BONG 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>`);
});

  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 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 ajudará você a acessar essa função HTTPS usando um URL do Firebase Hosting de modo a gerar conteúdo dinâmico para seu 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 do Hosting para executar a função bigben.

  1. Abra o arquivo firebase.json.

  2. Adicione a seguinte configuração de 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. Para confirmar se o redirecionamento funciona como esperado, teste novamente com os emuladores do Firebase.

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

      firebase emulators:start

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

  4. 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 as funções no Hosting ao escolhendo uma das seguintes regiões:

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

Visite a página de configuração do Hosting para conferir mais detalhes sobre regras de substituição. Saiba mais sobre a ordem de prioridade das respostas para várias configurações do 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.

  1. Implante a função e o conteúdo do Hosting e configure o site executando o seguinte comando na raiz do diretório do projeto local:

    firebase deploy --only functions,hosting

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

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

    • Qualquer domínio personalizado conectado:
      CUSTOM_DOMAIN/bigben

Usar um framework Web

Utilize frameworks da Web, como Express.js, no Cloud Functions para veicular o conteúdo dinâmico do seu aplicativo e criar apps da Web complexos com mais facilidade.

A seção a seguir fornece um exemplo de orientação sobre como usar o Express.js com Firebase Hosting e Cloud Functions.

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

    npm install express --save

  2. 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();

  3. Adicione os dois endpoints a seguir:

    1. 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>`);
});

    2. 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)});
});

  4. Exporte o app 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 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.

  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, 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