Ir para o console

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

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

Com o Cloud Functions para Firebase, você pode 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 seus servidores próprios.

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

Conectar o Cloud Functions ao Firebase Hosting

Nesta seção, apresentamos um exemplo passo a passo sobre como conectar uma função ao Firebase Hosting.

Para melhorar o desempenho da veiculação de conteúdo dinâmico, você pode ajustar suas configurações de cache.

Etapa 1: configurar o Cloud Functions

  1. Verifique se:

    • você tem a versão mais recente da Firebase CLI executando npm install -g firebase-tools;

    • você inicializou o Firebase Hosting.

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

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

  3. Se você ainda não configurou o Cloud Functions, faça o seguinte:

    1. Inicialize o Cloud Functions executando o seguinte comando a partir da raiz do diretório do seu projeto:

      firebase init functions
    2. Quando solicitado, selecione JavaScript. Observe que este exemplo usa JS.

    3. Certifique-se de que você tenha um diretório functions no diretório local do seu projeto. O Cloud Functions fica armazenado nesse diretório functions.

Etapa 2: criar uma função HTTP para seu site do Hosting

  1. Abra /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 HTTP bigben que responde a solicitações HTTP com um BONG para cada hora do dia, assim 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. Implante essa função ao seu site executando o seguinte comando na raiz do diretório do seu projeto:

    firebase deploy

    A função agora é acessível pelo URL:
    https://us-central1-firebase-project-id.cloudfunctions.net/bigben.

Veja a documentação do Cloud Functions para saber mais sobre solicitações HTTP.

A próxima etapa ajudará você a acessar essa função HTTP a partir de um URL do Firebase Hosting de modo a gerar conteúdo dinâmico para seu site hospedado pelo Firebase.

Etapa 3: encaminhar solicitações de hospedagem 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. Por exemplo, para direcionar todas as solicitações da página /bigben no seu site do Hosting com o objetivo de executar a função bigben.

  1. Abra seu arquivo firebase.json.

  2. Adicione a seguinte configuração de rewrite à seção hosting:

    "hosting": {
     // ...
    
     // Add the "rewrites" attribute within "hosting"
     "rewrites": [ {
       "source": "/bigben",
       "function": "bigben"
     } ]
    }
    
  3. Execute o comando firebase deploy novamente.

    Sua função agora pode ser acessada pelo URL https://firebase-project-id.firebaseapp.com/bigben ou https://custom-domain/bigben se você estiver usando um domínio personalizado.

Visite a página de configuração do Hosting para ver mais detalhes sobre regras de substituição. Saiba mais sobre a ordem de prioridade das respostas para várias configurações do Hosting.

Usar um framework Web

Você pode usar frameworks Web, como Express.js (em inglês), no Cloud Functions para veicular o conteúdo dinâmico do seu aplicativo e criar apps da Web complexos com mais facilidade.

Na seção a seguir, fornecemos um exemplo passo a passo sobre como usar o Express.js com o Firebase Hosting e o Cloud Functions.

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

    npm install express --save
  2. Abra seu arquivo /functions/index.js e depois importe e inicialize o Express.js:

    const functions = require('firebase-functions');
    const express = require('express');
    const app = express();
    
  3. Adicione os dois endpoints a seguir:

    1. Adicione o primeiro endpoint para veicular 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. Adicione o 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 HTTP:

    exports.app = functions.https.onRequest(app);
    
  5. No seu arquivo firebase.json, encaminhe todas as solicitações para a função app. Essa substituição permite que o Express.js veicule conteúdo no 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, é possível ativar solicitações CORS (em inglês) nos nossos endpoints.

  1. Instale o middleware de cors executando o seguinte comando:

    npm install --save cors
  2. Abra seu arquivo /functions/index.js e adicione cors ao seu app Express.js da seguinte forma:

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

Consulte a documentação do Cloud Functions para saber como usar o Firebase com apps Express e módulos de middleware.

Testar localmente

Disponibilize e execute funções HTTP localmente usando a Firebase CLI. Com ela, é possível visualizar e testar as funções antes da implantação na produção.

  1. Certifique-se de que tanto a Firebase CLI quanto o SDK do firebase-functions usem as versões mais recentes disponíveis. Para atualizá-los, execute os seguintes comandos no diretório functions do seu projeto local:

    npm install -g firebase-tools
    npm install --save firebase-functions@latest
  2. Para disponibilizar seu projeto do Firebase localmente, execute o seguinte comando na raiz do diretório do projeto.

    Este comando emula a hospedagem e as funções em URLs hospedados localmente.

    firebase serve
Se você estiver usando o Cloud Functions a fim de gerar conteúdo dinâmico para o Firebase Hosting, o firebase serve usará suas funções HTTP locais por padrão como proxies para hospedagem. Para ver mais opções de configuração do Firebase Hosting e Cloud Functions, consulte a Referência da Firebase CLI.

Próximas etapas