Disponibilizar conteúdo dinâmico com o Cloud Functions

O Firebase Hosting permite que você use o Cloud Functions para executar o processamento no servidor. Isso significa que você terá suporte para geração dinâmica de conteúdo para o site do Firebase Hosting. Veja alguns exemplos do que isso permite que você faça:

  • Oferecer conteúdo dinâmico. Em vez de apenas oferecer conteúdo estático, você pode executar a lógica do servidor por meio de uma função para retornar uma resposta gerada dinamicamente. Por exemplo, você pode ter um URL como /blog/<id-for-blog-post>. Este padrão do URL pode ser apontado para uma função que usa dinamicamente o parâmetro do código de postagem do blog do URL. Assim, é possível recuperar de maneira dinâmica o conteúdo do seu Firebase Realtime Database.
  • Pré-processar apps de página única para melhorar a SEO. Com essa operação, você pode criar tags meta dinâmicas para compartilhamento em várias redes sociais.
  • Manter seu app da Web leve. Você pode criar uma API com o Cloud Functions para o seu site do Firebase Hosting para recuperar conteúdo de maneira assíncrona. Ao manter o código cliente leve e carregar conteúdo de maneira assíncrona por meio de uma função, é possível reduzir os tempos de carregamento iniciais do seu app da Web.

Observe que o Firebase Hosting está sujeito a um tempo limite de solicitação de 60 segundos. Pense em usar o ambiente flexível do App Engine no caso de conteúdos dinâmicos que levem mais de 60 segundos para serem gerados.

Conectar o Cloud Functions ao Firebase Hosting

Para conectar uma função ao Firebase Hosting, você precisará configurar o Cloud Functions, escrever sua função, criar regras de substituição e implantar suas alterações. Para melhorar o desempenho do conteúdo dinâmico, você pode ajustar suas configurações de cache.

Configurar o Cloud Functions para o Firebase Hosting

Se você já tiver configurado o Cloud Functions para Firebase, pode pular esta etapa e prosseguir para a seção criar uma função HTTPS.

Para configurar o Cloud Functions para o projeto, você precisará da versão mais recente da Firebase CLI, que requer o Node.js v6.3.1 ou superior. Você pode instalar o Node.js seguindo as instruções em https://nodejs.org/. Com isso, o npm também será instalado.

Para verificar qual é sua versão do Node.js, execute o seguinte comando no terminal:

node --version

Para instalar a versão mais recente da Firebase CLI, execute o seguinte comando no terminal:

npm install -g firebase-tools

Para conectar a máquina local à sua conta do Firebase e conseguir acesso aos seus projetos do Firebase, execute o seguinte comando:

firebase login

Em seguida, você precisará inicializar o Cloud Functions.

Se você ainda não tiver inicializado seu projeto do Firebase com o Hosting, execute o comando a seguir no diretório do projeto. Quando solicitado, inicialize o Hosting e o Cloud Functions.

firebase init

No entanto, se você tiver um projeto do Firebase com o Hosting, execute o comando a seguir no diretório do projeto para inicializar apenas o Cloud Functions.

firebase init functions

Criar uma função HTTP no seu site do Hosting

Abra /functions/index.js no editor de sua preferência e substitua o conteúdo dele pelo código a seguir. Este código cria uma função HTTP chamada bigben.

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

Direcionar solicitações do Hosting para sua função

Com as regras de substituição, você pode direcionar 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 e executar a função bigben, abra firebase.json e inclua a configuração de rewrite a seguir na seção hosting.

{
  "hosting": {
    "public": "public",

    // Add the following rewrites section *within* "hosting"
    "rewrites": [ {
      "source": "/bigben", "function": "bigben"
    } ]
  }
}

Observe que o Firebase Hosting está sujeito a um tempo limite de solicitação de 60 segundos. Portanto, mesmo que você configure sua função HTTP com um tempo limite de solicitação maior, ainda receberá um código de status HTTP 504 (tempo limite de solicitação) se a função precisar de mais de 60 segundos para ser executada. Para oferecer suporte a esse tipo de conteúdo dinâmico, use o ambiente flexível do App Engine.

Visite a seção de hospedagem personalizada para ver mais detalhes sobre regras de substituição. Você também pode saber mais sobre a ordem de prioridade das respostas para várias configurações do Hosting.

Executar conteúdo dinâmico localmente

Disponibilize e execute funções HTTP localmente usando a Firebase CLI. Com ela, é possível visualizar e testar seu projeto do Firebase antes de implantá-lo na produção.

Para usar esse recurso, verifique se os SDKs firebase-tools e firebase-functions estão nas versões mais recentes disponíveis. Para atualizá-los, execute os seguintes comandos no diretório functions/ do seu projeto:

npm install --save firebase-functions@latest
npm install -g firebase-tools

Para disponibilizar seu projeto do Firebase localmente, execute o seguinte comando no diretório do projeto. Este comando emulará 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 do Cloud Functions, consulte a Referência da Firebase CLI.

Se você estiver usando variáveis de configuração de funções personalizadas, execute o seguinte comando no diretório functions do seu projeto antes de executar o firebase serve.

firebase functions:config:get > .runtimeconfig.json

No entanto, se você estiver usando o Windows PowerShell, substitua o comando anterior por:

firebase functions:config:get | ac .runtimeconfig.json

Implantar

Depois de criar uma função e definir as regras de substituição, implante seu projeto do Firebase executando o seguinte comando no terminal:

firebase deploy

Após a implantação, você observará que sua função estará acessível normalmente por meio de um URL, por exemplo:

https://us-central1-your-firebase-project-id.cloudfunctions.net/bigben

Todo o tráfego no seu site do Firebase Hosting que corresponda ao caminho especificado nas regras de substituição será encaminhado por proxy para a função apropriada.

Testar a amostra

Depois que tudo for implantado, vá para /bigben no seu site do Firebase Hosting para ver a amostra em ação.

https://your-firebase-project-id.firebaseapp.com/bigben

Como usar cookies

Ao usar o Firebase Hosting com o Cloud Functions, os cookies geralmente são removidos das solicitações recebidas. Isso é necessário para que o comportamento de cache da CDN seja eficiente. Somente o cookie nomeado especialmente como __session pode ser transmitido para a execução de funções.

Quando está presente, o cookie __session automaticamente passa a fazer parte da chave de cache, o que significa que é impossível que dois usuários com cookies diferentes recebam a resposta no cache um do outro. Só use o cookie __session se sua função veicular um conteúdo diferente dependendo da autorização do usuário.

Gerenciar o comportamento do cache

O Firebase Hosting usa uma rede global de fornecimento de conteúdo (CDN) avançada para tornar seu site o mais rápido possível. No Firebase Hosting, o conteúdo estático é armazenado em cache até que uma nova versão seja implantada. Como as funções geram conteúdo dinamicamente, as solicitações que são gerenciadas por uma função não são armazenadas em cache na CDN por padrão. Você pode configurar o comportamento do cache para acelerar seu aplicativo e reduzir os custos de execução de funções.

Definir o Cache-Control

A principal ferramenta usada para administrar o cache é o cabeçalho Cache-Control. Ao configurá-lo, você pode comunicar ao navegador e à CDN por quanto tempo seu conteúdo deve permanecer armazenado em cache. Na sua função, configure Cache-Control desta maneiro:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

O cabeçalho acima faz três coisas:

  • Marca o cache como público. Isso significa que esse conteúdo pode ser armazenado em cache por servidores intermediários (neste caso, a CDN). No entanto, por padrão, Cache-Control é definido como private, o que significa que apenas o navegador do usuário está autorizado a armazená-lo.
  • Indica ao navegador por quantos segundos armazenar em cache o conteúdo com max-age. No exemplo acima, informamos ao navegador que ele deve armazenar o conteúdo por cinco minutos.
  • Indica à CDN por quantos segundos ela pode armazenar em cache o conteúdo com s-maxage. No exemplo acima, informamos à CDN que o conteúdo deve ser armazenado por dez minutos.

Defina o valor de max-age com o tempo máximo que você considera apropriado para que os usuários recebam conteúdo desatualizado. Se uma página mudar a cada poucos segundos, max-age precisará ser um número pequeno. Contudo, outros tipos de conteúdo podem ser armazenados em cache durante horas, dias ou até mesmo meses.

Saiba mais sobre o cabeçalho Cache-Control no Mozilla Developer Network (em inglês).

Quando o conteúdo em cache é veiculado?

Se você tiver configurado um cabeçalho Cache-Control público, seu conteúdo será armazenado em cache na CDN com base:

  • no nome do host;
  • no caminho;
  • na string de consulta;
  • no conteúdo dos cabeçalhos especificados em Vary.

Use o cabeçalho Vary para sinalizar quais partes da solicitação são importantes para determinar sua resposta. Na maioria das vezes, você não precisa se preocupar com isso. O Firebase Hosting garante automaticamente que um cabeçalho Vary apropriado seja definido na sua resposta para situações comuns. Isso inclui certificar-se de que qualquer cookie de sessão ou cabeçalho de autorização que você esteja usando faça parte da chave de cache, evitando vazamentos acidentais de conteúdo.

Em alguns casos de uso avançado, talvez você precise de outros cabeçalhos para afetar o cache. Quando esse for o caso, você poderá simplesmente configurar o cabeçalho Vary na sua resposta:

res.set('Vary', 'Accept-Encoding, X-My-Custom-Header');

Assim, duas solicitações idênticas com diferentes cabeçalhos X-My-Custom-Header seriam armazenadas em cache separadamente.

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.