将Create-React-App部署到Heroku失败,原因为'react脚本:未找到'

jjjwad0x  于 2022-11-13  发布在  React
关注(0)|答案(9)|浏览(142)

我们正在使用Create-React-App开发一个ReactJS应用程序,该应用程序由我们的Node/Express服务器提供服务,该服务器也提供API。我们使用node/JS构建包将整个服务器部署到Heroku,并尝试从节点package.json文件中获取postinstall脚本中的CRA构建步骤npm run build,如@mars in this issue所建议。
问题是Heroku部署失败并出现此错误。请注意,此错误有时在本地发生,但随后web_app中的npm install解决了此问题,但在Heroku中运行时却无法解决。我有两个相关问题:
1.如何在Heroku上部署一个同时支持API和Create-React-App应用的Node/Express应用?我可以提交我的构建目录,但这真的不是正确的方法。
1.为什么React脚本消失了,我必须运行多次npm install

vof42yt1

vof42yt11#

@约翰尼肯-
这正是问题所在,我已经在github的这篇文章中收到了来自Mars的答案:
@philjoseph,react-scripts是(默认情况下)CRA应用程序的devDependency,但Heroku节点构建包具有环境NODE_ENV=production,这导致npm安装跳过devDeps。
要同时安装这些devDeps,请执行以下操作:
npm安装--only=开发&& npm安装&& npm运行构建
他还提到了这一优秀的回购协议:https://github.com/mars/heroku-cra-node
我遵循了这一点,它的工作就像一个魅力:)

zed5wv10

zed5wv102#

由于您在开发和生产中都需要“React脚本”,因此可以简单地移动“React脚本”:将“1.0.16”从**“devDependencies”转换为“dependencies”**,因此heroku不会忽略它。

6ss1mwsb

6ss1mwsb3#

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

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

rbl8hiat4#

对于2021年的任何人,请遵循 Alexandria ·切列德尼琴科的“非常简单”的建议

说明:截至2021年10月,Create-React-App的react-script软件包存在大量安全漏洞。我想一些人可能会遇到他们的“修复”,建议将react-script移到devDependencies。如果你要部署到Heroku,这将工作。将react-script移到devDependencies将导致此错误,因为Heroku需要react-script来构建React应用。在本地将是正常的。并且当您运行npm audit --productionyarn audit --production时,您将没有漏洞。
投票率最高的答案提供了一个很好的例子,由火星霍尔回购(Heroku的首席工程师)创建了一个从节点后端提供服务的react应用程序。不过,现在它也在react-ui/package.json文件的常规依赖项部分包含react-scripts。此外,由于Create-React-App现在默认为Yarn,添加的npm install --only=dev将不会运行也不会工作(我可以根据节点buildpack日志来判断)。此外,它可能会添加您的应用在生产中肯定不需要的测试依赖项。
不幸的是,在Create-React-App决定做一些更新之前,最好忽略npm审计带来的问题(至少是与react-scripts相关的问题)。由于react-scripts是一个构建工具,因此产生的任何漏洞都极不可能被利用。
这可能更适合作为 Alexandria ·切雷德尼琴科回答的评论,但我离这样做还有一个名声。
希望有人真的觉得这很有帮助!

8ljdwjyq

8ljdwjyq5#

在package.json中,react-scripts声明为devDependency还是常规依赖项?由于您是在Heroku上构建的,而heroku正在阅读env变量作为生产变量(我假设在这里),因此它不会安装react-scripts。请尝试将react-scripts作为常规依赖项移动,然后重试。
对于其他云提供商,我可能不会采用这种方法,但对于Heroku,这是我发现的阻力最小的方法。本文将更详细地介绍您的场景。https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851

nfg76nw0

nfg76nw06#

我尝试了完全相同的事情,将create-react-app项目部署到heroku,并获得了react-scripts not found something...
Heroku将脚本读入package.json,但无法执行。
解决这个问题的关键是“创建/发布”“scripts”文件夹,默认情况下create-react-app不会创建它,只是为了简化操作。
因此,通过运行eject命令$npm run eject,将创建与config文件夹一样长的scripts文件夹。
之后,您可以再次执行heroku脚本,例如$ git push heroku master,希望它将在Heroku上部署所有内容。
create-react-app文档中有关eject脚本的更多信息
希望这对你有帮助,祝你好运。

33qvvth1

33qvvth17#

你能分享一下你的Package.json文件脚本的样子吗?我昨天实际上部署到了Heroku,它似乎对我来说工作得很好。
可能您的依赖项没有正确添加到package.json中。
这是我的脚本的外观(如果你没有任何scss/less/sass,忽略前两个脚本):

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

cwxwcias

cwxwcias8#

指定节点环境告诉heroku我们要使用的heroku版本。默认情况下heroku使用旧版本,这会使我们的应用程序崩溃。您有2个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

“开始”:“节点索引. js”,

INSTALL HEROKU CLI

安装Heroku客户端

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
44u64gxh

44u64gxh9#

我遇到了同样的问题,在看到@丹尼尔的评论后,我碰巧通过在package.json中添加几行(主项目的行,而不是客户端的行)来解决这个问题。
这里发生的事情是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"
  },
  ...

我希望这能帮到一些人。

相关问题