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的公共目录中有静态文件，只需将其删除即可。

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

Firebase 使用index.html您的公共目录中是否有任何功能，并忽略相应路径/网址中的功能。