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但我们需要这个来为＆＃34; index.html＆＃34;文件调用，因此我们可以根据要求的页面添加动态OG标记。

Answer 1

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

如果仍然看不到您的自定义页面，请尝试在浏览器中（{chrome}）使用hard reload and empty cache。

如果您的公共目录中有任何内容，Firebase会使用index.html并忽略相应路径/ URL中的功能。

Firebase重写路径功能不起作用

1 个答案: