Nuxt.jsの正しい環境変数の設定・利用方法

2021-01-13

Node.js では環境変数の設定・利用に dotenv モジュールが使われてきましたが，Nuxt.js では不要になりました．

環境変数の管理

環境変数は Git で管理したくない，公開すべきではないような情報を .env ファイルに保存し，ローカルで読み込む変数です．

.env

# 例
DB_HOST=localhost
DB_USER=root
DB_PASS=password

.gitignore に .env を入れ忘れずに．

通常の dotenv の使用方法

Intall

terminal

$ yarn add dotenv

Usage

require("dotenv").config();

const db = require("db");
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS,
});

参考：motdotla/dotenv - GitHub

Nuxt.js v2.12 以前

Intall

terminal

// v2.9 - v2.12
$ yarn add --dev @nuxtjs/dotenv

// previous than v2.9
$ yarn add @nuxtjs/dotenv

Usage

オプションなしの場合．

nuxt.config.js

// v2.9 - v2.12
export default {
  buildModules: ["@nuxtjs/dotenv"],
};

// previous than v2.9
export default {
  modules: ["@nuxtjs/dotenv"],
};

参考：nuxt-community/dotenv - GitHub

Nuxt.js v2.13 以降

Usage

ランタイム設定に組み込まれたため，モジュールはインストール不要になりました．

export default {
  // フロントエンドで公開されていいもの
  publicRuntimeConfig: {
    // DB_HOST が存在しなければ後者が当てられる
    dbHost: process.env.DB_HOST || 'https://example.com'
  },
  // 公開すべきでないもの
  privateRuntimeConfig: {
    dbUser: process.env.DB_USER,
    dbPass: process.env.DB_PASS
  }
};

ここで定義した変数は以下のディレクトリ内で呼び出すことができます．

pages
store
components
plugins

参考：Moving from @nuxtjs/dotenv to runtime config

mktia's note