Vue.jsでの制作物をHerokuへデプロイする

備忘録になりますので、参考にならないかもしれません

## 前提条件
以前デプロイしたことがあるので、Herokuのアカウントは既に持っている

## デプロイ前準備
※cd <アプリ名>で移動した状態
①まずはHerokuをインストール（Mac）

```:ターミナル
$ brew tap heroku/brew && brew install heroku
```

②Herokuへアカウント情報(メール、パスワード)を使ってログイン

```:ターミナル
$ heroku login
```
何かキーを押してとターミナルに出てくるので、適当なキーを押す。
その後、ブラウザにログイン画面が表示されるので、Loginボタンを押す。

③Herokuにプロジェクトを作成

```:ターミナル
$ heroku create <プロジェクト名>
```

※結構プロジェクト名が既に使用されていることが多いので注意！
使用されていると以下の文がターミナルに表示される

```:ターミナル
Creating ⬢ vue-project... !  
 ▸    Name vue-project is already taken
```

成功すると、新しいアプリのURLが生成されます！

```:ターミナル
https://vuetang.herokuapp.com/ | https://git.heroku.com/vuetang.git
```

④Herokuでデプロイする際に環境依存を防ぐためにNODE_ENVのproductionを設定しておく。

```:ターミナル
$ heroku config:set NODE_ENV=production --app <プロジェクト名>
```

⑤フロントエンドのVue.jsを簡単にサーバーにアップするにはExpressというNode.jsのフレームワークが便利なので、Expressをインストール

```:ターミナル
$ npm install express --save
```

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

```javascript: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);
```

⑦ビルドする

```:ターミナル
$ npm run build
```

⑧下記コマンドでserver.jsを実行。

```:ターミナル
$ node server.js
```

⑨package.jsonを編集。

```package.json
{
  "name": "<プロジェクト名>",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "node server.js"  <--- ここを書き換え
  },
...
```

## デプロイ
①Gitリポジトリの初期化

```:ターミナル
$ git init
```

②Herokuリモートリポジトリを設定。

```:ターミナル
$ heroku git:remote --app <プロジェクト名>
```

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

```:gitignore
.DS_Store
node_modules
dist/  <--- 削除

# local env files
.env.local
.env.*.local
...
```

④Gitにステージング&コミット

```:ターミナル
$ git add . && git commit -a -m "Herokuセットアップ"
```

⑤Herokuのリモートリポジトリにpush

```:ターミナル
$ git push heroku master
```

これでOKの筈ですが、私の場合はエラーが出てきました。
↓こんな感じ

```:ターミナル
Enumerating objects: 73, done.
Counting objects: 100% (73/73), done.
Delta compression using up to 4 threads
Compressing objects: 100% (66/66), done.
Writing objects: 100% (73/73), 319.19 KiB | 4.99 MiB/s, done.
Total 73 (delta 24), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote: parse error: Invalid numeric literal at line 2, column 5
remote:  !     Unable to parse package.json
remote: 
remote: 
remote: -----> Build failed
remote: 
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote: 
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote: 
remote: Love,
remote: Heroku
remote: 
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to vuetang.
remote: 
To https://git.heroku.com/vuetang.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/vuetang.git'
```

エラー解消の記事を見つけたので、それを参考にしやってみました。

```:ターミナル
$ touch index.php
$ git add index.php
$ git commit -m "add index.php"
$ git push heroku master
```

無事デプロイできました！！

## 参考記事
https://qiita.com/kottyan/items/dbc1edb82e8562235fac
https://gist.github.com/konitter/5370904