如何将React+Express前后端项目部署到Firebase Hosting？

要同时部署React前端和Express后端到Firebase Hosting，你需要结合Firebase Hosting托管前端静态资源，以及Cloud Functions运行Express后端，再通过路由转发将API请求指向后端函数。以下是具体步骤：

1. 准备环境与初始化Firebase #

• 安装Firebase CLI：npm install -g firebase-tools
• 登录Firebase账号：firebase login
• 在项目根目录执行初始化命令：firebase init
  • 选择Functions（用于托管Express后端）和Hosting（用于托管React前端）
  • 初始化Functions时，选择JavaScript/TypeScript（匹配你的后端技术栈），自动生成functions文件夹
  • 初始化Hosting时，设置public目录为frontend/build（React构建后的产物目录），并选择“单页应用”选项（适配React SPA路由）

2. 迁移Express后端到Cloud Functions #

• 打开functions/index.js，将你的Express后端逻辑迁移过来，调整为Firebase Functions兼容格式：

  const functions = require("firebase-functions");
  const express = require("express");
  const app = express();
  
  // 复制你的Express路由、中间件等逻辑，例如：
  app.use(express.json()); // 解析JSON请求体
  app.get("/api/hello", (req, res) => {
    res.send("Hello from Express backend!");
  });
  // 其他路由...
  
  // 将Express应用导出为Cloud Function
  exports.api = functions.https.onRequest(app);
  

• 将backend/package.json中的依赖项复制到functions/package.json，然后进入functions目录执行npm install安装依赖

3. 配置路由转发（firebase.json） #

修改项目根目录的firebase.json，添加路由转发规则，让API请求指向Cloud Function：

{
  "hosting": {
    "public": "frontend/build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/api/**", // 所有/api开头的请求
        "function": "api"    // 转发到名为api的Cloud Function
      },
      {
        "source": "**",      // 其他所有请求
        "destination": "/index.html" // 返回React入口文件，适配SPA路由
      }
    ]
  }
}

4. 构建前端与部署 #

• 进入frontend目录，执行npm run build生成生产环境静态文件
• 回到项目根目录，执行firebase deploy，即可同时部署前端（Hosting）和后端（Cloud Functions）

注意事项 #

• 环境变量：如果后端使用了环境变量，可通过firebase functions:config:set key=value命令设置，或在Firebase控制台的Functions页面配置
• 本地测试：执行firebase serve可在本地模拟完整部署环境，验证前后端交互是否正常
• CORS：由于前后端共享同一域名，无需额外配置CORS

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