💥

Nuxt3 Betaからのアップデートでハマったポイント4点

2022/10/17に公開

※注意

この記事は、Magicodeから移転したアーカイブです。
2022年6月あたりの記事となり、2022年10月時点で既に4ヶ月経っていますので、ご認識おきください。

先日、1月頃にインストールしたNuxtのベータ版をRC版にアップデートしました。
その際、いくつかの破壊的変更でハマりました。

知っていればそんなに重たくなかったので、シェアします。

軽い順に説明します。

nuxi buildやnuxi devなどのコマンドが、nuxt buildやnuxt devといったコマンドに変更となった。

これはドキュメントが見つかりませんでした。
アップデート後にビルドコマンドが落ちるようになってしまい、最終的には空のnuxtプロジェクトを作り直して吐き出されるpacakge.jsonを見て、コマンド変更に気づきました。

NITROのプリセット名に見直しが入った。
例えば、AWS Lambda向けにビルドするときのプリセット名が、lambdaからaws-lambdaに変更になった。

1月時点より、NITROが提供してくれるプリセット数が大量に増えた。その際に、併せて修正された模様。

Runtime Configの指定方法、取得方法が変わった。

指定方法について、publicRuntimeConfigやprivateRuntimeConfigではなく、runtimeConfig配下にまとめて記載する形となった。パブリックな設定はruntimeConfig.public配下に指定する。

取得方法についても、パブリックな設定はruntimeConfig.publicから取得する形となった。

後者はコードベース全体の変更になりうるので、少し重たいかもしれません。

Runtime Configへの環境変数の渡し方が変わった。

前はprocess.envを直接渡していたが、Nuxtが決まった命名規則で環境変数を読み込み、Runtime Configを上書きする仕様に変わった。

上記のような実装で、環境変数経由でRuntime Configに直接値を渡すことができる。
パブリックでない設定は、PUBLIC_を抜くことで渡すことができる。

NUXT_PUBLIC_ENVIRONMENT=prod

また、開発環境（nuxt devコマンド）のみ、.envファイルから値を読んでくれる仕様がある。

注意点：process.envを渡そうとしても、本番環境では機能しない。開発環境では動いてしまうので要注意

こちらはソースコードの他に、本番環境の環境変数の指定方法も修正する必要がありますので、最も重たい変更かと思います。

個人的には、最後の問題が一番ハマってしまいました。ドキュメント更新が遅れていて、process.env渡しで動くと書いてあったためです。

しかも、開発環境（vite）では動くので、デプロイ先であるAWSやIaCも疑うことになり、余計に時間がかかりました。

nitroが吐き出すコードを読んだり紆余曲折ありつつ、最終的にはドキュメント修正にcontributeさせていただき、いい経験になりました。

今回は破壊的変更のリストやCHANGELOGが見つからなかったため、ハマりながら解決していきました。
もし変更の追跡方法を見つけた方がいらっしゃいましたら、シェアいただきたいです。