【Nuxt3+Heroku】エラーログが出てない…！？Nuxtをバージョンアップしたら起動できなくなった話

プログラミング等

どうもこじらです。

本当は良くないんですが、久々にNuxt.jsのプロジェクトの依存関係を一気にバージョンアップさせました。

はい、本当は良くないです。

 

ちゃんと祟られました。

まずはどのバージョンからどのバージョンにしたか。

 

バージョン

ぱっと見、メインどころはそんなにバージョン上がってない（ように見えなくもない）ですね。

pinia-plugin-persistedstateは別のものになってます。ビルド時の警告の都合でtypescriptを依存関係に追加しました。

 

  • nuxt：^3.9.3->^3.15.0
  • pinia：^2.1.7->^3.0.2
  • vue：^3.4.21->^3.5.13
  • vite-plugin-vuetify：^1.0.2->^2.1.1
  • vuetify：^3.5.9->^3.8.3
  • @pinia-plugin-persistedstate/nuxt：^1.1.2(削除)
  • pinia-plugin-persistedstate：^4.2.0(追加)
  • typescript：^5.2.2(追加)

 

Node.jsとnpmのバージョンは変えていません。

  • node：22.15.0
  • npm：10.9.2

事象

上記バージョンアップをおこなって、ちゃんとローカル環境でnpm build -> npm startで確認した上でherokuでデプロイしました。

 

そしたら、ビルドは成功するんですが、npm startで起動ができず…。

以下、ログです。

2025-05-09T13:39:55.736863+00:00 app[web.1]: 
2025-05-09T13:39:55.736864+00:00 app[web.1]: > start
2025-05-09T13:39:55.736864+00:00 app[web.1]: > nuxt start
2025-05-09T13:39:56.975540+00:00 app[web.1]: npm http fetch GET 200 https://registry.npmjs.org/npm 118ms
2025-05-09T13:39:56.976324+00:00 app[web.1]: npm verbose cwd /app
2025-05-09T13:39:56.976405+00:00 app[web.1]: npm verbose os Linux 5.15.0-1077-aws
2025-05-09T13:39:56.976436+00:00 app[web.1]: npm verbose node v22.15.0
2025-05-09T13:39:56.976457+00:00 app[web.1]: npm verbose npm  v10.9.2
2025-05-09T13:39:56.976682+00:00 app[web.1]: npm notice
2025-05-09T13:39:56.976683+00:00 app[web.1]: npm notice New major version of npm available! 10.9.2 -> 11.3.0
2025-05-09T13:39:56.976684+00:00 app[web.1]: npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.3.0
2025-05-09T13:39:56.976685+00:00 app[web.1]: npm notice To update run: npm install -g npm@11.3.0
2025-05-09T13:39:56.976685+00:00 app[web.1]: npm notice
2025-05-09T13:39:56.976745+00:00 app[web.1]: npm verbose exit 0
2025-05-09T13:39:56.976772+00:00 app[web.1]: npm info ok
2025-05-09T13:39:57.032467+00:00 heroku[web.1]: Process exited with status 0
2025-05-09T13:39:57.050544+00:00 heroku[web.1]: State changed from starting to crashed
2025-05-09T13:43:20.728853+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/search" host=pokego.brainjuice.jp request_id=2c113bc6-d9f7-4f35-bea8-2d11cd357945 fwd="126.78.41.218" dyno= connect= service= status=503 bytes= protocol=https

 

「ふむふむ…。えーっと、エラー内容は…っと。……。」

 

 

エラー出てねぇじゃねぇか！！！

Process exited with status 0なので、正常に終了してそうにみえます。

ただ、State changed from starting to crashedなので問題が起こっているのは確か。

 

状況が分かるログを引き出せないか色々試しました。

  1. Procfile作成して起動コマンドを「web: npm start –verbose」にしたり
  2. 今度はProcfileを「web: NODE_DEBUG=module npm run start –loglevel verbose」してみたり
  3. NPM_CONFIG_LOGLEVEL=verboseにしたり
  4. NODE_VERBOSE=trueにしたり

して、デプロイしまくりまくりましたが、ログは何も教えてくれませんでした。

 

デプロイでメモリ足りなくなったのかな？

ポート指定間違えてるのかな？

環境変数が間違ってるのかな？

でもメトリクスみてもメモリ足りてるよなぁ、ポート明示的に指定しても変わらないなぁ、環境変数はちゃんとログに出してるしバージョンアップ前から何も変えてないしなぁ…。

と、試しては外し、試しては外しを繰り返していました。

 

解決策が見出せず、まじで地獄

 

原因

原因はnpm startに指定していたコマンドだったようでした。

あ、ちなみにですが、npm startはnpm run startのエイリアスなので完全イコールです。

 

npm startの指定を「nuxt start」から「node .output/server/index.mjs」に変えたところheroku環境でうまく起動できるようになりました。

 

原因に辿り着いたきっかけはChatGPTです。

Geminiとずっと話して解決せず、ChatGPTがまさかの一発回答。

 

nuxtとnitroのページをみたら、npm run startのコマンドを「node .output/server/index.mjs」で指定しろと書いてあります。

 

Heroku - Nitro
Deploy Nitro apps to Heroku.
nitro.build
Deploy Nuxt to Heroku
Deploy your Nuxt Application to Heroku infrastructure.
nuxt.com

 

というか、ビルド時のpostinstall(nuxt prepare)のタイミングのコマンドにも、一応書いてあるんですけどね。

 [nitro] ✔ You can preview this build using node .output/server/index.mjs

 

一応解決策はわかったんですが、

Nuxtのリリースノートを見てもそれっぽいのは見つからないし、ローカル環境ではnuxt startでも起動できるしで、いまいち腑に落ちていない部分はあります。

 

nuxt startでも設定次第では起動できるんじゃないかと色々試しましたが、まだ成功してません。

ChatGPTには「環境変数をNITRO_PRESET=’node’にするとnuxt startもいけるよ！」と言われたんですが、そういうわけでもないみたいで。

 

まぁ雑な検証を繰り返してるだけなので設定次第ではいけるのかもしれませんが、わざわざ公式が言ってるやり方以外のやり方で起動させるメリットはないので、調査はこの辺までとしておきます。

 

あ、バージョンアップで変更した箇所を少し紹介しておきます。

その他、バージョンアップで修正したソース

import.meta.server

process.serverからimport.meta.serverに変更しました。

SSRならよく書くやつ。

前から存在する書き方ですが、deprecatedになって、かつprocess.serverでの判定ができなくなってたので修正。

process.clientも同様。

utils外でpiniaを初期化

これまではutils内でpiniaの初期化を行なっていました。

 

↓イメージこんな感じです。

xxxUtils.ts

export default () => {
  const init = async () => {
    const res = await useAsyncData('mountains', () => $fetch('https://api.nuxtjs.dev/mountains'))
    
    useXxxStore().setXxx(res.data.xxx)
  }
  return {
    init
  }
}

 

サイトアクセス時、utils内でuseAsyncDataを呼び出し、APIから取得した値を定数としてクライアント側に保持しておくっていう仕組みです。

バージョンアップ前は問題ありませんでしたが、エラーが発生するようになりました。

 

多分見られたことあるエラーだと思いますが、「Nuxtの外でそれ呼ぶなや！」ってエラーです。

A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function

 

割とあるあるなエラーですが、サーバサイドで動いているのと、なぜかエラーが握りつぶされていてログに吐かれずエラーにたどり着くまでに少し苦戦しました。

utils内でAPIアクセスして、utils内でそのままstoreにセットしていましたが、utils内でAPIから取得した値を呼び元であるapp.vueに返却し、app.vueでstoreにセットする仕様に修正しました。

 

useNuxtApp().$piniaで取得した値をuseXxxStoreの引数に渡すやり方もうまくいきそうに見えますが、piniaとnuxtの初期化のタイミング的にうまくいきませんでした。

 

override

TypeScriptにoverrideという句が追加されました。

今頃かよ！というツッコミが入りそうですが、まぁ、はい。

 

classをextendsしてプロパティを再定義する場合、overrideが必須になったので修正しましょう。

可読性も上がります。

 

実際は他にも細かい警告の解消のために色々修正してますが、わざわざ私が記事かするほどのことでもないので、今回はこんな感じで。

 

こじらでした

じゃ

コメント

タイトルとURLをコピーしました