.env と runtimeConfig を用いた環境変数の利用方法【Nuxt3】
※ 環境
Nuxt 3.2.3
Node v18.11.0
Nuxt3 で環境変数を利用するには、
- ランタイム構成を使う
.env
ファイルを作成し、その中で定義する
の 2 パターンの方法があります。
今回は、それぞれの使い方・使い分けについて解説していきます。
最後の章にも記載していますが、個人的には
「環境ごとの.env.XXX
ファイルを用意し、設定する値は全てruntimeConfig
を置き換えるようにする(NUXT_
を接頭辞につける)」
方法がよいのではないかと考えています。
ランタイム構成を使う
runtimeConfig
をnuxt.config.ts
で定義することでランタイムの構成を使うことができます。
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
serverEnv: "serverValue",
public: {
clientEnv: "clientValue",
},
},
});
この際、public
プロパティの中で定義したものはクライアントサイド・サーバーサイド両方で使うことができ、その外の定義(上の例だと serverEnv)はサーバーサイドのみで使うことができます。
useRuntimeConfig
を介してアクセスすることができます。
// 環境変数を取得(クライアント)
const runtimeConfig = useRuntimeConfig();
// クライアント・サーバーサイドで利用できる
console.log(runtimeConfig.public.clientEnv);
// サーバーサイドのみで利用できる
console.log(runtimeConfig.serverEnv);
またuseRuntimeConfig
は
- Vue アプリケーション内
- プラグイン
- サーバールート(server ディレクトリで定義した API)
で利用することができるため、基本 Nuxt アプリケーション全体で呼び出せると考えてもいいでしょう。
.env ファイルを使う
Nuxt CLI には起動時・開発時にdotenv
が組み込みで入っています。そのため、ルート ディレクトリに.env
ファイルがあるとそれを読み込み、環境変数として利用することができます。
例えば、以下のような.env
ファイルを作成します。
.env
API_SECRET = "api secret";
process.env
を介して呼び出すことができます。
この時、サーバーサイドでしか環境変数は呼び出せないので注意が必要です。
console.log(process.env?.API_SECRET);
また、.env
ファイルにNUXT_
という接頭辞をつけると、ランタイム構成の環境変数を上書きすることができます。
以下のような構成を想定します。
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
secret: "hoge",
public: {
token: "fuga",
},
},
});
.env
NUXT_SECRET = "secret";
NUXT_PUBLIC_TOKEN = "token";
NUXT_
をつけることで、環境変数secret
、token
を上書きすることができます。
また、ここで注目して欲しいところが、オブジェクトの階層を_
で表現できるという点です。
ex. public > token → PUBLIC_TOKEN
const runtimeConfig = useRuntimeConfig();
// .envによるランタイム構成の上書き
// サーバーで'secret'と出力される
console.log(runtimeConfig.secret);
// ブラウザ・サーバーで'token'と出力される
console.log(runtimeConfig.public.token);
環境に応じて.env ファイルを使い分ける
.env.local
や.env.production
のようにローカル・プロダクション環境など、環境に応じて環境変数を切り替えたいケースは多々あると思います。
そのような時は、--dotenv
フラグを nuxt cli に渡すことで実現できます。
例を見てみましょう。
以下のようにローカル限定の環境変数を定義します。
.env.local
NUXT_SECRET = "local secret";
NUXT_PUBLIC_TOKEN = "local token";
次にpackage.json
で開発時に—-dotenv
フラグを使って.env.local
を渡すようにします。
package.json
"dev-local": "nuxt dev --dotenv .env.local",
すると、.env.local
の値が優先されるので、値が書き変わります。
const runtimeConfig = useRuntimeConfig();
// .envによるランタイム構成の上書き
// サーバーで'local secret'と出力される
console.log(runtimeConfig.secret);
// ブラウザ・サーバーで'local token'と出力される
console.log(runtimeConfig.public.token);
runtimeConfig VS .env
最後にruntimeConfig
と.env
による環境変数設定の使い分けについて考えます。
ユースケース | 使い分け |
---|---|
process.env 経由でアクセスしたい(Server side only) | .env |
型付された環境変数を使いたい | runtimeConfig |
クライアントサイドで環境変数を使いたい | runtimeConfig |
環境によって環境変数を書き換えたい | 環境ごとの.env ファイルを用意 |
個人的には、冒頭で言及したように
「環境ごとの.env.XXX
ファイルを用意し、設定する値は全てruntimeConfig
を置き換えるようにする(NUXT_
を接頭辞につける)」方法がおすすめです。
これだと型が自動でつく & 環境ごとに柔軟に環境変数を切り替えれる & クライアントサイドからも環境変数にアクセスできるという恩恵が得られるためです。
よければ Nuxt3 アプリケーション構成の参考にしてみてください!