简单的Todo应用在Heroku上崩溃（本地正常）

Question

I downloaded following source, run it locally and works fine https://vuejsexamples.com/weekly-todo-list-in-vue-js/

Uploading (via Github) works fine, however when I load the page it says Application error.

Heroku gives me the following error. I do not even know how to access the following log file. Any one knows?

2018-08-25T20:14:40.966872+00:00 app[web.1]: npm ERR!
/app/.npm/_logs/2018-08-25T20_14_40_957Z-debug.log 2018-08-25T20:14:41.322064+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=xxx-app.herokuapp.com request_id=aa2b7d48-198f-4fd1-b83e-70c92fc06ac6 fwd="84.82.96.205" dyno= connect= service= status=503 bytes= protocol=https

Answer 1

Heroku requires that you set up an app server (HTTP server) to serve you static files. weekly-todo-vue doesn't do this.

I can offer 3 solutions: add a web server and change build process, extract the app build and deploy it separately with a server, use webpack-dev-server as your server on Heroku.

Add a server and tweak the build process

Move build into postinstall script

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

Change start npm script

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

Some packages should be moved from devDependencies to dependencies since we going to build an app on Heroku and Heroku did this in the production environment. This is quite tedious so you can move devDependencies into dependencies. But it will add unnecessary deps. into your build.

Install Express.JS dependency:

$ yarn add express

In the root of the repo create server.js file with the app server code that will serve the app static files:

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

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

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

app.listen(port);

Commit all the changes and push it to Heroku

$ git push heroku master

Extract build

Make build from the repo:

$ yarn run build

Create new repo and copy the dist directory. Don't forgot to add node_modules/ into .gitignore.

Init new package.json:

$ npm init -y

Add start npm script;

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

Install Express.JS dependency:

$ yarn add express

In the root of the repo create server.js file with the app server code that will serve the app static files, same server as in previous solution:

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

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

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

app.listen(port);

You should have the project structure like this:

.
├── 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

Commit the code and push it to Heroku.

Use webpack-dev-server

As stated here you can use webpack-dev-server to serve your app. But this is highly not recommended for production applications.

Add webpack dev server config to 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

Change start npm script:

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

Some packages should be moved from devDependencies to dependencies since we going to build an app on Heroku and Heroku did this in the production environment. This is quite tedious so you can move devDependencies into dependencies. But it will add unnecessary deps. into your build.

Commit the change and push to Heroku.

Node/npm version issue with Heroku

Heroku loves strict engine specs in package.json. I would recommend that you specify explicit versions of Node.JS and NPM:

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