Ir para o console

Personalizar o comportamento do Hosting

O Firebase Hosting tem outros recursos que permitem personalizar a forma como o conteúdo é hospedado. Neste artigo, descrevemos páginas de erro personalizadas, redirecionamentos, substituições e cabeçalhos.

Personalizar página não encontrada/404

Especifique um erro 404 Not Found personalizado a ser exibido quando um usuário tentar acessar uma página que não existe.

Basta adicionar uma página 404.html ao diretório público do seu projeto para mostrar o conteúdo da página 404.html quando o Firebase Hosting precisar exibir um erro 404 Not Found ao usuário.

Redirecionamentos

Use um redirecionamento de URL para evitar links corrompidos se uma página tiver sido movida ou para encurtar URLs. Quando um navegador tenta abrir um URL de origem especificado, o URL de destino é aberto e a localização do navegador é atualizada para esse URL. Por exemplo, você pode redirecionar example.com/team para example.com/about.html.

Especifique redirecionamentos de URL ao definir uma seção de redirects no hosting no arquivo firebase.json:

"hosting": {
  // Add the "redirects" section within "hosting"
  "redirects": [ {
    "source" : "/foo",
    "destination" : "/bar",
    "type" : 301
  }, {
    "source" : "/firebase/*",
    "destination" : "https://firebase.google.com",
    "type" : 302
  } ]
}

A configuração redirects é um parâmetro opcional que contém uma matriz de regras de redirecionamento. Cada regra precisa especificar source, destination e type.

No início de cada solicitação, antes de determinar se um arquivo ou uma pasta existe em um caminho do URL, todos os caminhos são verificados para determinar se correspondem ao parâmetro source, que é um padrão glob. Em caso de correspondência, uma resposta de redirecionamento HTTP é definida com o cabeçalho "Location" configurado para a string destination estática, que pode ser um caminho relativo ou um URL absoluto.

Por fim, o parâmetro type representa o código específico da resposta HTTP obtida, podendo ser 301 para "movido permanentemente" ou 302 para "encontrado" (redirecionamento temporário).

Substituições

Use uma substituição para mostrar o mesmo conteúdo para diversos URLs. As substituições são muito úteis com correspondência de padrões, já que você pode aceitar qualquer URL que corresponda ao padrão e deixar que o código do cliente decida o que será exibido. Por exemplo, você pode usar regras de substituição para dar suporte a apps que usam pushState HTML5 para navegação. Quando um navegador tentar abrir um URL de origem especificada, o conteúdo do arquivo no URL de destino será fornecido.

Especifique as substituições de URL ao definir a seção rewrites no hosting no arquivo firebase.json:

"hosting": {
  // Add the "rewrites" section within "hosting"
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

A configuração de rewrites é um parâmetro opcional que contém diversas matrizes de regras de substituição internas. Assim como os redirecionamentos acima, cada regra de substituição precisa ter um padrão glob source e um destination local (que deve existir e ser um arquivo). Quando um arquivo ou uma pasta não existir no source especificado, o Firebase Hosting aplicará a regra de substituição e retornará o conteúdo real do arquivo de destination especificado, em vez de um redirecionamento de HTTP.

No exemplo acima, se algum arquivo não existir em uma pasta, a regra de substituição retornará o conteúdo de /index.html. Isso pode ser útil para apps que utilizam o pushState HTML5.

Cabeçalhos

Especifique cabeçalhos personalizados específicos do arquivo ao definir uma seção de headers no hosting no arquivo firebase.json:

"hosting": {
  // Add the "headers" section within "hosting".
  "headers": [ {
    "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers" : [ {
      "key" : "Access-Control-Allow-Origin",
      "value" : "*"
    } ]
  }, {
    "source" : "**/*.@(jpg|jpeg|gif|png)",
    "headers" : [ {
      "key" : "Cache-Control",
      "value" : "max-age=7200"
    } ]
  }, {
    // Sets the cache header for 404 pages to cache for 5 minutes
    "source" : "404.html",
    "headers" : [ {
      "key" : "Cache-Control",
      "value" : "max-age=300"
    } ]
  } ]
}

A configuração headers é um parâmetro opcional que contém várias matrizes de definições de cabeçalhos personalizados. Cada definição precisa ter uma chave source que corresponda ao caminho da solicitação original, independentemente de qualquer regra de substituição que use a notação glob. Cada definição também precisa ter uma matriz de headers para aplicação, cada um com uma key e um value.

O exemplo acima especifica um cabeçalho CORS para todos os arquivos de fontes e modifica o cache do navegador padrão de uma hora por um cache de duas horas para arquivos de imagem. Observe que os seguintes cabeçalhos não podem ser definidos usando uma configuração de headers:

  • Strict-Transport-Security
  • Public-Key-Pinning
  • Set-Cookie

Veja todas as opções de configuração disponíveis na referência de Configuração de implantação.

Prioridades do Hosting

As diferentes opções de configuração podem se sobrepor em algumas situações. Se houver um conflito, a resposta do Firebase Hosting será determinada na seguinte ordem de prioridade:

  1. namespace reservado (/__*)
  2. redirecionamentos configurados
  3. conteúdo estático de correspondência exata
  4. substituições configuradas
  5. página 404 personalizada
  6. página 404 padrão