Heroku部署独立Nestjs+React项目报react-scripts未找到问题求助

一、React项目前置依赖校验（解决报错核心问题） #

• 首先删除本地项目的node_modules文件夹、package-lock.json或yarn.lock锁文件，执行npm install或yarn install重新生成依赖锁文件。Heroku会严格按照锁文件的依赖标记安装包，旧锁文件会保留react-scripts的devDependencies标记，即使手动挪位置也不会生效
• 确认package.json中react-scripts已经放在dependencies字段下，且scripts字段包含正确的build命令，示例配置如下：

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

• 检查项目根目录是否存在.npmrc文件，删除里面的production=true、only=prod类配置；同时确认Heroku的环境变量中没有设置NPM_CONFIG_PRODUCTION=true，该配置会强制跳过所有dev依赖安装，引发找不到包的问题。

二、Heroku端React项目专属配置 #

• 在Heroku React项目的Settings面板Buildpacks板块，确认已添加官方Node.js buildpack：heroku/nodejs
• 在Settings->Config Vars中添加React项目用到的所有环境变量，React环境变量必须以REACT_APP_开头才能被识别，例如后端接口地址配置为REACT_APP_API_URL = 你的Nestjs部署后的外网访问地址
• 在React项目根目录新建static.json文件，解决BrowserRouter模式下刷新页面404的问题，内容如下：

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

三、与独立部署Nestjs后端适配配置 #

• React项目内所有接口请求统一使用配置的环境变量作为前缀，示例代码：

const baseURL = process.env.REACT_APP_API_URL
axios.get(`${baseURL}/api/你的接口路径`)

• 调整Nestjs服务端的CORS配置，放开React部署域名的跨域权限，Nestjs main.ts示例配置：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: "你的React项目部署后的外网访问地址",
    credentials: true
  })
  await app.listen(process.env.PORT || 3000);
}
bootstrap();

四、部署验证 #

• 将所有修改提交到Git仓库后，执行git push heroku 你的本地分支名:main推送到Heroku仓库触发构建
• 构建完成后执行heroku logs --tail查看运行日志，无报错即可访问React项目地址验证页面加载、接口请求是否正常

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