React+Node项目Netlify部署问题：Build失败及Fetch返回异常

云上老周

2026-8-10

问题1：执行npm run build报错找不到index.html

你的React项目实际放在client目录下，public文件夹也在client里面，但根目录package.json里的build命令直接在根目录执行react-scripts build，它会默认在当前目录查找public文件夹，所以才会报错。解决办法选其一即可：

修改根目录package.json的scripts，让build命令先进入client目录再执行构建：

"scripts": {
    "start": "node server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cd client && react-scripts build"
}

或者直接打开终端进入client目录，单独执行npm run build，构建产物会生成在client/build目录中。

问题2：部署后fetch请求返回index.html而非数据

这是Netlify的SPA路由规则导致的：Netlify默认会把所有找不到对应静态文件的请求重定向到index.html（用于支持SPA前端路由），但你的API请求被误判为前端路由，所以返回了index.html。另外，Netlify无法直接运行传统Node后端服务器，需要用Netlify Functions处理后端逻辑，具体解决步骤：

调整前端请求路径：将前端中的fetch请求路径从/api/xxx改为/.netlify/functions/xxx（Netlify Functions的默认路径前缀）。

迁移后端代码到Netlify Functions：

在项目根目录创建netlify/functions文件夹。

把原来server目录里的API逻辑拆分为单个函数文件，比如netlify/functions/getStockData.js，格式需符合Netlify要求：

exports.handler = async (event, context) => {
  // 此处编写原API处理逻辑，如请求参数处理、数据查询等
  return {
    statusCode: 200,
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ data: "你的业务数据内容" })
  };
};

配置Netlify部署参数：
- 在Netlify项目部署设置中，将构建命令设为npm run build（对应修改后的根目录build命令）。
- 将发布目录设为client/build（React构建产物所在目录）。
本地开发代理配置：如果本地开发时仍想使用原Node服务器，可在client/package.json中添加代理配置：
```
"proxy": "http://localhost:3001" // 替换为你的server实际运行端口
```
这样本地开发时，前端请求/api/xxx会自动转发到后端服务器；部署到Netlify时，再切换为/.netlify/functions/xxx路径即可，也可通过环境变量区分开发与生产环境的API地址。

若不想迁移后端到Netlify Functions，也可将后端部署到其他平台（如Vercel、Heroku），前端直接使用后端完整URL发起请求，避免与Netlify静态路由规则冲突。

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