在Heroku上部署Create-React-App时出现了错误，提示`react-scripts: not found`。

Question

我们正在使用Create-React-App开发ReactJS应用程序，并从我们的Node/Express服务器提供服务，该服务器还提供API。我们使用node/JS buildpack将整个服务器部署到Heroku，并尝试获取来自node的package.json文件中 postinstall 脚本中的CRA构建步骤 npm run build ，如@ mars在此问题中建议的。。

问题是Heroku部署失败并出现错误。请注意，这个错误有时在我的本地发生，但是来自web_app的npm install 可以解决这个问题，但在Heroku上运行时不起作用。 我有两个相关的问题：

1. 如何部署同时提供API和Create-React-App应用程序的Node/Express应用程序到Heroku？我可以提交我的构建目录，但这真的不是正确的方法。 2. 为什么react-scripts会消失，我必须多次运行npm install才能解决问题。

- Philippe Cohen

---

你是否添加了 postinstall 脚本？你能否发布你的 package.json 文件？你是否在命令行中运行了 npm install -g webpack 命令？ - Daniel

你创建了你的节点 server.js 吗？ - Daniel

Answer 1

@johnnycon -

这正是问题所在，并且我从Mars在这个github问题帖子中得到了答案:

@philjoseph，react-scripts（默认情况下）是CRA应用程序的devDependency，但Heroku Node构建包具有NODE_ENV=production环境，这会导致npm install跳过devDeps。

要安装这些devDeps：

npm install --only=dev && npm install && npm run build

他还指向了这个优秀的repo：https://github.com/mars/heroku-cra-node

我按照这个做法，结果非常棒 :)

- Philippe Cohen

---

最好将此标记为答案，以便它出现在顶部。 - Tom

如果我们使用yarn会怎样？ 我尝试了： yarn install --only=dev && yarn install && npm run build 但似乎没有更改包锁文件。 - PhoenixB

谢谢，你让我省去了又一周的烦恼！ - Jonathan Bareket

我在互联网上找到的最佳答案。 - drewkiimon

不是最好的，最好的是为亚历山大准备的，简单易行，只需一步！ - Marwen Trabelsi

Answer 2

由于"react-scripts"在开发和生产中都需要使用，因此您可以将"react-scripts":"1.0.16"从"devDependencies"移动到"dependencies"，这样Heroku就不会忽略它了。

- Alexander Cherednichenko

---

这就是答案，不需要过度思考。如果你问我，这是完美的答案。 - LOTUSMS

Answer 3

2021 年，如果你需要解决这个问题，请遵循 Alexander Cherednichenko 的非常简单的建议。

解释：
截至 2021 年 10 月，Create-React-App 的 react-scripts 包存在大量安全漏洞问题。我想有些人可能会遇到他们的“修复”建议将 react-scripts 移动到 devDependencies 中。如果你要部署到 Heroku，这样做不会起作用。将 react-scripts 移动到 devDependencies 将导致此错误，因为 Heroku 需要 react-scripts 来构建 React 应用程序。
在本地运行时，一切都会很好，并且当你运行 npm audit --production 或 yarn audit --production 时，你将免于受到漏洞的影响。
然而，最终，Heroku 将要求将 react-scripts 放在常规依赖项部分中。

最高票答案提供了一个由Heroku的首席工程师Mars Hall创建的React应用程序示例库（链接），该示例库非常适合创建从节点后端提供服务的React应用程序。然而，现在它也包括在其react-ui/package.json文件的常规依赖项部分中的react-scripts。

此外，由于Create-React-App默认使用Yarn，因此添加npm install --only=dev将无法运行或工作（根据节点构建包日志）。此外，它可能会添加测试依赖项，您的应用程序绝对不需要在生产中使用。

不幸的是，在Create-React-App决定进行一些更新之前，最好忽略npm audit引发的问题（至少与react-scripts相关的问题）。由于react-scripts是一个构建工具，因此极不可能利用任何报告的漏洞。

- Nick C

Answer 4

非常简单，有一个解决方案。在运行start脚本之前，如果在你的package.json文件中设置了build脚本，Heroku将运行它。

"scripts": {
  "start": "node server.js",
  "build": "cd client/ && yarn install && yarn build"
}

- Andy Lindsay

Answer 5

react-scripts 在 package.json 中是声明为 devDependency 还是常规 dependency 呢？因为你正在 Heroku 上构建，而且假设 Heroku 正在将 env 变量视为生产模式，它不会安装 react-scripts。尝试将 react-scripts 移动为常规 dependency，然后再试试看。

对于其他云提供商，我可能不会采用这种方法，但对于 Heroku，这是我发现的最小阻力路径。此文章更详细地介绍了您的方案。https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851

- johnnycon

---

这正是问题所在，我已经从Mars在这个github issue post中得到了答案。 - Philippe Cohen

Answer 6

我正在尝试做同样的事情，即将一个create-react-app项目部署到Heroku，但遇到了"react-scripts not found something..."的问题。

Heroku会读取package.json中的scripts，但无法执行它们。解决这个问题的关键是要创建/发布scripts文件夹，而默认情况下create-react-app不会创建它，以保持简单。

因此，运行eject命令$npm run eject，scripts文件夹将被创建，同时config文件夹也会被创建。

之后，您可以再次执行heroku脚本，例如$ git push heroku master，希望一切都能在Heroku上部署成功。

有关eject脚本的更多信息，请参阅create-react-app documentation。

希望这可以帮助您，祝好运。

- Theo Itzaris

Answer 7

你能分享一下你的Package.json文件中Scripts是怎么样的吗？我昨天刚刚在Heroku上部署成功了，看起来运行得很好。

也许你的依赖项没有在package.json中正确添加。

这是我的scripts（如果你没有任何scss/less/sass，请忽略前两个scripts）：

"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "npm run start:server",
"watch": "npm-run-all --parallel watch-css start:*",
"start:server": "node server/server.js",
"start:client": "react-scripts start",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build"}

在开发时为了利用热重载功能，我运行以下命令。

npm run watch

对于生产环境，我运行：

npm run build

然后我部署到Heroku。尝试在单独的终端窗口中检查来自Heroku的日志，以便您可以检查部署中出现了什么问题。

只需使用heroku logs即可显示最近100行日志。

或者实时跟踪日志：heroku logs -t。

- Jaime Rosales

---

解决方案基本上在这一行代码中： "postinstall": "knex migrate:latest && if [ \"$NODE_ENV\" = production ]; then cd web_app/ && npm install --only=dev && npm install && npm run build; fi" - Philippe Cohen

Answer 8

我遇到了同样的问题，并且巧合地通过在package.json中添加几行代码（主项目的那个，而不是客户端的）来解决了问题，看到了@Daniel的评论之后。

这里发生的情况是Heroku正在搜索可以用于安装依赖和构建应用程序的react脚本。在我的情况下，这两个脚本都缺失了。实际上，当我遇到问题时，我的脚本是这样的:

  ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "cd client && npm run build",
    "client": "cd client && npm start"
  },
  ...

Heroku 期望找到脚本 "install-client" 和 "heroku-postbuild"。我刚刚添加了它们，错误消失了：

  ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "cd client && npm run build",
    "client": "cd client && npm start",
    "install-client": "cd client && npm install",
    "heroku-postbuild": "npm run install-client && npm run build"
  },
  ...

我希望这能帮助到某个人。

- mqbaka mqbaka

Answer 9

指定 Node 环境 告诉 Heroku 我们想要使用哪个版本的 Heroku。默认情况下，Heroku 使用较旧的版本，这将导致我们的应用程序崩溃。你有两个 package.json 文件，一个在客户端，另一个在 Express 服务器端。在 Express 服务器端的 package.json 中添加以下内容：

"engines": {
    "node": "12.9.1",
    "npm": "6.10.2" },

指定启动脚本

 Instruct heroku what command it should run to start up our server. Add this to the server side package.json 

"start":"node index.js",

INSTALL HEROKU CLI

安装 Heroku Cli

Sudo apt-get update
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh  or sudo snap install heroku

在macOS中

brew install heroku cli

默认情况下，Heroku 使用基于 Git 的部署程序或工作流程。

Git init
Git add . 
Git commit -m “initial commit”

Heroku login
Heroku create nameOfTheApp

 https://git.heroku.com/nameOfTheApp.git

这个链接是我们的部署目标。它是一个 git 仓库，我们可以将本地服务器推送到它上面。

Git remote add heroku https://git.heroku.com/nameOfTheApp.git

Git push heroku master

- Yilmaz