nuxt.config.jsに、dotenvの環境変数を反映させる

.envファイルに設定した環境変数をnuxt.config.jsでも反映される方法。firebaseなどのプラグインを設定するときに、便利。

動作環境

.env.* ファイル

各環境毎の.envファイルをつくる。

your-app
|-- .env.development 開発サーバ用
|-- .env.local       ローカル開発用
|-- .env.production  本番サーバ用
`-- package.json

例えば、次の様な環境変数を設定する

FIREBASE_API_KEY="*****************"
FIREBASE_AUTH_DOMAIN="*****************.firebaseapp.com"
FIREBASE_PROJECT_ID="*****************"
FIREBASE_STORAGE_BUCKET="*****************.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="*****************"
FIREBASE_APP_ID="*****************"
FIREBASE_MEASUREMENT_ID="*****************"

nuxt.config.js

nuxt.config.js内で、.env.*ファイルで設定した環境変数を読み込むには、以下の設定を冒頭の2行に加える。

// ...
const envPath = `.env.${process.env.NODE_ENV || 'local'}`
const envSet = require('dotenv').config({ path: envPath })

// ...

export default defineNuxtConfig({

//..

})

nuxt.config.js内から、次の様な形で環境変数を読み込める。

//..

export default defineNuxtConfig({

//..

  firebase: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID
    },
    services: {
      auth: true,
      firestore: true,
    },
  },

//..

package.json

dotenvとcross-envを組み合わせて、以下の様なスクリプトを組む

// ..

    "generate:prod": "cross-env NODE_ENV='production' nuxt generate",
    "generate:dev": "cross-env NODE_ENV='development' nuxt generate",

// ..

NODE_ENVの引数で、開発環境を指定する