Question

说我的Web应用程序有两个语言环境：英语（myapp.com/en/）和法语（myapp.com/fr/）。我想本地化404页面，因此对myapp.com/en/non-existent或myapp.com/non-existent的请求将返回英语版本的404页面，对myapp.comm/fr/non-existent的请求将返回法语页面。

但是，似乎Firebase Hosting默认不提供此类功能，因为它仅允许一个404页（source）

那么，有没有一种方法可以使用Firebase Hosting来实现本地化的404页面？

Answer 1

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

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

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

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

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

更好的解决方案是重写不匹配的请求to Cloud Functions，这些请求返回所需的404页面和404状态代码。请注意，这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 Hosting现在包括对i18n internalization的支持。

这里是使用方法：

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

// firebase.json

"hosting": {

  "public": "public",

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

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

  // ...
}

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

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

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

2 个答案:

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