自定义托管行为

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,其中每个都有一个 key 和一个 value

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

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

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

托管优先级

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

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

发送以下问题的反馈:

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