Cloudflare PagesでNuxt3のビルド時に「ENOENT: no such file or directory」エラーの対象方法

現象

Cloudflare Pagesで、Nuxt3のページをSSG（静的サイト生成）させると、以下のエラーが出てビルドができないケースがあります。

[error] ENOENT: no such file or directory, mkdir '/opt/buildhome/repo/dist'

解決方法: nuxt.config.tsで出力ディレクトリを指定する

本来は、nuxt3で「npx nuxi generate」をすると、.output/publicディレクトリに生成して、distディレクトリからシンボリックリンクを貼るのですが、これがうまくいってないようです。

そこで、Nuxt3が採用しているNitroの出力先設定機能を使って、出力先を指定してあげると先ほどの「no such file or directory」が出なくなります。

# nuxt.config.ts

import { resolve } from 'path'

export default defineNuxtConfig({
  runtimeConfig: {
    nitro: {
      output: {
        publicDir: resolve(__dirname, '.output')
      }
    }
  }
}

なお、Cloudflare Pagesの設定の「設定 > ビルド & デプロイ > ビルド構成」のビルド出力ディレクトリを、nuxt.config.tsで指定したディレクトリに設定し直す必要があります。

余談

「ENOENT: no such file or directory」エラーの原因は、Cloudflare Pagesがフレームワークを自動で判定して内部的に処理を入れているのが原因のようです。

例えば、Nuxt3プロジェクトの場合、ビルドのタイミングによってはビルド出力ディレクトリを「dist」のままでもうまくいくこともあれば、ビルド出力ディレクトリを「.output/public」にしないとダメな時もあり、この辺りは挙動が不明です。

ちなみに、Nuxt3以外のフレームワークで同じ状況になったら、フレームワークの静的サイトの出力先ディレクトリを変えてみると、うまくいくかもしれません。