使用 Firebase 托管实现本地化 404 页面

Question

假设我的网络应用有两个语言环境：英语 (myapp.com/en/) 和法语 (myapp.com/fr/)。我想本地化我的 404 页面，以便对 myapp.com/en/non-existent 或 myapp.com/non-existent 的请求将返回 404 页面的英文版本，对 myapp.comm/fr/non-existent 的请求将返回法语版本。

但是，Firebase 托管似乎默认不提供此类功能，因为它只允许单个 404 页面(source)

那么，有没有办法使用 Firebase 托管实现本地化 404 页面？

Answer 1

这个答案已经过时了。 Firebase 现在默认支持此功能。见the correct answer。

---

实现此功能的一种方法是使用rewrites：

{
  ...
  "hosting": {
    "rewrites": [
      {
        "source": "/fr/**",
        "destination": "/fr/404.html"
      },
      {
        "source": "**",
        "destination": "/en/404.html"
      }
    ]
  }

这将为/fr/ 目录中的不匹配请求提供/fr/404.html/ 页面，为任何其他不匹配请求提供/en/404.html。

这种方法的缺点是返回的状态码是 200 而不是 404。

---

更好的解决方案是重写返回所需 404 页面和 404 状态码的不匹配请求 to Cloud Functions。请注意，404 页面必须位于 functions/lib 目录中，而不是 public。

此外，通过使用正确的 Cache-Control 标头，您可以允许 Firebase 托管缓存函数的输出，这样它们就不必在每次请求 404 页面时都运行。

Firebase 配置：

{
  ...
  "hosting": {
    "rewrites": [
      {
        "source": "/fr/**",
        "function": "pageNotFoundFr"
      },
      {
        "source": "**",
        "function": "pageNotFound"
      }
    ]
  }

功能：

exports.pageNotFound = functions.https.onRequest((req, res) => {
    res.set("Cache-Control", "public, max-age=31536000")
    res.status(404).sendFile("en/404.html", {root: __dirname})
})

exports.pageNotFoundFr = functions.https.onRequest((req, res) => {
    res.set("Cache-Control", "public, max-age=31536000")
    res.status(404).sendFile("fr/404.html", {root: __dirname})
})

但是这种方法会重复代码，如果您有更多语言，可能会很混乱。

---

最好将请求处理程序提取到一个函数中：

exports.pageNotFound = functions.https.onRequest(notFoundHanler("en"))
exports.pageNotFoundFr = functions.https.onRequest(notFoundHanler("fr"))

function notFoundHandler(lang) {
    return function (req, res) {
        res.set("Cache-Control", "public, max-age=31536000")
        res.status(404).sendFile(`${lang}/404.html`, {root: __dirname})
    }
}

---

更新：我向 Firebase 提交了多个 404 页面的功能请求，他们回复说会考虑。

Answer 2

自 2020 年 8 月 12 日起，Firebase 托管现在包括对 i18n internalization 的支持。

使用方法如下：

1. 在您的public 目录下创建一个新目录来托管这些本地化文件（例如localized）。
2. 更新您的 firebase.json 文件以包含对这个新目录的引用：

// firebase.json

"hosting": {

  "public": "public",

  "ignore": [
     // ...
  ],

  "i18n": {
    "root": "/localized"  // directory that contains your "i18n content"
  }

  // ...
}

1. 在localized 目录下，创建一个名为fr 的新目录，您可以在其中添加法语404.html 文件。
2. 运行firebase deploy 来部署您的网站，现在您的法国用户应该被重定向到正确的页面:)

有关国家和语言代码的更多信息，请参阅Firebase Docs。