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に関するログが出力されない」ことが原因です。ドキュメントにも記載されています。
# quiet ビルド出力ログの大半を抑制します - 型: Boolean - デフォルト: std-env によって CI または test 環境で検出された際に有効になります
次のようにnuxt.config.jsでbuild.quiet
をfalse
と明示的に指定すればログが表示されるようになります。
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のデフォルトで採用されているファイルシステムです。詳しくは下のクラスメソッドさんのブログをご参照ください。
CircleCIでは基本的にLinuxのイメージを使うと思うので(今回も使っていました)、この問題にぶつかりました。
Typoを直し、無事CircleCI上でbuildすることができました💪
さいごに
CircleCIでは、「CI環境による動作の違い」と「OS環境による動作の違い」に注意が必要です。