Heroku に Vue CLI をデプロイする方法

結論

こちらに書いてあるとおりです。

ポイント

Express は不要

Web検索をすると、Express を用いてホスティングしている事例が多く見られますが、Express は不要です。

heroku/nodejs に加え、heroku-buildpack-static という、静的サイトのホスティング用のビルドパックを用いる

heroku/nodejs というビルドパックに加え heroku-buildpack-static というビルドパックを用いることで、デプロイ時にビルドをしてくれた上で、その結果のファイルを nginx で静的配信をしてくれます*1

この heroku-buildpack-static を用いることでBasic認証をかけたりすることもできます。static.json の記述次第で他にもいろいろできます。

ビルドパックの適用順序に注意(最重要)

heroku/nodejsheroku-buildpack-static の2つのビルドパックを適用することになりますが、この順序には意味があります。

heroku/nodejs の次に heroku-buildpack-static を適用するようにしなければいけません(逆にしていて小一時間ハマりました……)。このことは Vue CLI のドキュメントにも暗に書いてあります

*1:Express は不要です

Powered by はてなブログ