自定义托管行为

Firebase 托管具有若干附加功能,可让您自定义内容托管方式。本文将介绍自定义错误页面、重定向、重写和标头。

自定义“404/Not Found”页面

指定当用户尝试访问的页面不存在时显示自定义的“404 Not Found”错误。

在项目的公共目录中添加一个 404.html 页面,以显示当 Firebase 托管需要向用户显示“404 Not Found”错误时的 404.html 页面的内容。

重定向

使用网址重定向可在页面移动后防止出现损坏的链接,或者用于缩短网址。当浏览器尝试打开指定的源网址时,它将打开目标网址并将浏览器的位置更新为该目标网址。例如,您可以将 example.com/team 重定向到 example.com/about.html

firebase.json 文件的 hosting 中定义一个 redirects 部分,即可指定网址重定向:

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

redirects 设置是一个可选参数,包含一组重定向规则。每条规则必须指定 sourcedestinationtype

source 参数是一个 glob 模式,它会在每个请求开始时(在确定该网址路径中是否存在文件或文件夹之前)与所有网址路径进行匹配。如果发现匹配,即会设置一个 HTTP 重定向响应,其中的“Location”标头设为静态 destination 字符串 - 可能是相对路径,也可能是绝对网址。

最后,type 参数指定提供的具体 HTTP 响应代码 - 可能是 301(对应于“已永久移动”)或 302(对应于“已找到”(临时重定向))。

重写

使用重写可以为多个网址显示同样的内容。重写与模式匹配配合使用时尤其有用,因为您可以接受与模式匹配的任何网址,让客户端代码来决定显示什么。例如,您可以使用重写规则来支持使用 HTML5 pushState 进行导航的应用。当浏览器尝试打开指定的源网址时,它将获得目标网址中文件的内容。

firebase.json 文件的 hosting 中定义一个 rewrites 部分,即可指定网址重写设置:

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

rewrites 设置为可选参数,包含一组内部重写规则。与上述重定向类似,每条重写规则必须具有一个 source glob 模式和一个本地 destination(应该以文件的形式存在)。当指定的 source 中不存在文件或文件夹时,Firebase 托管会应用重写规则并返回指定 destination 文件(而非 HTTP 重定向)的实际内容。

在上面的示例中,如果任何文件夹中的任何文件不存在,则重写规则将返回 /index.html 的内容。这对使用 HTML5 pushState 的应用非常有用。

标头

firebase.json 文件的 hosting 中定义一个 headers 部分,即可指定特定文件的自定义标头:

"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"
    } ]
  } ]
}

headers 设置是一个可选参数,包含一组自定义标头定义。每个定义必须有一个与原始请求路径匹配的 source 键,无论使用 glob 表示法的重写规则为何。每个定义还必须具备一系列要应用的 headers,其中每个 header 都要有一个 key 和一个 value

上述示例为所有字体文件指定了 CORS 标头,并将图片文件默认的 1 小时浏览器缓存重写为 2 小时缓存。请注意,以下标头不能使用 headers 配置进行设置:

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

您可以在部署配置参考中查阅所有可用的配置选项。

托管优先级

有时,不同的配置选项会重叠。如果有冲突,Firebase 托管的响应将按以下优先级顺序确定:

  1. 预留的命名空间 (/__*)
  2. 已配置的重定向
  3. 精确匹配的静态内容
  4. 已配置的重写
  5. 自定义 404 页面
  6. 默认的 404 页面

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面