Firebase路径重写至Cloud Function失效，React动态Meta标签配置异常

嘿，我来帮你排查这个动态meta标签不生效、Firebase路径重写失效的问题——我之前处理过类似的场景，咱们一步步来捋：

重写规则是请求能打到Cloud Function的关键，你得确保配置没写错，而且顺序正确：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 把动态函数的重写放在最前面，Firebase是按顺序匹配规则的
      {
        "source": "**",
        "function": "你的云函数名称"
      },
      // 如果之前有指向index.html的规则，要放在后面
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

这里要注意两个点：

• function的名称必须和你Cloud Function里exports的名字完全一致（大小写敏感！）
• 动态函数的重写规则一定要放在最前面，不然会被后面的静态文件或index.html规则优先匹配

函数本身要能正确读取、修改并返回index.html，我给你一个靠谱的示例模板：

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

exports.你的云函数名称 = functions.https.onRequest((req, res) => {
  // 用绝对路径确保能找到build目录下的index.html，避免部署后路径出错
  const filePath = path.resolve(__dirname, '../build/index.html');
  
  try {
    let html = fs.readFileSync(filePath, 'utf8');
    
    // 根据请求路径/参数动态生成meta内容
    const pagePath = req.path;
    let ogTitle = '默认标题';
    let ogDesc = '默认描述';
    
    if (pagePath === '/') {
      ogTitle = '首页专属动态标题';
      ogDesc = '首页专属动态描述';
    } else if (pagePath.startsWith('/product')) {
      ogTitle = '商品页动态标题';
      ogDesc = '商品页动态描述';
    }

    // 替换index.html里的原始meta标签——一定要和原标签的字符串完全匹配（包括空格、引号）
    html = html.replace(
      '<meta property="og:title" content="默认标题">',
      `<meta property="og:title" content="${ogTitle}">`
    );
    html = html.replace(
      '<meta property="og:description" content="默认描述">',
      `<meta property="og:description" content="${ogDesc}">`
    );

    // 必须设置正确的Content-Type，不然浏览器会把返回内容当成普通文本
    res.set('Content-Type', 'text/html');
    res.send(html);
  } catch (err) {
    console.error('读取或修改HTML出错:', err);
    res.status(500).send('服务器错误');
  }
});

这里的坑点：

• 路径问题：部署后Cloud Function的工作目录是functions文件夹，所以../build才能正确指向项目根目录的build文件夹，用path.resolve比相对路径更可靠
• 替换字符串要精准：如果原index.html里的meta标签有多余空格，比如<meta property="og:title" content="默认标题">（两个空格），你的替换字符串也要完全对应，不然替换会失败
• 一定要加错误捕获：避免函数崩溃导致请求失败

你可以在函数里加一行日志：

console.log('收到请求路径:', req.path);

部署函数后，去Firebase控制台的「Functions > 日志」里查看，如果没有看到请求记录，说明重写规则根本没生效，得回到第一步检查firebase.json的配置，然后重新部署Hosting：

firebase deploy --only hosting

Firebase Hosting默认会缓存静态资源，你可以：

1. 用浏览器隐私模式访问你的站点，避免缓存干扰
2. 部署时强制刷新缓存：在firebase.json的hosting里加缓存规则（可选）：

"headers": [
  {
    "source": "**/*.html",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "no-cache, no-store, must-revalidate"
      }
    ]
  }
]

另外，要确保你同时部署了函数和Hosting：

firebase deploy --only functions,hosting

直接访问云函数的独立URL（比如https://us-central1-my-app-4b3d0.cloudfunctions.net/你的云函数名称），查看返回的HTML里meta标签是否已经被替换。如果直接访问函数是好的，但通过Hosting访问不行，那肯定是重写规则的问题。

内容的提问来源于stack exchange，提问作者Vipul Limbachiya