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

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](https://dashboard.heroku.com/apps)はお手軽に自身の作成したアプリをデプロイして、皆に公開することができるプラットフォームです。

・まずはHerokuをインストール（Mac）※Windowsは[こちら参照](https://devcenter.heroku.com/articles/heroku-cli?source=post_page---------------------------#download-and-install)
`$ brew tap heroku/brew && brew install heroku`
  続いてHerokuのアカウントを作成しましょう。（説明省略）

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

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

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

アクセスしてみるとこんな画面が表示されます。
[![Image from Gyazo](https://i.gyazo.com/7fdfe8a57da0010e6079f67d04ca5497.png)](https://gyazo.com/7fdfe8a57da0010e6079f67d04ca5497)
Herokuでデプロイする際に環境依存を防ぐために`NODE_ENV`の`production`を設定しておきます。
`$ heroku config:set NODE_ENV=production --app <プロジェクト名>`

#### ３. HerokuでVueアプリを立ち上げる設定をしよう
フロントエンドのVue.jsを簡単にサーバーにアップするには[**Express**](http://expressjs.com/ja/)というNode.jsのフレームワークが便利です。
**Express**をインストール
`$ npm install express --save`  

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

```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`を見に行きます。

```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](https://medium.com/netscape/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489)

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


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