💥

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

2022/10/17に公開約2,100字

※注意

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

イントロ

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

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

軽い順に説明します。

1. CLIの変更

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

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

2. NITRO_PRESETの指定方法の変更

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

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

3. Runtime Configのインターフェース変更

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

https://v3.nuxtjs.org/guide/features/runtime-config/#exposing-runtime-config

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

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

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

4. Runtime Configへの環境変数の渡し方の変更

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

https://v3.nuxtjs.org/guide/features/runtime-config/#exposing-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させていただき、いい経験になりました。

https://github.com/nuxt/framework/pull/5569

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

Discussion

ログインするとコメントできます