首次在同一Firebase项目搭建双站点，静态站点对接Realtime Database求指引

一、开启Firebase多站点支持 #

• 登录Firebase控制台，进入目标项目，打开Hosting服务
• 点击「添加站点」，输入第二个站点的域名前缀（如second-site-demo），完成站点创建

二、本地配置SecondSite项目 #

1. 初始化Firebase Hosting #

• 打开终端，进入SecondSite文件夹
• 执行命令：firebase init hosting，按提示操作：
  • 选择已有的目标Firebase项目
  • 指定public作为托管的公共目录（匹配你现有文件结构）
  • 询问是否配置为单页应用？选否（你的站点是静态HTML，非SPA）
  • 询问是否覆盖public/index.html？选否（保留现有文件）
  • 最后选择刚创建的第二个站点作为部署目标

2. 配置Realtime Database访问规则 #

• 回到Firebase控制台，进入Realtime Database，打开「规则」标签
• 修改规则以允许第二个站点读取数据（测试阶段可先用宽松规则，上线后需收紧）：

  {
    "rules": {
      ".read": true,
      ".write": false
    }
  }
  

  注意：正式上线必须根据需求限制访问范围，比如仅允许指定域名、或认证用户访问，避免数据泄露

3. 在静态HTML中集成Firebase客户端SDK #

• 打开public/index.html，在<body>末尾添加Firebase SDK的CDN引入（无需安装Node模块，纯静态即可实现）：

  <!-- 引入Firebase核心SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
  <!-- 引入Realtime Database SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>
  

• 接着添加初始化代码和数据读取逻辑（配置信息从Firebase控制台「项目设置」→「添加应用」→「网页」中复制）：

  <script>
    // 替换为你的Firebase项目配置
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
  
    // 初始化Firebase
    firebase.initializeApp(firebaseConfig);
  
    // 获取数据库引用
    const db = firebase.database();
  
    // 示例：读取指定路径的数据并输出
    db.ref("your-target-data-path").on("value", (snapshot) => {
      const data = snapshot.val();
      console.log("数据库数据：", data);
      // 可根据需求将数据渲染到页面，或转化为JSON格式对外提供
    });
  </script>
  

  若需对外提供JSON数据服务，纯静态HTML无法直接处理路由逻辑，可结合Firebase Cloud Functions实现API接口，但这属于额外配置；仅站点自身读取数据的话，上述步骤已足够。

三、部署第二个站点 #

• 终端回到SecondSite文件夹，执行命令：firebase deploy --only hosting:你的第二个站点名称
• 部署完成后，访问Firebase分配的域名，即可验证静态页面读取数据库数据的功能

关于Node.js模块的补充 #

若不想用CDN，可在SecondSite下初始化npm，安装firebase模块后打包成静态资源，但这会增加构建步骤，对于纯静态站点来说，CDN方式是最小配置，无需额外安装Node模块。

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