Firebase Hosting按需开启/关闭Source Map的实现方法咨询

当然可以实现这个需求！我来给你拆解几种实用的方案，覆盖CLI、控制台甚至API级别的控制方式，完美适配「生产默认隐藏、排查时临时开启」的场景：

一、基础配置方案（适合偶尔排查的场景） #

核心思路是用firebase.json的重定向规则默认拦截Source Map请求，需要调试时临时修改规则重新部署。

1. 默认隐藏Source Map #

在你的firebase.json里添加如下重写规则，把所有.map文件的请求直接导向404页面：

{
  "hosting": {
    "public": "dist", // 你的静态资源目录
    "rewrites": [
      {
        "source": "**/*.map",
        "destination": "/404.html"
      },
      // 保留你原有的其他重写规则
    ]
  }
}

部署后，生产环境下任何请求.map文件的行为都会得到404响应，完全不会暴露源码。

2. 临时开启的两种方式 #

• CLI快速切换：直接注释掉firebase.json里的.map拦截规则，然后执行：

  firebase deploy --only hosting
  

  部署完成后Source Map就能正常访问，排查结束后恢复规则再部署一次即可。
• 控制台可视化操作：打开Firebase控制台，进入「Hosting」→「规则」页面，直接编辑重写规则，移除针对.map的拦截条目，保存后配置会立即生效（不用重新上传文件，因为Source Map已经在首次部署时上传了）。

二、进阶动态控制方案（适合频繁调试的场景） #

如果需要更灵活的一键开关，比如通过脚本或API控制，可以结合Cloud Functions实现动态权限判断：

1. 编写Cloud Function处理请求 #

创建一个Function来根据环境变量决定是否返回Source Map：

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const fs = require("fs");
const path = require("path");

admin.initializeApp();

exports.serveSourceMap = functions.https.onRequest((req, res) => {
  // 从Firebase环境变量读取开关状态
  const isAllowed = functions.config().app.allow_source_map === "true";
  
  if (!isAllowed) {
    return res.status(404).send("Not Found");
  }
  
  // 读取并返回对应Source Map文件
  const mapFilePath = path.join(__dirname, "../dist", req.path);
  fs.readFile(mapFilePath, (err, data) => {
    if (err) return res.status(404).send("Not Found");
    res.setHeader("Content-Type", "application/json");
    res.send(data);
  });
});

2. 配置Hosting重定向到Function #

修改firebase.json，把Source Map请求指向这个Function：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**/*.map",
        "function": "serveSourceMap"
      }
    ]
  }
}

3. 一键开关Source Map #

通过CLI修改环境变量即可快速切换，无需重新部署Hosting：

# 开启Source Map
firebase functions:config:set app.allow_source_map=true
firebase deploy --only functions

# 关闭Source Map
firebase functions:config:set app.allow_source_map=false
firebase deploy --only functions

三、关键注意事项 #

• 上传Source Map：只要你在构建生成Source Map后执行firebase deploy --only hosting，这些.map文件会和静态资源一起自动上传到Firebase Hosting，不需要额外操作。
• 避免误暴露：建议在生产构建时禁用代码中的sourceMappingURL注释（很多构建工具比如Webpack可以通过配置关闭），需要调试时再临时开启，双重保障源码安全。

四、修复失效Source Map链接 #

如果因为重定向规则导致Source Map无法访问，只需要修改firebase.json中的重写规则，然后重新部署Hosting：

firebase deploy --only hosting

新规则会立即生效，之前失效的Source Map链接就能正常工作了。

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