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

7717 ワード
nuxt.js Vue.js dokku dokku テキストリンク

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モジュールをインストールしましょう。

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

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

app.json
{
  "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 [email protected]: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でやりました。

以上です。