MERN项目Heroku部署时如何从Node端访问React的build文件夹？

1. 先修正明显的拼写错误 #

你现有代码里的process.enn.NODE_ENV拼写错误，正确应为process.env.NODE_ENV，这个错误会导致生产环境的静态资源配置完全不触发，先修改这部分：

// 修正拼写错误，同时确认顶部已引入node内置path模块：const path = require('path');
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.resolve(__dirname, "../Frontend-Folder/build")));

  app.get("*", function (request, response) {
    response.sendFile(path.resolve(__dirname, "../Frontend-Folder/build", "index.html"));
  });
}

2. 匹配部署根目录调整配置 #

你需要确保推送到Heroku的git仓库同时包含Backend-Folder和Frontend-Folder两个目录，不能只推送Backend-Folder作为根目录，否则上层的Frontend-Folder在Heroku服务器上不存在，自然找不到路径。

• 如果你的git根目录就是最上层的Project Folder，需要把package.json从Backend-Folder移动到Project Folder根目录，同步修改heroku-postbuild脚本：

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix Frontend-Folder && npm run build --prefix Frontend-Folder"

对应调整App.js的路径写法，避免不同系统的路径符号兼容问题：

if (process.env.NODE_ENV === 'production') {
  const buildPath = path.resolve(__dirname, "..", "Frontend-Folder", "build");
  app.use(express.static(buildPath));

  app.get("*", (req, res) => {
    res.sendFile(path.join(buildPath, "index.html"));
  });
}

3. 路径校验排查 #

如果修改后还是报错，可以在App.js中加入路径打印逻辑，部署后通过heroku logs --tail查看实际解析的路径是否符合预期：

const fs = require('fs'); // 引入内置fs模块
const buildPath = path.resolve(__dirname, "../Frontend-Folder/build");
console.log("静态资源解析路径:", buildPath);
console.log("路径是否存在:", fs.existsSync(buildPath));

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