如何将ReactJS应用程序部署到Heroku

乔纳森·斯莫特

我正在尝试将reactJS应用程序部署到heroku。我正在本地计算机上进行开发。我的package.json文件中包含以下内容:

"name": "sample-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "start": "webpack-dev-server --open"
}

在本地计算机上进行测试时,我在命令提示符下键入“ npm start”,浏览器打开到localhost:8080,应用程序启动。

当我将应用程序部署到heroku服务并尝试启动该应用程序时,出现应用程序错误。然后,我查看了日志,并看到了以下内容:

2018-09-06T13:37:57.697321+00:00 app[api]: Release v1 created by user [email protected]
2018-09-06T13:37:57.785389+00:00 app[api]: Enable Logplex by user [email protected]
2018-09-06T13:37:57.785389+00:00 app[api]: Release v2 created by user [email protected]
2018-09-06T13:38:40.000000+00:00 app[api]: Build started by user [email protected]
2018-09-06T13:37:57.697321+00:00 app[api]: Initial release by user [email protected]
2018-09-06T13:39:05.206635+00:00 app[api]: Scaled to web@1:Free by user [email protected]
2018-09-06T13:39:05.188008+00:00 app[api]: Release v3 created by user [email protected]
2018-09-06T13:39:05.188008+00:00 app[api]: Deploy 257b0e8b by user [email protected]
2018-09-06T13:39:08.000000+00:00 app[api]: Build succeeded
2018-09-06T13:39:10.243037+00:00 heroku[web.1]: Starting process with command `npm start`
2018-09-06T13:39:12.459230+00:00 app[web.1]:
2018-09-06T13:39:12.459251+00:00 app[web.1]: > [email protected] start /app
2018-09-06T13:39:12.459255+00:00 app[web.1]:
2018-09-06T13:39:12.459253+00:00 app[web.1]: > webpack-dev-server --open
2018-09-06T13:39:13.990393+00:00 app[web.1]: Project is running at http://localhost:8080/
2018-09-06T13:39:13.990876+00:00 app[web.1]: webpack output is served from /
2018-09-06T13:39:13.990913+00:00 app[web.1]: Content not from webpack is served from /app/public
2018-09-06T13:39:13.990975+00:00 app[web.1]: 404s will fallback to /index.html
2018-09-06T13:39:13.999552+00:00 app[web.1]: internal/child_process.js:323
2018-09-06T13:39:13.999556+00:00 app[web.1]: throw errnoException(err, 'spawn');
2018-09-06T13:39:13.999557+00:00 app[web.1]: ^
2018-09-06T13:39:13.999559+00:00 app[web.1]:
2018-09-06T13:39:13.999560+00:00 app[web.1]: Error: spawn EACCES
2018-09-06T13:39:13.999562+00:00 app[web.1]: at _errnoException (util.js:992:11)
2018-09-06T13:39:13.999564+00:00 app[web.1]: at ChildProcess.spawn (internal/child_process.js:323:11)
2018-09-06T13:39:13.999565+00:00 app[web.1]: at Object.exports.spawn (child_process.js:502:9)
2018-09-06T13:39:13.999567+00:00 app[web.1]: at module.exports (/app/node_modules/opn/index.js:76:26)
2018-09-06T13:39:13.999569+00:00 app[web.1]: at reportReadiness (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:474:5)
2018-09-06T13:39:13.999571+00:00 app[web.1]: at Server.server.listen (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:439:7)
2018-09-06T13:39:13.999572+00:00 app[web.1]: at Server.returnValue.listeningApp.listen (/app/node_modules/webpack-dev-server/lib/Server.js:615:10)
2018-09-06T13:39:13.999575+00:00 app[web.1]: at emitNone (events.js:106:13)
2018-09-06T13:39:13.999573+00:00 app[web.1]: at Object.onceWrapper (events.js:313:30)
2018-09-06T13:39:13.999576+00:00 app[web.1]: at Server.emit (events.js:208:7)
2018-09-06T13:39:14.008212+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-09-06T13:39:14.008589+00:00 app[web.1]: npm ERR! errno 1
2018-09-06T13:39:14.009730+00:00 app[web.1]: npm ERR! [email protected] start: `webpack-dev-server --open`
2018-09-06T13:39:14.009893+00:00 app[web.1]: npm ERR! Exit status 1
2018-09-06T13:39:14.010124+00:00 app[web.1]: npm ERR!
2018-09-06T13:39:14.010297+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2018-09-06T13:39:14.010464+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-09-06T13:39:14.050770+00:00 app[web.1]:
2018-09-06T13:39:14.051004+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-09-06T13:39:14.051156+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-09-06T13_39_14_011Z-debug.log
2018-09-06T13:39:14.139768+00:00 heroku[web.1]: State changed from starting to crashed

我很确定我需要将“开始”脚本更改为其他内容,但是我不知道需要将其更改为什么。我认为。

有任何想法吗?

凯莉·巴伯

您确实不应该使用dev-server尝试在生产环境中运行您的应用程序。我将推出一个简单的Express服务器,并使用它来部署您的应用程序。您可以非常快速地进行此设置:

npm i -s express

然后在应用程序结构的顶层创建您的server.js文件。

将此代码放入server.js文件:

const express = require('express')
const app = express()
const path = require('path')
const port = process.env.PORT || 3001

app.use('/', express.static(path.join(__dirname, 'public')))

app.listen(port, () => console.log("Listening on Port", port)) 

本质上,这只是设置您的服务器,然后向其显示在哪里可以找到要用来加载React应用程序以将其发送到浏览器的index.html页面。如果您的webpack安装程序将index.html文件输出到“ public”以外的文件夹,则只需将该文件夹的名称放在“ __dirname”之后我放置“ public”的位置即可。

现在,您只需要构建您的应用程序。

如果您使用的是webpack,就像在package.json中设置“ build”脚本一样简单:

"build": "webpack -p"

然后确保Heroku知道如何将您的构建与另一个脚本一起使用:

"heroku-postbuild": "npm run build"

最后,设置“启动”脚本以运行服务器(Heroku为此默认使用名称“ start”):

"start": node server.js

因此,您的package.json脚本应如下所示:

"scripts": {
    "dev-server": "webpack-dev-server --open"
    "start": "node server.js",
    "build": "webpack -p",
    "heroku-postbuild": "npm run build"
}

现在,如果您推送到Heroku,它应该可以正常运行。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将 Kotlin 应用程序部署到 Heroku?

如何将Spring Boot应用程序项目部署到Heroku

如何将Typescript Node.js应用程序部署到Heroku?

如何将Scala HTTP4S应用程序部署到Heroku?

如何将React SSR应用程序部署到Heroku?

如何将Typescript,NodeJS和Express应用程序部署到Heroku

如何将基于Sinatra的Ruby Web应用程序部署到Heroku?

如何将Java Web应用程序部署到heroku?

如何将macchiato clojurescript应用程序部署到Heroku免费帐户?

如何将MERN堆栈应用程序部署到GitHub和Heroku?

如何将全栈应用程序部署到heroku或netlify?哪些文件是必需的?

如何将Go应用程序部署到Bluemix?

如何将django应用程序部署到URL?

如何将具有opencv4nodejs依赖项的Node.js应用程序部署到Heroku?

如何将node.js应用程序部署到heroku?有没有可能?

如何将NodeJs应用程序部署到Azure Web应用程序

将Angular应用程序部署到Heroku时出错

无法将Spring Boot应用程序部署到heroku

无法将示例GOLang应用程序部署到Heroku

将烧瓶应用程序部署到 heroku 错误

将 angular-universal 应用程序部署到 heroku

无法将 Laravel 应用程序部署到 Heroku

无法将应用程序部署到heroku

使用ActionCable将Rails应用程序部署到Heroku

将NodeJS应用程序部署到Heroku

无法将 rails 应用程序部署到 heroku

将 Django 应用程序部署到 Heroku 时出错

如何将 socket.io 与 Heroku 部署的 React Native 应用程序连接?

如何使用子目录中的主包将Go应用程序部署到Heroku?