为什么我的 web 应用程序在 localhost (npm run dev) 上运行良好，但在部署到 heroku 时看起来像垃圾？答案

【问题标题】：Why does my web-app work fine on localhost (npm run dev) but look like trash when deployed to heroku?为什么我的 web 应用程序在 localhost (npm run dev) 上运行良好，但在部署到 heroku 时看起来像垃圾？
【发布时间】：2019-08-11 23:02:21
【问题描述】：

顺便说一句，不是19 Javascript features work on localhost but not when deployed to Heroku的重复项

我要去睡觉了，所以我可以离开my tunneled localhost

现在是我从机器上运行 npm run dev 时看到的。顺便说一句，我觉得这应该是某种简单的 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"
]

}

但这是我的应用部署到heroku 的样子：

这是控制台输出：

这让我相信某些资源由于某种原因没有被加载。

我错过了什么？ repo

最后，这是 heroku logs --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

【问题讨论】：

你的 server.js 文件中是否有任何配置必须在生产中提供静态文件if (process.env.NODE_ENV === 'production') { ... }
@HendEl-Sahli 我的 next.config.js 看起来像 module.exports = { // some configuration assetPrefix: process.env.NODE_ENV === 'production' ? '/{summarAIze}' : '', // another configuration };
这将是 server.js 中唯一的其他相关行（对我来说，app.js）const dev = process.env.NODE_ENV !== 'production';
你在 chrome 开发工具中尝试过clearing storage 吗？
我看了看，但它说该网站正在使用 31000B 之类的 0B，所以这可能不是@JBallin

标签： node.js reactjs heroku material-ui next.js

【解决方案1】：

Nextjsdocs自定义服务器package.json说明：

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

使用自定义服务器的示例应用程序（在本例中为快递）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"
},

你的 package.json：

如果需要，您应该添加heroku-postbuild 脚本并在您的start 脚本中设置NODE_ENV 和/或PORT。

【讨论】：

我不认为构建后脚本（我还是添加了）有任何改变，因为我一直在观察日志输出，因为 heroku 构建了我的应用程序，无论脚本是否称为“构建”或者“heroku-postbuild”它同时做同样的事情，而且heroku也在构建过程中添加了这个信息：-----> Change to Node.js build process Heroku has begun executing the "build" script defined in package.json during Node.js builds. Read more: https://devcenter.heroku.com/changelog-items/1573
这些是我到目前为止尝试过的脚本，但没有一个有效："scripts": { "dev": "node app.js", "build": "next build", "start": "next start -p $PORT", "heroku-postbuild": "next build" },"scripts": { "dev": "node app.js", "build": "next build", "start": "NODE_ENV=production node app.js", "heroku-postbuild": "next build" },