简单的Todo应用在Heroku上崩溃(本地正常)

时间:2018-08-25 20:27:09

标签: node.js heroku vue.js

我下载了以下源代码,在本地运行并可以正常运行 https://vuejsexamples.com/weekly-todo-list-in-vue-js/

(通过Github)上传工作正常,但是,当我加载页面时,显示应用程序错误。

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

  

2018-08-25T20:14:40.966872 + 00:00 app [web.1]:npm错误!
  /app/.npm/_logs/2018-08-25T20_14_40_957Z-debug.log   2018-08-25T20:14:41.322064 + 00:00 heroku [router]:at =错误代码= H10   desc =“应用程序崩溃”方法=获取路径=“ /”主机= xxx-app.herokuapp.com   request_id = aa2b7d48-198f-4fd1-b83e-70c92fc06ac6 fwd =“ 84.82.96.205”   dyno = connect = service = status = 503字节= protocol = https

1 个答案:

答案 0 :(得分:0)

Heroku要求您设置一个应用服务器(HTTP服务器)来为您提供静态文件。每周待办事项不执行此操作。

我可以提供3种解决方案:添加Web服务器并更改构建过程,提取应用程序构建并将其与服务器分开部署,使用webpack-dev-server作为Heroku上的服务器。

添加服务器并调整构建过程

将其内置到后安装脚本

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

更改开始 npm脚本

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

有些软件包应该从 devDependencies 移到 dependencies ,因为我们将在Heroku上构建应用程序,而Heroku在生产环境中做到了这一点。 这非常繁琐,因此您可以将devDependencies移入依赖项。但这会增加不必要的深度。进入您的构建。

安装Express.JS依赖项:

$ yarn add express

在repo的根目录中,使用将为应用程序静态文件提供服务的应用程序服务器代码创建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_modules/添加到.gitignore。

初始化新的package.json:

$ npm init -y

添加启动npm脚本;

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

安装Express.JS依赖项:

$ yarn add express

在repo创建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

here所述,您可以使用 webpack-dev-server 来服务您的应用。但这是极不推荐用于生产应用程序的。

将webpack开发服务器配置添加到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...
},

有些软件包应该从 devDependencies 移到 dependencies ,因为我们将在Heroku上构建应用程序,而Heroku在生产环境中做到了这一点。 这非常繁琐,因此您可以将devDependencies移入依赖项。但这会增加不必要的深度。进入您的构建。

提交更改并推送到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"
   },