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

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

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

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

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

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

  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

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

  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