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

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]]を追加して解決した。

参考


Related #nuxt.js

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

Nuxt.jsのserverMiddlewareがGAE上だとエラーになる

ディレクトリ位置の問題でserverMiddlewareが動かない現象が発生した

create nuxt-appで作成したアプリでTapable.plugin is deprecatedが出る場合の対処法

yarn add @nuxtjs/pwa@v3.0.0-beta.16でPWA Moduleを更新する

hard-source-webpack-plugin使用時に環境変数が切り替わらない問題に対処する

direnv利用時に環境変数を更新しても反映されなかったのでenvironmentHashに設定を追加した