はじめに
フロントエンドでも実行環境に応じて設定値を変えたい場合があります。
例えば、よくあるのがAPIのオリジンです。
APIのオリジンを本番環境ではhttps://api.XXX.com、開発環境ではhttp://localhost:8080にしたい場合です。
Nuxt3では設定情報をpublic/privateで区別し、privateな設定はサーバーサイドでのみ参照可能となるセキュリティ面も配慮されています。
概要
.envに環境変数を定義して、nuxt.config.tsで読み込み、useRuntimeConfig()や$configで参照するイメージです。
手順
1. .envの設置
Nuxt3のプロジェクトルート直下に.envを設置します。
環境変数を定義する場合はNUXT_またはNITRO_のプレフィックスをつけてください。
NUXT_API_KEY=XXXX1234
NUXT_PUBLIC_API_URL=http://localhost:8080
2. runtimeConfig(環境変数の読み込み)設定
nuxt.config.tsにてruntimeConfigブロックを定義します。
export default defineNuxtConfig({
runtimeConfig: {
apiKey: '',
public: {
apiUrl: '',
}
},
});
privateとpublic
private：runtimeConfig直下に定義した場合は、サーバーサイドからのみ参照できます。
public：publicブロック内で定義した場合は、サーバーサイド、クライアントサイド双方から参照可能です。
.envとの関連(dotenvサポート)
.envでNUXT_API_KEYと定義している場合、runtimeConfig.apiKeyは上書きされます。
.envでNUXT_PUBLIC_API_URLと定義している場合、runtimeConfig.public.apiUrlは上書きされます。
ただし、dotenvサポートが有効なのはビルド時のみなのでご注意ください。
3. コンポーネント側で呼び出す
Nuxtが提供するuseRuntimeConfig Composableを利用して、Runtime Configを取得します。
Nuxt3のAuto Importの対象なのでimport文の記述は不要です。
const runtimeConfig = useRuntimeConfig();
console.log(runtimeConfig.apiKey); // 結果： XXXX1234
console.log(runtimeConfig.public.apiUrl); // 結果： http://localhost:8080
なお、publicに定義した設定についてはthis.$config.publicでも参照可能です。
さいごに
環境変数の定義を必要とする場面は多いと思います。
SSRができるNuxt3ならではの注意点もありますが、publicとprivateを上手く使い分けてもらえたらと思います。