Nuxtのビルドエラーをキャッチする方法

2019-09-23

Nuxt（やVueJs）のプロジェクトを、デプロイ用サーバーからコマンド1つで本番環境へアップする際、 コンパイルエラーのキャッチが必要である。

例えば以下のようなパターンが考えられる。

  1. dockerコンテナ内でnuxtのbuildを行う。
  2. `docker commit`でコンテナをイメージ化
  3. docker imageをKubernetesなどで使う。

Nodejsでbuildする場合

Nodejsでbuildする場合はそもそもエラーをcatchするコールバックが存在するので簡単である。

const {Nuxt, Builder} = require("nuxt");
let config = require("./nuxt.config.js");
config.dev = false; // production build
config.mode = 'universal';
let nuxt = new Nuxt(config)

new Builder(nuxt).build()
.then(() => {})
.catch(() => {
	// エラーで以降の処理を停止させる
});

Nuxtが用意しているbuildAPIを利用すればcatchできる。

shellでbuildする場合

おそらく多くの場合、deploy用のshellを用意すると思う。

ciツールから利用する場合や、単にlinuxのシェルコマンドから実行する場合など。
nuxtのビルドは以下のコマンドで実行する。

npm run build
or
nuxt build

このコマンドからのエラー標準出力をキャッチして「Error」文字列が含まれているかなどでコンパイルエラーをキャッチしてもいいが、 以下のようにコマンドの終了コードで判定したほうが簡単で良いと思った。

#!/bin/bash
npm run build
if [ $? != 0 ] ; then
  echo -e "\033[0;31mビルドエラー！\033[0;39m"
  exit 1
fi

おそらくほとんどのコンパイルコマンドは終了コードを出力するはずなので、他のフレームワークでも終了コードが1でエラーとか0以外でエラーとかで分岐すると良いと思われる。
それにしても文字を赤くするだけなのに、shellでは「\033[0;31m」？とかいう呪文を書くのが慣れない。

JavaScript, NuxtJavaScript, Nuxt, TypeScript