vue-cliで生成したVue.js 2.0 なアプリケーションをherokuにデプロイする

Vue.js 2.0

最近のWebフロント界隈といえばReact + Redux一強だが，Vue.js 2.0もなかなか使いやすい． 公式が作成しているジェネレータvue-cliを用いてプロジェクトを生成すると，環境構築を考えることなく一通り試すことができる．

Vue.js 2.0はReact.jsほどガチガチのコンポーネント指向ではなく，Angular.js 1.x系のバインディングにコンポーネント指向を合わせたイメージ． vue-loaderが強力なので，html, js(es5), sassを一つのvueファイルにコンポーネントとして持つことが出来る． また，vue-routerも結構直感的なので本当にあっさりSPAを構築できる． webpack, webpack-dev-serverと合わせると爆速でページが量産されていく．

しばらくはVue 2.0で作っていきたい．

herokuへデプロイ

さて，Vue 2.0でページをサクサク作ったらどこかで公開しておきたくなる． herokuへのデプロイをしたいが，手順で若干詰まったのでメモ．

ローカルでの準備

本番用ファイルの準備

% npm run build

すると，本番用のファイルがdist以下に生成される． デフォルトだと.gitignoreによってリポジトリに乗らないようになっているので，これを削除してリポジトリに乗るようにしておく．

サーバーファイルの準備

heroku上で動作するサーバーファイル(node.js)を作っておく． 下記をserver.jsとして， dist以下に作成する．

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

ためしに

% node server.js

すると，localhost:5000で作成したページが表示されるはずだ．

package.jsonの準備

heroku用にpackage.jsonを作成する．とはいえ，元々ルートディレクトリにあったpackage.jsonをコピーして手を加えるだけだ．

% cp package.json dist/

した後，下記をコピー先のpackage.jsonに追記する．

scripts: {
    ...
    "postinstall": "npm install express",
    "start": "node server.js"
}

ここまで準備できたら，一度gitにpushしておこう（heroku以外でも管理している場合）．

herokuの準備

herokuのアプリを新規で作成しておく． 作成して，herokuのremoteを登録しておく． また，buildpacksのnodejsを指定する．

% heroku git:remote -a vue-application
% heroku buildpacks:set heroku/nodejs

pushする

いよいよpushとなる． ここで重要なのは，distディレクトリのみをpushすることだ． subtreeを用いて，下記のように叩く．

% git subtree push --prefix dist heroku master

heroku openする

出来上がり．

あとがき

手順を確立してしまうと簡単だが，少しはまってしまった． このように本番ビルドの結果 + 動作用のサーバーアプリケーションのみをデプロイする方法はvue以外でも活用できそうなので，覚えておきたい．

参考

ほとんどのやり方はこちらを参考にした．ありがとうございます． https://medium.com/@sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.752sfjdmv