Nuxt.jsで.envファイルを使う方法

2021年5月12日Vue.js

Nuxt.jsで.envファイルを使う方法です。

Nuxt.jsで.envファイルを使う方法

dotenvをインストール

まずはdotenvをインストールします。

npm install @nuxtjs/dotenv

.envファイルを作成

.envファイルを.gitignoreで排除されるように設定しますが、すでに設定されていると思うので確認します。

NODE_ENV='local'
VUE_APP_API_KEY="apiキー"
VUE_APP_AUTH_DOMAIN="認証ドメイン"
VUE_APP_PROJECT_ID="プロジェクトID"
VUE_APP_STORAGE_BUCKET="ストレージバケット"
VUE_APP_MESSAGING_SENDER_ID="センダーID"
VUE_APP_ID="APPのID"

firebaseの場合、apiキーなどの内容はfirebaseの構成からコピペします。

nuxt.config.jsの設定

require('dotenv').config();
...
modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: process.env.VUE_APP_API_KEY,
          authDomain: process.env.VUE_APP_AUTH_DOMAIN,
          projectId: process.env.VUE_APP_PROJECT_ID,
          storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
          messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
          appId: process.env.VUE_APP_ID
        },
        services: {
          auth: {
            persistence: 'local', // default
            initialize: {
              onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION',
              onAuthStateChangedAction: 'onAuthStateChangedAction',
              subscribeManually: false
            },
            ssr: false, // default
          },
          firestore: true,
          storage: true
        }
      }
    ]
  ],

まずrequireの一文を入れることでprocess.env.を経由して.envファイルで設定した値を受け取ることができます。
そのため、process.env.というプリフィックスが必要になります。