[英]Why does my web-app work fine on localhost (npm run dev) but look like trash when deployed to heroku?
by the way, NOT a duplicate of 19 Javascript features work on localhost but not when deployed to Heroku 顺便说一句,不是19个Javascript功能的重复项可以在localhost上运行,但在部署到Heroku时不能运行
I am going to sleep so I can leave my tunneled localhost 我要睡觉了,所以我可以离开隧道的本地主机
up for now which is what I see when I run npm run dev from my machine. 现在,这就是我在计算机上运行npm run dev时看到的内容。 And by the way, I feel like this should be some sort of simple package.json fix, so here's my package.json:
顺便说一句,我觉得这应该是某种简单的package.json修复,所以这是我的package.json:
{
"name": "hps_prework",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node app.js",
"start": "node app.js",
"build": "next build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"engines": {
"node": "11.6.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"babel-loader": "^8.0.5",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"koa": "^2.7.0",
"koa-session": "^5.10.1",
"next": "^8.0.3",
"python-shell": "^1.0.7",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts": "^2.1.8",
"webpack": "^4.28.3"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
} }
But here is what my app looks like deployed to heroku : 但是这是我的应用程序部署到heroku的样子:
and here is the console output: 这是控制台输出:
which leads me to believe some resources aren't being loaded for some reason. 这使我相信由于某些原因未加载某些资源。
What am I missing? 我想念什么? repo
回购
Lastly, this is heroku logs --tail ... 最后,这是heroku原木--tail ...
2019-03-21T05:40:54.000000+00:00 app[api]: Build succeeded 2019-03-
21T05:41:00.603480+00:00 heroku[web.1]: Starting process with command `npm
start` 2019-03-21T05:41:03.185110+00:00 app[web.1]: 2019-03-
21T05:41:03.185129+00:00 app[web.1]: > hps_prework@1.0.0 start /app 2019-03-
21T05:41:03.185131+00:00 app[web.1]: > node app.js 2019-03-
21T05:41:03.185132+00:00 app[web.1]: 2019-03-21T05:41:03.463015+00:00
app[web.1]: > Ready on http://localhost:25866 2019-03-
21T05:41:04.432538+00:00 heroku[web.1]: State changed from starting to up
2019-03-21T05:41:06.070888+00:00 heroku[router]: at=info method=GET path="/"
host=summaraize.herokuapp.com request_id=96091bf7-f9c1-45f1-b3b9-
5b74ce58826f fwd="104.38.101.109" dyno=web.1 connect=0ms service=517ms
status=200 bytes=3943 protocol=https
Nextjs docs custom server package.json instructions: Nextjs 文档自定义服务器package.json的说明:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
Example app using a custom server (express in this case) mars/heroku-nextjs-custom-server-express 's package.json: 使用自定义服务器(在本例中为Express )的示例应用程序mars / heroku-nextjs-custom-server-express的package.json:
"scripts": {
"dev": "node server.js -p $PORT",
"build": "next build",
"heroku-postbuild": "next build",
"start": "node server.js -p $PORT"
},
Your package.json: 您的package.json:
You should add the heroku-postbuild
script and set NODE_ENV
and/or PORT
in your start
script if needed. 如果需要,您应该添加
heroku-postbuild
脚本并在start
脚本中设置NODE_ENV
和/或PORT
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.