vue-cli で作成したプロジェクトを最小限？の編集でHerokuにデプロイするメモ

概要

vue-cli で作成したプロジェクトをベースに技術検証をして同僚にデモをしたかったのでHerokuにデプロイしたくなりました。
デフォルトの状態ではうまく動かないので調査した結果をメモします。

基本的には こちら の記事を参考にさせていただきました。
しかしビルドした成果物をリポジトリにコミットしているため、コミットしないように改善しました。

結果

こちら

環境

各種環境とツールのバージョンはこちらです。

環境

vue-cli-heroku> node -v
v8.11.1
vue-cli-heroku> npm -v
6.1.0
vue-cli-heroku> vue -V
2.9.6

【重要】
こちらの設定を行わないと成果物をビルドする際に必要なライブラリがダウンロードされず動きません。

Heroku環境変数設定

vue-cli-heroku> heroku config:set NPM_CONFIG_PRODUCTION=false

変更点

こちら

package.json 修正

nodeプロジェクトをHerokuにデプロイすると「npm start」が実行されるため、
production用のビルドと成果物を配信するサーバーを立ち上げる処理に変更します。

package.json

diff --git a/package.json b/package.json
index ae062d4..e49b481 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "dev": "node build/dev-server.js",
-    "start": "node build/dev-server.js",
+    "start": "npm run build && node server.js",
     "build": "node build/build.js",
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "e2e": "node test/e2e/runner.js",

配信用サーバー新規作成

server.js（新規作成）

diff --git a/server.js b/server.js
new file mode 100644
index 0000000..7023599
--- /dev/null
+++ b/server.js
@@ -0,0 +1,11 @@
+var express = require('express');
+var path = require('path');
+var serveStatic = require('serve-static');
+
+app = express();
+app.use(serveStatic(path.join(__dirname, "/dist")));
+
+var port = process.env.PORT || 5000;
+app.listen(port);
+
+console.log('server started '+ port);

参考サイト

Easily deploy a Vue + Webpack App to Heroku in 5 Steps [tutorial]
Heroku Node.js Support