Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Emparelhe 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 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 há necessidade de gerenciar e dimensionar seus próprios servidores.

Por exemplo, casos de uso e exemplos do Cloud Functions integrado ao Firebase Hosting, acesse 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 da veiculação de conteúdo dinâmico, você pode, opcionalmente, 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 e se inicializou o Firebase Hosting.

    Para obter instruções detalhadas sobre como instalar a CLI e inicializar o Hosting, consulte o guia de introdução ao Hosting .

  2. Verifique se você configurou o Cloud Functions:

    • Se você configurou o Cloud Functions, vá 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 seu projeto:

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

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

Etapa 2: criar e testar 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.

    Esse código cria uma função HTTPS (chamada bigben ) que responde a solicitações HTTPS 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. Teste suas funções localmente usando o Firebase Local Emulator Suite .

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

      firebase emulators:start
    2. Acesse a função através da URL local retornada pela CLI, por exemplo: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

Visite 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 um URL do Firebase Hosting para que ela possa gerar conteúdo dinâmico para seu site hospedado pelo Firebase.

Etapa 3: solicitações HTTPS diretas 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 de rewrite na seção de hosting :

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. Confirme se o redirecionamento funciona conforme o esperado testando novamente com os emuladores do Firebase.

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

      firebase emulators:start
    2. Visite 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. Iterar em sua função e sua funcionalidade para o seu site. Use os emuladores do Firebase para testar essas iterações.

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 várias configurações de Hosting.

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

Etapa 4: implantar sua função

Assim 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 dimensionamento 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 do projeto local:

    firebase deploy --only functions,hosting
  2. Acesse seu site ao vivo 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 veicular 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 o Firebase Hosting e o Cloud Functions.

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

    npm install express --save
  2. Abra seu arquivo /functions/index.js , 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 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 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. Em seu arquivo firebase.json , direcione todas as solicitações para a função do app . Essa reescrita permite que o Express.js veicule o subcaminho diferente 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 o 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);
    

Visite 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