我正在尝试将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] 删除。
我来说两句