Nuxt.jsをDokkuを使ってEC2やGCEへ気軽にデプロイする

APIを叩かないNuxt.jsプロジェクトなら```generate```コマンドで十分なのですが、リアルタイムのデータをAPI経由で取得してそれをSSRしたい場合は、VPSを借りてnode.js環境を構築して云々作業が必要です。となるとデプロイも色々めんどくさい。そんなときに便利なのがDokkuです。

## Dokkuとは

DokkuとはHerokuをインスパイヤして作られたPaaSです。Herokuのデプロイ```git push heroku master```と似たような感じで一度環境を構築してしまえば```git push dokku master```で自分が用意したVPSにデプロイできるようなやつです。

（Dokkuの中身はDockerと数百行のBashスクリプトのようです）

## Dokkuを使ってNuxt.jsをデプロイする手順

### まずインスタンスを用意しましょう

<img width="879" alt="スクリーンショット 2018-04-22 16.03.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/21909/4f2e41d7-3516-63cb-74c4-a927edb772cf.png">

今回はGCEでやってみます。GCEのVMインスタンスを作成してください。microでもいけるんですが、たまにメモリ不足でbuildが落ちてたりするのでsmall以上をオススメします。「HTTP トラフィックを許可する」「HTTPS トラフィックを許可する（場合によっては）」にもチェックするのをお忘れなく。

### SSHでログインしてDokkuをインストール

SSH認証鍵の設定をしてターミナルでログインしてください。

```bash
$ wget https://raw.githubusercontent.com/dokku/dokku/v0.12.4/bootstrap.sh
$ sudo DOKKU_TAG=v0.12.4 bash bootstrap.sh
```

上記コマンドをサーバー側で実行し、bootstrap.sh取得してDokkuをインストールしてください。最新verをインストールしたい場合は以下のDokkuのWebサイトで確認下さい。

<img width="848" alt="スクリーンショット 2018-04-22 16.09.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/21909/fb729031-aa39-88e9-c3e5-d759c4f0383e.png">

[http://dokku.viewdocs.io/dokku/](http://dokku.viewdocs.io/dokku/)

### アプリを作成して環境変数を設定

```bash
$ dokku apps:create nuxt-dokku-app
```

サーバーでdokkuコマンドを叩いてアプリを作成しましょう。今回はアプリ名を「nuxt-dokku-app」にします。

```bash
$ dokku config:set nuxt-dokku-app NPM_CONFIG_PRODUCTION=false HOST=0.0.0.0 NODE_ENV=production
```

そしてNuxt.jsの公式ドキュメントの通りに環境変数を設定しましょう。（[Dokku へデプロイ - Nuxt.js](https://ja.nuxtjs.org/faq/dokku-deployment/)）

```bash
$ dokku config nuxt-dokku-app
=====> nuxt-dokku-app env vars
HOST:                   0.0.0.0
NODE_ENV:               production
NPM_CONFIG_PRODUCTION:  false
```

上記のconfigコマンドを叩いて環境変数が設定されてたら成功です。

### URLにアクセスしてDokkuの初期設定

<img width="654" alt="スクリーンショット 2018-04-22 16.39.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/21909/0ab040ed-3f02-1fb1-aced-bb3bc9bf2afa.png">

無事にDokkuがインストールされてサーバーのURLにアクセスすると上記のような画面が表示されます。

- Public Key: SSHの公開鍵
- Hostname: 使用するドメインを入力してください。（独自ドメインを使用する場合はUse virtualhost naming for appsにチェック）

入力したらFinish Setupを押下して終わり。

### Nuxt.jsプロジェクトを作成してapp.jsonを作成

```bash
$ vue init nuxt-community/starter-template nuxt-dokku-app
$ cd nuxt-dokku-app
$ yarn
```

vue-cliでNuxt.jsプロジェクトを作成してnodeモジュールをインストールしましょう。

```js:package.json
{
  // ~~~~~~
  "engines": {
    "node": "8.9.4",
    "npm": "5.8.0"
  }
}
```

package.jsonにnodeのver指定とnpmのver指定をしましょう。（適宜verは変更してください）指定しないとNuxt.jsに対応していない旧verのnode.jsがインストールされてしまうことがあります。

```js:app.json
{
  "scripts": {
    "dokku": {
      "predeploy": "npm run build"
    }
  }
}
```

Nuxt.jsをデプロイした際に```npm run build```を実行する必要があります。app.jsonというファイルをプロジェクトルート直下に作成して上記のような指定をしておくとDokkuがデプロイした時に```npm run build```を実行してくれます。

### デプロイする

```bash
$ git init
$ git add .
$ git commit -m "first deploy"
# abc.comは変更してください
$ git remote add dokku dokku@abc.com:nuxt-dokku-app
$ git push dokku master
```

### プロキシのポートを変更する

以下、サーバー側でコマンドを叩いてください。

```bash
$ dokku proxy:ports-set nuxt-dokku-app http:80:5000
```

プロキシのポートを変更します。自分はここでハマったのですが、httpやhttpsのportを指定して上げる必要があります。
上記はhttpのportが80の場合の例です。httpsならhttps:443:5000とかサーバーの設定に沿ったportにしてください。

```bash
$ dokku proxy:report nuxt-dokku-app
=====> nuxt-dokku-app proxy information
       Proxy enabled:                 true
       Proxy type:                    nginx
       Proxy port map:                http:80:5000
```

プロキシ確認コマンドを叩いて上記のように指定したportが設定されてたら成功です。

### URLにアクセスして確認

<img width="1680" alt="スクリーンショット 2018-04-22 16.54.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/21909/8596e6ca-17fe-1509-6a8c-1dadb0b96d49.png">

URLにアクセスして見慣れたスタート画面が表示されてたら成功です。

## ハマりどころ

上にも記述しましたが、Proxy port mapの設定がどこにも書いてなくてハマりました。あとEC2でAmazon Linuxの場合はapt-getが使えなくてDokkuのインストールエラーでめんどくさかったのでUbuntuでやりました。

以上です。