初めてのQiita投稿になります。よろしくお願いします！
Vue-cliでプロダクト作ったぞ！
Vueに限ったことではありませんが、私はよく何かしらシステムをデプロイする際はHerokuをよく使います。
簡単にデプロイできますしすでに色んな人が使っているので検索すれば何かしらやり方が見つかる。
そんな中、ちょっと困ったことが発生したので残しておきたいと思います。
Vue-cliをHerokuへデプロイ
以下記事が参考になると思います。
http://heimusu.hatenablog.com/entry/2017/02/27/220000
これを読めばserver.jsでHeroku周りを管理してpackage.jsonで必要なライブラリ、実行コマンドを用意すればいいのがわかりますね(server.jsはProcfileみたいなもの)。
HTML5 Historyモード
こいつです
https://router.vuejs.org/ja/essentials/history-mode.html
vue-routerを使っていると完全なSPAとして、ページのリロード無しにURL遷移したくなります。
そのため、modeをhistoryに変えて...ってひとは結構いると思います。
しかし
問題がありまして当然SPAのためindex.htmlしかありません。一応/hogeや/hoge/:idといったようにURL自体は存在します。ですが当然/hogeのようなURLで更新処理すると無いページのURLのためエラーが返ってきちゃうんですよね。
これを解消するためにはcatch-allフォールバックといって404はindex.htmlで全部受けとめてしまおうといった発想で対応します。
この設定を行うためサーバ側に処理を行うファイルを用意してあげます。例えばApache環境ならconfファイルや.htaccessに記述する感じですね(全くデプロイ経験がない人はApache conf ディレクティブとかでggるといいかもしれません)。
HerokuにVueを上げる際の設定
ここからが本題です。
node.js環境でHerokuにデプロイ(express環境)するさいはこいつを使います。
https://github.com/bripkens/connect-history-api-fallback
vue-routerの公式も推奨しているので安心ですね。
以下変更点(上に上げたHerokuデプロイ記事を見ておくの推奨)
1.npmでまとめて必要なものをinstallする
package.json
"postinstall": "npm install express connect-history-api-fallback"
2.server.jsの記述を変更
server.json
こちらを参考にしました！
https://forum.vuejs.org/t/how-do-i-implement-connect-history-api-fallback-`so-that-url-paths-redirect-to-index-html/10938/4
var express = require('express');
var app = express();
var history = require('connect-history-api-fallback');
app.use(history());
app.use(express.static(__dirname));
app.set('port', (process.env.PORT || 8080));
app.listen(app.get('port'), () => {
console.log('Derp is running at localhost: 8080');
});
こいつらをdist内に入れてあとはgit push heroku masterとかで(おそらくsubtree使ってpushするのが大半だろうけど)デプロイすれば更新ボタンを押してもエラーにならない！
簡単でした！
参考まとめ
http://heimusu.hatenablog.com/entry/2017/02/27/220000
https://forum.vuejs.org/t/how-do-i-implement-connect-history-api-fallback-`so-that-url-paths-redirect-to-index-html/10938/4