Vue.jsで作ったアプリをHerokuにデプロイ #Node.js

Vueで作成したアプリをHerokuを使ってサッとデプロイした話です！（初心者さん向け）
公式を見ながら行なったものの少し苦戦したので、ここにまとめます。
参考にした海外のサイトのほぼ和訳になってしまうかも・・・

実行環境

Mac OS 10.14.2

下記をインストールされている前提で行います。



$git --version
git version 2.17.2 (Apple Git-113)
$ vue --version
3.9.3
$ node --version
v11.12.0
$ npm --version
6.10.1

※ 参考サイトではyarnの使用を推薦していましたが、ここではnpmを使います。
yarnで行う場合は適宜読み替えてください。

手順

１. Vueのプロジェクトを作成しよう
２. Herokuアプリケーションを作成しよう
３. HerokuでVueアプリを立ち上げる設定をしよう
４. デプロイしよう！

１. Vueのプロジェクトを作成しよう

・Vue CLIをインストール
$ npm install --global vue-cli

・Vueのプロジェクトを新規作成
$ vue init webpack <プロジェクト名>

・Vueのプロジェクトのルートディレクトリへ移動
$ cd <プロジェクト名>

・package.jsonに記載されたパッケージをインストール
$ npm install

・ローカルサーバーを立ち上げる
$ npm run dev

Vueのプロジェクトはこれで完成です！

２. Herokuアプリケーションを作成しよう

Herokuはお手軽に自身の作成したアプリをデプロイして、皆に公開することができるプラットフォームです。

・まずはHerokuをインストール（Mac）※Windowsはこちら参照
$ brew tap heroku/brew && brew install heroku
続いてHerokuのアカウントを作成しましょう。（説明省略）

・Herokuへアカウント情報(メール、パスワード)を使ってログイン
$ heroku login
何かキーを押してと言われるので、適当なキーをタッチします。
すると、ブラウザにログイン画面が表示されるので、Loginボタンを押下します。

・Herokuにプロジェクトを作成
$ heroku create <プロジェクト名>

ここで、新しいアプリのURLが生成されます！
https://<プロジェクト名>.herokuapp.com/

アクセスしてみるとこんな画面が表示されます。

Herokuでデプロイする際に環境依存を防ぐためにNODE_ENVのproductionを設定しておきます。
$ heroku config:set NODE_ENV=production --app <プロジェクト名>

３. HerokuでVueアプリを立ち上げる設定をしよう

フロントエンドのVue.jsを簡単にサーバーにアップするにはExpressというNode.jsのフレームワークが便利です。
Expressをインストール
$ npm install express --save

プロジェクトのルートディレクトリ直下にserver.jsを作成します。

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

ここでのポイントは５行目のdistディレクトリです。

distディレクトリにはVue.jsの圧縮されたファイルが定義されています。
ここでは、Herokuへ渡せるようにdistディレクトリを定義しています。

・ビルドします
$ npm run build

・下記コマンドでserver.jsを実行します。
$ node server.js

http://localhost:5000にアクセスすると、Herokuで実際に立ち上がるサイトをローカルで確認できます。

次にpackage.jsonも編集します。
HerokuはNode.jsのアプリを実行する際に自動的にpackage.jsonを見に行きます。

// package.json
{
  "name": "<プロジェクト名>",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "start": "node server.js",   <--- ここを編集します
...

４. デプロイしよう！

・Gitリポジトリの初期化
$ git init

Herokuリモートリポジトリを設定します。
$ heroku git:remote --app <プロジェクト名>

Herokuへデプロイしたdistディレクトリを保持しておくために.gitignoreから外します。

// .gitignore
.DS_Store
node_modules/
dist/  <--- 削除します
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test/unit/coverage
test/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

・Gitにステージング&コミット
$ git add . && git commit -a -m "Herokuセットアップ"

・Herokuのリモートリポジトリにpush
$ git push heroku master

これでpackage.jsonのstartで定義したコマンドが走り、最新のdistディレクトリがサーバーへアップされます！

https://<プロジェクト名>.herokuapp.com/
へアクセスして確認できます！！

※上手くいかないときheroku logsでログを出力することで解決の手がかりになります。。。

参考

こちらのサイトを大いに参考にさせていただきました！
Netscape

海外のサイトの方が実はわかりやすいことが多い気がします（英語ともっと仲良くしたい・・・）
ありがとうございます！

最後に

間違っているなどあれば、ご指摘いただけるとありがたいです！！！