Firebase重写路径功能不起作用

Question

我想向 index.html 添加动态元标记，该应用程序是使用 create-react-app 创建的，并托管在 firebase 托管上。我这里参考了帖子：https://medium.com/@jalalio/dynamic-og-tags-in-your-statically-firebase-hosted-polymer-app-476f18428b8b

我创建了一个新的云函数：

const fs = require('fs');
const functions = require('firebase-functions');

exports.host = functions.https.onRequest((req, res) => {
 const userAgent = req.headers['user-agent'].toLowerCase();
 let indexHTML = fs.readFileSync('./hosting/index.html').toString();
 const path = req.path ? req.path.split('/') : req.path;
 const ogPlaceholder = '<meta name="functions-insert-dynamic-meta">';
 indexHTML = indexHTML.replace(ogPlaceholder, getOpenGraph());
 console.log(indexHTML);
 res.status(200).send(indexHTML);
});

const defaultDesc = 'Test Desc';
const defaultTitle = 'Test Title';
const defaultLogo = 'http://test-domain.com/logo.png';

const getOpenGraph = () => {
 let og = `<meta property="fb:app_id" content="123123123" />`;
 og += `<meta property="og:type" content="website" />`;
 og += `<meta property="og:title" content="${defaultTitle}" />`;
 og += `<meta property="og:description" content="${defaultDesc}" />`;
 og += `<meta property="og:image" content="${defaultLogo}" />`;
 og += `<meta property="og:url" content="https://gifmos-frontend-beta.firebaseapp.com/" />`;
 return og;
};

并将重写规则更改为：

{
 "hosting": {
 "public": "build",
 "ignore": [
 "firebase.json",
 "**/.*",
 "**/node_modules/**"
 ],
 "rewrites": [
 {
 "source": "**",
 "function": "host"
 }
 ]
 }
}

现在预期的结果是当我们点击：https://my-app-4b3d0.firebaseapp.com/ 时，HTML 应该已经替换为上面编写的函数中的动态元标记。但它似乎不起作用。调用云函数按预期返回值：https://us-central1-my-app-4b3d0.cloudfunctions.net/host，但我们需要它来调用“index.html”文件，因此我们可以根据请求的页面添加动态 OG 标签。

Answer 1

如果您的公共目录中有静态index.html，只需将其删除。

如果您没有看到您的自定义页面，请尝试在浏览器中（在 chrome 中）hard reload and empty cache。

如果您的公共目录中有 index.html，Firebase 将使用 index.html，并忽略相应路径/url 中的函数。