フリーランチ食べたい

機械学習/データ解析/フロントエンド/バックエンド/インフラ

Nuxtのbuild部分でCircleCIでコケたときに確認すること

NuxtのbuildがローカルのMacでは通るのにCircleCIで失敗する問題で詰まったので、同じ問題にぶつかった方向けにまとめておきます。

自分の場合は、問題は2つありました。

  • CircleCIでNuxtのbuildのエラーログが出力されない
  • APFS(Macでデフォルトで採用されているファイルシステム)はファイル名の大文字と小文字を判別しない

CircleCIでNuxtのbuildのエラーログが出力されない

最初のエラーはbuildのエラーではなく、次のように「build後にdistディレクトリが存在しない」というものでした。

yarn build
yarn run v1.17.3
$ nuxt build && rm -rf functions/dist/* && cp -r dist functions/
cp: cannot stat 'dist': No such file or directory

結果から言うと、「CircleCI上ではエラーログを含むbuildに関するログが出力されない」ことが原因です。ドキュメントにも記載されています。

ja.nuxtjs.org

# quiet
ビルド出力ログの大半を抑制します

- 型: Boolean
- デフォルト: std-env によって CI または test 環境で検出された際に有効になります

次のようにnuxt.config.jsでbuild.quietfalseと明示的に指定すればログが表示されるようになります。

nuxt.config.js

module.exports = {
  build: {
    quiet: false
  }
}

APFSはファイル名の大文字と小文字を判別しない

さてログが出力されるようになってログを見てみると下記のように「あるComponentを見つけられないエラー」が出ていました。

ERROR in ./components/xxxxxxxxx.vue?vue&type=script&lang=js&...
Module not found: Error: Can't resolve '@/components/xxxxx/yyyyyy' 

これはローカルのMacではどうしても出現せず、途方にくれていました。 結論はimportしているComponents名に大文字/小文字のTypoがあったがAPFSだと大文字/小文字を考慮しないのでbuildできていた」のが原因でした。APFSは現在、Macのデフォルトで採用されているファイルシステムです。詳しくは下のクラスメソッドさんのブログをご参照ください。

dev.classmethod.jp

CircleCIでは基本的にLinuxのイメージを使うと思うので(今回も使っていました)、この問題にぶつかりました。

Typoを直し、無事CircleCI上でbuildすることができました💪

さいごに

CircleCIでは、「CI環境による動作の違い」と「OS環境による動作の違い」に注意が必要です。