Firebase静态托管与Cloud Functions域名不同，如何构建动态页面？

Cloud Functions是Firebase提供的无服务器事件驱动计算服务，核心设计思路是让开发者聚焦业务逻辑，无需关心服务器的部署、扩容、运维等基础设施工作。它的触发方式灵活，支持HTTP请求、Firebase服务事件（如数据库数据变更、用户认证操作）、第三方服务事件等，天生和Firebase生态（托管、认证、数据库等）深度集成，适合构建后端API、数据处理任务、自动化工作流，以及动态页面的后端逻辑。

针对你希望静态页面和动态请求共用同一个域名的需求，最直接的方案是利用Firebase Hosting的重写规则，将特定路径的请求转发到Cloud Functions，其余路径走静态托管。

1. 配置Firebase Hosting重写规则 #

修改项目根目录的firebase.json文件，添加rewrites规则，指定哪些路径需要转发到Cloud Functions：

{
  "hosting": {
    "public": "public", // 静态文件存放目录
    "rewrites": [
      // 将所有/api开头的请求转发到名为app的Function
      {
        "source": "/api/**",
        "function": "app"
      },
      // 将特定动态页面路径转发到Function
      {
        "source": "/dashboard",
        "function": "app"
      },
      // SPA fallback规则（可选，根据你的网站类型调整）
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

配置完成后重新部署Hosting：

firebase deploy --only hosting

此时所有请求都会通过https://fir-87878.web.app/域名访问：

• 静态页面（如根路径/、/about.html）直接返回public目录下的文件
• 动态请求（如/api/user、/dashboard）会转发到你的Cloud Functions处理

2. 在Cloud Functions中处理动态页面 #

如果你需要用Function直接渲染动态HTML页面（类似传统后端渲染），可以结合Express框架和模板引擎实现：

示例Node.js代码 #

const functions = require('firebase-functions');
const express = require('express');
const admin = require('firebase-admin');
const app = express();

// 初始化Firebase Admin（需提前配置服务账号）
admin.initializeApp();

// 配置EJS模板引擎（可替换为Pug、Handlebars等）
app.set('view engine', 'ejs');
app.set('views', './views'); // 模板文件存放目录

// 验证用户身份的中间件
const authenticate = async (req, res, next) => {
  const idToken = req.headers.authorization?.split('Bearer ')[1];
  if (!idToken) return res.status(401).send('未授权');
  
  try {
    const decodedToken = await admin.auth().verifyIdToken(idToken);
    req.user = decodedToken;
    next();
  } catch (err) {
    res.status(401).send('身份验证失败');
  }
};

// 渲染动态仪表盘页面
app.get('/dashboard', authenticate, (req, res) => {
  // 从Firebase数据库获取用户数据（示例）
  const userData = {
    username: req.user.name,
    email: req.user.email
  };
  // 渲染EJS模板，返回HTML
  res.render('dashboard', userData);
});

// 导出为Cloud Function
exports.app = functions.https.onRequest(app);

部署Function：

firebase deploy --only functions

现在访问https://fir-87878.web.app/dashboard，就会返回由Function渲染的动态页面。

关键注意事项 #

• 确保firebase.json中指定的function名称和你导出的Function名称完全一致
• 静态资源（CSS、JS、图片）仍放在public目录，通过同域名加载可避免跨域问题
• 处理用户认证时，建议使用Firebase Auth的ID Token验证逻辑，确保动态页面的访问权限

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