到 Heroku 的 Create-React-App 部署失败，原因是 `react-scripts: not found`答案

【问题标题】：Create-React-App deployment to Heroku failed with ` react-scripts: not found`到 Heroku 的 Create-React-App 部署失败，原因是 `react-scripts: not found`
【发布时间】：2017-06-15 09:10:17
【问题描述】：

我们正在使用 Create-React-App 开发一个 ReactJS 应用程序，该应用程序由我们的 Node/Express 服务器提供服务，该服务器也提供 API。我们使用节点/JS buildpack 将整个服务器部署到 Heroku，并尝试按照 @mars in this issue 的建议从节点 package.json 文件中的 postinstall 脚本中获取 CRA 构建步骤 npm run build。

问题是 Heroku 部署失败并出现此错误。请注意，此错误有时在本地发生在我身上，但是来自 web_app 的 npm install 正在解决问题，但在 Heroku 中运行时却没有。我有两个相关的问题：

如何向 Heroku 部署一个同时提供 API 和 Create-React-App 应用程序的 Node/Express 应用程序？我可以提交我的构建目录，但这确实不是正确的方法。
为什么反应脚本消失了，我必须多次运行npm install。

【问题讨论】：

您是否添加了postinstall 脚本？您可以发布您的package.json 文件吗？您是否在命令行中运行了npm install -g webpack？
您是否创建了您的节点server.js？

标签： express heroku create-react-app

【解决方案1】：

react-scripts 是在 package.json 中声明为 devDependency 还是常规依赖项？由于您在 Heroku 上构建并且 heroku 正在将 env 变量读取为生产环境（我在这里假设），因此它不会安装 react-scripts。尝试将 react-scripts 作为常规依赖项移动，然后重试。

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

【讨论】：

这正是问题所在，我在github issue post 中收到了来自Mars 的答复

【解决方案2】：

您能分享一下您的 Package.json 文件脚本的外观吗？我昨天实际上部署到 Heroku，它似乎对我来说工作得很好。

也许您的依赖项未正确添加到您的 package.json 中。

这是我的脚本的外观（如果您没有任何 scss/less/sass，请忽略前 2 个脚本）：

"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"}

在开发中运行以利用我运行的 Hotrealoding

npm run watch

对于 PROD，我运行

npm run build

然后我部署到 Heroku。尝试在单独的终端窗口中检查 Heroku 的日志，以便检查部署有什么问题。

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

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

【讨论】：

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

【解决方案3】：

@johnnycon -

这正是问题所在，我在github issue post 中收到了来自Mars 的答复：

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

也安装这些 devDeps：

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

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

我遵循了这个，它就像一个魅力:)

【讨论】：

最好将此标记为答案，以便它显示在顶部。
如果我们使用纱线呢？我试过： yarn install --only=dev && yarn install && npm run build 但这似乎没有对包锁定文件进行更改
谢谢，让我又省了一周的故障排除时间！
绝对是我在互联网上找到的最佳答案
不是最好的，最好的是亚历山大，简单而且只有一步！

【解决方案4】：

由于您在开发和生产中都需要“react-scripts”，您可以简单地将“react-scripts”：“1.0.16”从“devDependencies”移动到“dependencies "，所以 heroku 不会忽略它。

【讨论】：

这是票。没必要多想。如果你问我，完美的答案

【解决方案5】：

我正在尝试完全相同的事情，将 create-react-app 项目部署到 heroku，并得到了react-scripts not found something...。

Heroku 将脚本读入 package.json 并且无法执行它们。

克服这个问题的关键是“创建/发布”“scripts”文件夹，默认情况下create-react-app不会创建它，只是为了保留事情很简单。

因此，通过运行eject 命令$npm run eject，scripts 文件夹与config 文件夹一样长。

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

有关eject 脚本的更多信息create-react-app documentation

希望这会有所帮助，祝你好运。

【讨论】：

【解决方案6】：

指定节点环境 告诉heroku 我们要使用哪个版本的heroku。默认情况下，heroku 使用旧版本，这会使我们的应用程序崩溃。你有 2 个 package.json 文件，一个在客户端，另一个在 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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

对于 2021 年的任何人，请遵循 Alexander Cherednichenko 非常简单的建议

说明：截至 2021 年 10 月，Create-React-App 的 react-script 包存在大量安全漏洞问题。我想有些人可能会遇到他们的“修复”，这表明将反应脚本移动到 devDependencies。如果您要部署到 Heroku，这将不工作。将 react-scripts 移动到 devDependencies 将导致此错误，因为 Heroku 需要 react-scripts 来构建 React 应用程序。在本地会很好，当你运行 npm audit --production 或 yarn audit --production 时，你将没有漏洞。但最终，Heroku 将要求 react-scripts 位于常规依赖项部分。

投票率最高的答案提供了 Mars Hall（Heroku 的首席工程师）的一个很好的示例 repo，用于创建从节点后端提供服务的 react 应用程序。不过，如今，它也在 react-ui/package.json 文件的常规依赖项部分中包含了 react-scripts。此外，由于这些天 Create-React-App 默认为 Yarn，添加 npm install --only=dev 将不会运行或工作（我可以根据节点 buildpack 日志判断）。此外，它可能会添加您的应用在生产中绝对不需要的测试依赖项。

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

附：在 Alexander Cherednichenko 的回答下，这可能更适合作为评论，但我距离能够做到这一点还差一个名声。

P.P.S 希望有人真的觉得这很有帮助！

【讨论】：