Node.js 简单todo应用程序在Heroku上崩溃（本地工作正常）

我下载了以下源代码，在本地运行，效果良好

上传（通过Github）工作正常，但是当我加载页面时，它会显示应用程序错误

Heroku给了我以下错误。我甚至不知道如何访问以下日志文件。有人知道吗

2018-08-25T20:14:40.966872+00:00应用程序[网站1]：npm错误
/app/.npm/_logs/2018-08-25T20_14_40_957Z-debug.log 2018-08-25T20:14:41.322064+00:00 heroku[路由器]：at=错误代码=H10 desc=“App crash”method=GET path=“/”host=xxx-App.herokuapp.com 请求id=aa2b7d48-198f-4fd1-b83e-70c92fc06ac6 fwd=“84.82.96.205” dyno=连接=服务=状态=503字节=协议=https

---

Heroku要求您设置一个应用服务器（HTTP服务器）来为您提供静态文件。每周todo vue不会这样做

我可以提供3种解决方案：添加web服务器并更改构建过程，提取应用构建并与服务器分开部署，在Heroku上使用webpack dev server作为服务器

添加服务器并调整构建过程 将内部版本移动到安装后脚本中

// package.json
scripts: {
  // omited ...
  "postinstall": "yarn run build",
  // omitted...
},

更改开始npm脚本

// package.json
scripts: {
  // omited ...
  "start": "node server.js",
  // omitted...
},

由于我们将在Heroku上构建应用程序，Heroku在生产环境中完成了这项工作，因此一些软件包应该从devDependencies移动到dependencies。 这相当乏味，因此您可以将依赖项移动到依赖项中。但它会增加不必要的DEP。进入你的身体

安装Express.JS依赖项：

$ yarn add express

$ yarn add express

在repo create server.js文件的根目录中，使用将为应用程序静态文件提供服务的应用程序服务器代码：

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/dist'));

const port = process.env.PORT || 5000;

app.listen(port);

提交所有更改并将其推送到Heroku

$ git push heroku master

提取构建 根据回购协议进行构建：

$ yarn run build

创建新的回购并复制

dist

目录。不要忘记将

node\u modules/

添加到.gitignore中

Init new package.json：

$ npm init -y

添加启动npm脚本

// package.json
scripts: {
  "start": "node server.js",
  // omitted...
},

安装Express.JS依赖项：

$ yarn add express

$ yarn add express

在repo create server.js文件的根目录中，使用将为应用程序静态文件提供服务的应用程序服务器代码，与先前解决方案中的服务器相同：

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/dist'));

const port = process.env.PORT || 5000;

app.listen(port);

您应该具有如下项目结构：

.
├── dist
│   ├── index.html
│   └── static
│       ├── css
│       │   ├── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css
│       │   └── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css.map
│       ├── fonts
│       │   ├── icons.674f50d.eot
│       │   ├── icons.af7ae50.woff2
│       │   ├── icons.b06871f.ttf
│       │   └── icons.fee66e7.woff
│       ├── img
│       │   ├── flags.9c74e17.png
│       │   └── icons.912ec66.svg
│       └── js
│           ├── app.88670f817a4b11e940e6.js
│           ├── app.88670f817a4b11e940e6.js.map
│           ├── manifest.304e67c5c14ed63ee160.js
│           ├── manifest.304e67c5c14ed63ee160.js.map
│           ├── vendor.434b5723496264d2da17.js
│           └── vendor.434b5723496264d2da17.js.mapo
├── package-lock.json
├── package.json
└── server.js

提交代码并将其推送到Heroku

使用网页包开发服务器 如上所述，您可以使用webpack dev server为您的应用程序提供服务。但强烈建议不要将其用于生产应用

将webpack dev server config添加到webpack.prod.conf.js：

     // ..omitted
     devtool: config.build.productionSourceMap ? config.build.devtool : false,
  +  devServer: {
  +    disableHostCheck: true,
  +    clientLogLevel: 'warning',
  +    historyApiFallback: true,
  +    hot: false,
  +    host: '0.0.0.0',
  +    port: process.env.PORT || config.dev.port,
  +    open: false,
  +    overlay: false,
  +    publicPath: config.dev.assetsPublicPath,
  +    proxy: config.dev.proxyTable,
  +    quiet: true // necessary for FriendlyErrorsPlugin
  +  },
     output: {
     // ..omitted

更改启动npm脚本：

// package.json
scripts: {
  // omited ...
  "start": "webpack-dev-server --port $PORT --host 0.0.0.0 --config build/webpack.prod.conf.js",
  // omitted...
},

由于我们将在Heroku上构建应用程序，Heroku在生产环境中完成了这项工作，因此一些软件包应该从devDependencies移动到dependencies。 这相当乏味，因此您可以将依赖项移动到依赖项中。但它会增加不必要的DEP。进入你的身体

提交更改并推送到Heroku

Heroku的节点/npm版本问题 Heroku喜欢package.json中严格的引擎规范。我建议您指定Node.JS和NPM的显式版本：

   "engines": {
-    "node": ">= 8.0.0",
-    "npm": ">= 5.0.0"
+    "node": "8.11.4",
+    "npm": "5.6.0"
   },

---

你已经运行了

npm run build

并在你的应用程序主目录中设置了基本的

Express

服务器了吗？Heroku不是为我做的吗？你需要做一些基本的配置：哇，很好的答案！我执行了“添加服务器并调整构建过程”，这当然奏效了。我的应用程序已启动并正在运行。令人惊叹的！谢谢@shvetsovdm@RichardDuinmayer谢谢你的反馈。我很高兴这个答案对你有帮助。