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をデプロイする手順
まずインスタンスを用意しましょう
今回はGCEでやってみます。GCEのVMインスタンスを作成してください。microでもいけるんですが、たまにメモリ不足でbuildが落ちてたりするのでsmall以上をオススメします。「HTTP トラフィックを許可する」「HTTPS トラフィックを許可する（場合によっては）」にもチェックするのをお忘れなく。
SSHでログインしてDokkuをインストール
SSH認証鍵の設定をしてターミナルでログインしてください。
$ 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サイトで確認下さい。
http://dokku.viewdocs.io/dokku/
アプリを作成して環境変数を設定
$ dokku apps:create nuxt-dokku-app
サーバーでdokkuコマンドを叩いてアプリを作成しましょう。今回はアプリ名を「nuxt-dokku-app」にします。
$ dokku config:set nuxt-dokku-app NPM_CONFIG_PRODUCTION=false HOST=0.0.0.0 NODE_ENV=production
そしてNuxt.jsの公式ドキュメントの通りに環境変数を設定しましょう。（Dokku へデプロイ - Nuxt.js）
$ 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の初期設定
無事にDokkuがインストールされてサーバーのURLにアクセスすると上記のような画面が表示されます。
- Public Key: SSHの公開鍵
- Hostname: 使用するドメインを入力してください。（独自ドメインを使用する場合はUse virtualhost naming for appsにチェック）
入力したらFinish Setupを押下して終わり。
Nuxt.jsプロジェクトを作成してapp.jsonを作成
$ vue init nuxt-community/starter-template nuxt-dokku-app
$ cd nuxt-dokku-app
$ yarn
vue-cliでNuxt.jsプロジェクトを作成してnodeモジュールをインストールしましょう。
{
// ~~~~~~
"engines": {
"node": "8.9.4",
"npm": "5.8.0"
}
}
package.jsonにnodeのver指定とnpmのver指定をしましょう。（適宜verは変更してください）指定しないとNuxt.jsに対応していない旧verのnode.jsがインストールされてしまうことがあります。
{
"scripts": {
"dokku": {
"predeploy": "npm run build"
}
}
}
Nuxt.jsをデプロイした際にnpm run buildを実行する必要があります。app.jsonというファイルをプロジェクトルート直下に作成して上記のような指定をしておくとDokkuがデプロイした時にnpm run buildを実行してくれます。
デプロイする
$ 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
プロキシのポートを変更する
以下、サーバー側でコマンドを叩いてください。
$ dokku proxy:ports-set nuxt-dokku-app http:80:5000
プロキシのポートを変更します。自分はここでハマったのですが、httpやhttpsのportを指定して上げる必要があります。
上記はhttpのportが80の場合の例です。httpsならhttps:443:5000とかサーバーの設定に沿ったportにしてください。
$ 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にアクセスして確認
URLにアクセスして見慣れたスタート画面が表示されてたら成功です。
ハマりどころ
上にも記述しましたが、Proxy port mapの設定がどこにも書いてなくてハマりました。あとEC2でAmazon Linuxの場合はapt-getが使えなくてDokkuのインストールエラーでめんどくさかったのでUbuntuでやりました。
以上です。