ReactJS与NodeJS项目部署至Firebase的方法咨询

Firebase可以同时托管你的React前端和NodeJS后端，分别通过Firebase Hosting（前端托管）和Cloud Functions for Firebase（后端服务）实现，具体步骤如下：

1. 初始化Firebase项目 #

• 全局安装Firebase CLI：npm install -g firebase-tools
• 登录Firebase账号：firebase login
• 在项目根目录（包含server和web的目录）执行firebase init，按提示完成配置：
  • 勾选Hosting和Functions两个功能
  • 关联已有Firebase项目或创建新项目
  • Hosting部分指定前端代码目录为web/build（React打包产物默认在build文件夹）
  • 根据React项目需求选择是否配置为单页应用（一般选Yes）
  • Functions部分可选择默认的functions目录（推荐，后续将server代码迁移至此），并指定NodeJS为运行环境

2. 迁移并配置NodeJS后端 #

• 将server目录下的代码复制到functions目录，在functions目录执行npm install安装依赖
• 修改functions/index.js，将你的Node服务导出为Firebase云函数，以Express应用为例：

  const functions = require("firebase-functions");
  const express = require("express");
  const app = express();
  
  // 原有Express路由逻辑
  app.get("/api/test", (req, res) => {
    res.send("Hello from NodeJS backend!");
  });
  
  // 导出为HTTPS云函数
  exports.api = functions.https.onRequest(app);
  

• 若有环境变量（如数据库连接串），用Firebase命令配置：firebase functions:config:set your.key="value"，代码中通过functions.config().your.key获取

3. 配置React前端 #

• 将前端所有后端API请求路径改为/api/xxx格式，后续通过Hosting规则转发到云函数
• 打包React项目：cd web && npm run build

4. 配置Hosting重写规则 #

• 编辑firebase.json，添加重写规则让API请求转发到云函数：

  {
    "hosting": {
      "public": "web/build",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "/api/**",
          "function": "api"
        },
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    "functions": {
      "source": "functions"
    }
  }
  

5. 部署项目 #

• 单独部署后端：firebase deploy --only functions
• 单独部署前端：firebase deploy --only hosting
• 一次性部署所有服务：firebase deploy

注意事项 #

• Cloud Functions有免费额度，测试项目完全够用，超出后将按官方计费规则收费
• 云函数不需要监听端口，直接导出为HTTPS函数即可

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