読者です 読者をやめる 読者になる 読者になる

積極的後進

後ろ向きに全力ダッシュ

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