Nuxt + Herokuで簡単にデプロイする

Vue.jsでフロント側を開発していて、デプロイ周りをどうするか悩ましいのですが、Herokuを使うことで、ネットワーク関連の難しいことを考えることなく、作成したサイトを公開することができます。無料版でデプロイまで可能なので、簡単なサイトを作成しつつ、デプロイするまでを順に説明していこうと思います。

[Heroku へデプロイするには？ - Nuxt.js](https://ja.nuxtjs.org/faq/heroku-deployment/)

こちらのサイトに概要が書いてあるのですが、プロジェクトを作ってデプロイするまでの流れを書いていこうと思います。

## Nuxtでサイト作成

まずはNuxtをインストールします。

```
$ npm install --save nuxt
```

webpackを導入しなくてもVueのTemplateを実行してくれるのがNuxtのいいところですね。
各ページは/pagesの中に作っていけばそれがそのままページになります。今回はページ遷移を見るために２つページを作成します。

ディレクトリ構成は以下のようになります。

```
root/
　├ .nuxt/
　├ node_modules/
　├ pages/
　│ ├ detail.vue
　│ └ index.vue
　├ package.json
　└　　package-lock.json/
```

pages/index.vue

```vuejs
<template>
  <div>
    <h2>Hello Nuxt.js</h2>
    <nuxt-link to="/detail">detail</nuxt-link>
  </div>
</template>
```

pages/detail.vue

```vuejs
<template>
  <div>this is detail.vue</div>
</template>
```

一度起動させてみましょう。

```
$ npm run nuxt
```

![スクリーンショット 2018-12-14 21.04.25.png](https://qiita-image-store.s3.amazonaws.com/0/151039/0b412357-a1c0-52e2-72f2-07e4a8a5c138.png)


指定されたlocalhostを開きます。

![スクリーンショット 2018-12-14 21.06.57.png](https://qiita-image-store.s3.amazonaws.com/0/151039/04e4c652-8ce2-18a5-e58c-ccb45b73f9e2.png)


detailを押してページ遷移が機能するかも試します。

![スクリーンショット 2018-12-14 21.08.25.png](https://qiita-image-store.s3.amazonaws.com/0/151039/3730f8e6-e8e2-d353-4ce7-8240d7f8b46f.png)


遷移できていますね。
作成が一通り終わったところでデプロイの作業に移ります。

## Herokuでのプロジェクト作成

ページが一通りできたところでherokuのプロジェクトを作成します。
はじめに、デプロイにはGitを利用するので、Git管理不要な.nuxtディレクトリとnode_modulesディレクトリは.gitignoreに入れましょう。

.gitignore

```
node_modules/
.nuxt/
```

準備ができたらブラウザ上で、Herokuにログインします。
こちらがプロジェクトの作成した後のダッシュボード画面です。samplenuxtというプロジェクト名にしました。

![スクリーンショット 2018-12-13 13.57.40.png](https://qiita-image-store.s3.amazonaws.com/0/151039/bc6ce84c-99e2-19fc-1060-d5d2568d6497.png)

次にしていくのはheroku-cliの導入です。
https://devcenter.heroku.com/articles/heroku-cli#download-and-install

こちらを参考にします。公式サイトにあるダウンローダー形式でも実行できます。

```
$ brew install heroku/brew/heroku
```

インストールしたHeroku Cliを使ってログインします。

```
$ heroku login
```

ブラウザが開くのでそこからログインします。
![スクリーンショット 2018-12-14 20.27.34.png](https://qiita-image-store.s3.amazonaws.com/0/151039/c4e6c9df-3d15-8556-a150-d48f64b14d8b.png)

終わるとCli上でもログインが完了しています。
あとは、Git上でHerokuを登録していきます。

```
$ git init
$ heroku git:remote -a samplenuxt
```

これでHerokuとの連携は完了です。

ここからは少し設定が必要です。
最初に紹介したNuxt.jsのドキュメントを見ながら、設定項目を加えていきます。

[Heroku へデプロイするには？ - Nuxt.js](https://ja.nuxtjs.org/faq/heroku-deployment/)

Herokuのsettingsセクションから、環境変数を設定します。

![スクリーンショット 2018-12-14 20.49.56.png](https://qiita-image-store.s3.amazonaws.com/0/151039/6a772a27-531f-8556-029a-90e54ed61e2c.png)

package.jsonに以下の項目を加えます。

```
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "heroku-postbuild": "npm run build"
}
```

あとはコミットして、Herokuにプッシュすれば反映されます。

```
$ git add .
$ git commit -m 'initial commit'
$ git push heroku master
```

あとは、Heroku側がNuxtのプロジェクトであることを検知して、デプロイのための作業を行ってくれます。
この時点でHerokuへのプッシュが完了しています。

![スクリーンショット 2018-12-14 20.54.30.png](https://qiita-image-store.s3.amazonaws.com/0/151039/17d5d738-bcd9-7ff4-76dc-85d2bd03d35b.png)

右上の「Open app」を押せばデプロイしたアプリケーションが開きます。

画面が表示されない場合、画面右上の「More」からView Logsを開けばデプロイ時のログをみることができます。

![スクリーンショット 2018-12-14 20.56.21.png](https://qiita-image-store.s3.amazonaws.com/0/151039/798c7889-b285-3931-b48b-a0ccb2a8e5c9.png)


以上でデプロイが終わりです。