使用Cloud Function部署React项目报错：找不到文件/目录

部署React项目到Cloud Function时触发500错误，错误信息如下：

server error [Error: ENOENT: no such file or directory, open '/workspace/build/index.html']

我的Cloud Function代码如下：

const functions = require("firebase-functions");
const express = require("express");
const path = require("path");
const fs = require("fs").promises;

const app = express();

app.get("/*", async (req, res) => {
  const filePath = path.resolve(__dirname, "./build", "index.html");
  try {
    let data = await fs.readFile(filePath, "utf-8");
    data = data
      .replace(/__TITLE__/g, "Gnossi Wohnig")
      .replace(/__THUMB__/g, "")
      .replace(/__DESCRIPTION__/g, "Genossenschaftswohnung in Zürich finden");
    res.send(data);
  } catch (error) {
    res.sendStatus(500);
  }
});

app.use(express.static(path.resolve(__dirname, "./build")));

exports.webApi = functions.https.onRequest(app);

请问该如何正确访问托管文件夹？

这个错误的核心是Cloud Function部署环境里找不到指定的build目录，按以下步骤排查修复：

1. 确保构建产物被正确上传 #

• 本地先执行npm run build生成React编译后的build目录，部署前必须保证这个目录被打包上传到Cloud Function环境。
• 可以在package.json里添加部署脚本，强制构建步骤在部署前执行：

  "scripts": {
    "build": "react-scripts build",
    "deploy": "npm run build && firebase deploy --only functions:webApi"
  }
  

2. 修正路径指向 #

Cloud Function的运行目录结构和本地可能不同，__dirname指向的是函数代码所在目录，需要确认build的实际位置：

• 如果你的函数代码放在项目根目录的functions子文件夹里，而React的build在项目根目录，就要调整路径为上级目录：

  const filePath = path.resolve(__dirname, "../build", "index.html");
  app.use(express.static(path.resolve(__dirname, "../build")));
  

• 可以临时加日志打印路径，确认实际指向：

  console.log("当前目录:", __dirname);
  console.log("目标文件路径:", filePath);
  

  部署后查看Cloud Function的日志，就能知道路径是否正确。

3. 调整中间件顺序 #

当前代码里app.get("/*")会拦截所有请求，导致静态文件中间件永远不会执行，必须把静态资源中间件放在路由拦截之前：

// 先挂载静态文件中间件，处理JS、CSS等资源请求
app.use(express.static(path.resolve(__dirname, "./build")));

// 再处理SPA路由回退，返回修改后的index.html
app.get("/*", async (req, res) => {
  const filePath = path.resolve(__dirname, "./build", "index.html");
  try {
    let data = await fs.readFile(filePath, "utf-8");
    data = data
      .replace(/__TITLE__/g, "Gnossi Wohnig")
      .replace(/__THUMB__/g, "")
      .replace(/__DESCRIPTION__/g, "Genossenschaftswohnung in Zürich finden");
    res.send(data);
  } catch (error) {
    console.error("读取index.html失败:", error);
    res.sendStatus(500);
  }
});

4. 检查Firebase配置（若使用Firebase） #

如果用Firebase部署，别同时启用Hosting和Function托管同一个静态站点，避免冲突；另外确认functions目录下的package.json已经安装了所有依赖（比如express）。

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