NuxtアプリにCloud Functionsを追加したらビルドエラーが発生

先日の記事にてNuxtアプリをGAEにデプロイできるようになったが、いくつか機能追加をしたところ再び500エラーが表示されるようになってしまった。

ログを確認すると以下が表示されていた。

[[Nuxt Fatal Error Error: No build files found in /srv/.nuxt/dist/server.]]

CircleCIでのデプロイ自体は成功になっており、原因がよく分からずハマってしまった。

結論から書いておくと、Cloud Functionsを追加したのが原因だった。

ディレクトリ構造としては以下のようにNuxtアプリのコードはsrcに移動したが、rootDirはデフォルトのままにしているため、Nuxtアプリのビルド時にfunctions内も対象に含まれてしまいエラーになっていた。

tree -L 1
.
├── functions # CloudFunctionsのコード
├── src # Nuxtアプリのコード
├── node_modules # Nuxtアプリのnode_modules
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── yarn.lock

今回typescriptで開発していたので、tsconfig.jsonのexcludeでfunctionsを除外することでビルドできるようになった。

// tsconfig.json
 {
   "compilerOptions": {},
   "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "functions"
  ]
}

なぜハマったか？

1. CIでビルド失敗が検知できない

CircleCI上ではビルド成功になっていたが、実際はビルドでエラーになっていたため原因特定に時間がかかった。

Nuxtのデフォルト設定ではCIの場合にビルドログが抑制されるようになっており、ビルド失敗が検知できない。

[[nuxt.config.ts]]のbuildオプションに[[quiet: false]]を設定してビルドログを表示するように設定した。

// nuxt.config.ts
 {
   build: {
    quiet: false
    extend(config, { isClient, isDev }) {}
  }
}

これはまたハマりそうなので、Nuxtアプリを作る際は最初に設定しておくようにしよう。

2. ignore設定がうまくいかない

ビルドエラーが検知できるようになったことで、NuxtアプリがCloud Functionsのコードをビルド対象に含んでいるのが原因というところまで分かった。

ERROR in /root/app/functions/src/functions/firestore.ts
Cannot find module 'firebase-functions'.

そこで、functions以下をビルド対象から外すために.nuxtignoreにfunctionsを追加したが変化なし。

nuxt.configのignoreプロパティも同様。

ドキュメントを確認するとlayout, page, store, middlewareのみがignore対象になるとのこと。

.nuxtignore ファイルを使用することで、ビルド時にプロジェクトルート (rootDir) にある layout, page, store そして middleware のファイルを Nuxt.js に無視させることが出来ます。

API: ignore プロパティ - Nuxt.js

ここまで来て、今回typescriptで開発しているのでtsconfig.jsonに設定を書く必要があることに気づく。

tsconfig.jsonのドキュメントにexcludeの設定項目があったので[[functions]]を追加して解決した。

参考

• Nuxt.jsをCircleCIでビルドしたけど、distが作成されないときにやったこと(build.quiet: falseを設定する) - くらげになりたい。