如何配置Firebase Hosting实现按域名分发不同index.html文件？

一、主域名与子域名分别部署不同index.html的配置 #

不用复杂的Cloud Function，直接用Firebase Hosting的多站点功能就能实现需求：

1. 在Firebase控制台添加子站点
   • 进入Hosting页面，点击「添加站点」，输入子域名对应的站点ID（比如sub-myexample）
   • 完成创建后，在控制台验证sub.myexample.com的域名所有权
2. 调整本地项目结构
   把两个站点的文件分开存放，示例结构：

   project-root/
   ├── public/          # 主域名https://myexample.com的文件，含index.html
   ├── public-sub/      # 子域名https://sub.myexample.com的文件，含index.html
   └── firebase.json
   

3. 配置firebase.json
   用hosting数组定义多个站点，每个站点对应不同目录与域名：

   {
     "hosting": [
       {
         "site": "myexample", // 主站点ID（控制台创建的主站点ID）
         "public": "public",
         "ignore": [
           "firebase.json",
           "**/.*",
           "**/node_modules/**"
         ],
         "rewrites": [
           {
             "source": "**",
             "destination": "/index.html"
           }
         ]
       },
       {
         "site": "sub-myexample", // 子站点ID（控制台创建的子站点ID）
         "public": "public-sub",
         "ignore": [
           "firebase.json",
           "**/.*",
           "**/node_modules/**"
         ],
         "rewrites": [
           {
             "source": "**",
             "destination": "/index.html"
           }
         ]
       }
     ]
   }
   

4. 部署站点
   • 单独部署主站点：firebase deploy --only hosting:myexample
   • 单独部署子站点：firebase deploy --only hosting:sub-myexample
   • 一次性部署所有站点：firebase deploy --only hosting

这样两个域名会分别加载对应目录下的index.html，比用函数转发更简单可靠。

二、Cloud Function访问Firebase Hosting上传文件的解决方案 #

Firebase Hosting的静态文件默认不会挂载到Cloud Function的文件系统，之前的方案失效就是这个原因，可用以下两种方法解决：

方法1：将静态文件打包到函数部署包 #

把需要访问的静态文件放到函数目录下，示例结构：

project-root/
├── functions/
│   ├── src/
│   │   └── index.js
│   ├── static/          # 存放需要访问的静态文件
│   └── package.json
└── firebase.json

在函数代码中通过相对路径访问文件：

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

exports.serveStatic = functions.https.onRequest((req, res) => {
  const filePath = path.join(__dirname, '../static/index.html');
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      res.status(500).send('读取文件失败');
      return;
    }
    res.send(data);
  });
});

然后在firebase.json中配置重写指向该函数：

{
  "hosting": {
    "rewrites": [
      {
        "source": "/custom-path/**",
        "function": "serveStatic"
      }
    ]
  }
}

部署时函数会自动把static目录打包上传，就能正常访问文件了。

方法2：通过Hosting API获取静态文件 #

如果不想把文件打包到函数，可调用Firebase Hosting的API拉取文件，但需要配置服务账号权限：

1. 在Firebase控制台生成服务账号密钥，下载到functions目录
2. 安装依赖：npm install firebase-admin axios
3. 函数代码示例：

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const axios = require('axios');

admin.initializeApp();

exports.fetchHostingFile = functions.https.onRequest(async (req, res) => {
  try {
    // 替换为实际的Hosting文件URL
    const fileUrl = 'https://myexample.com/index.html';
    const response = await axios.get(fileUrl);
    res.send(response.data);
  } catch (err) {
    functions.logger.error('拉取文件失败:', err);
    res.status(500).send('拉取文件失败');
  }
});

这种方法不需要打包文件，但依赖外部HTTP请求，性能略逊于第一种方法。

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