dotenvはもう古い!最新Nuxtの環境変数管理方法

2021/01/06に公開3

はじめに

Nuxtで環境変数管理でdotenvのインストール方法どうだたっけと思い調べているとMoving from @nuxtjs/dotenv to runtime configという記事に出会いました。

要約すると、Nuxtv2.13以降なら、@nuxtjs/dotenvからruntimeConfigに移行しようということ。

dotenvをわざわざあとからインストールしなくてもNuxtの標準機能で使えるのは嬉しい。

実際にやってみる

1. 環境変数をRuntimeConfigに定義

使い方は簡単。
これまで通り、.envファイルを作成し、nuxt.config.jspublicRuntimeConfigprivateRuntimeConfigを定義するだけ。

.env
BASE_URL=http://localhost:8000
API_URL=http://localhost:8888
SECRET_KEY=test
nuxt.config.js
export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'http://locahost:3000',
    apiURL: process.env.API_URL || 'http://localhost:3333',
  },
  privateRuntimeConfig: {
    secret: process.env.SECRET_KEY,
  }
}

2. 環境変数を使う

  • $configのグローバルに定義されます。なのでどこからでも呼び出し可能。
plugins/axios.js
export default function ({ $config }) {
 consle.log($config.baseURL)
}

runtimeConfigの種類

  • publicRuntimeConfigとprivateRuntimeConfigが定義できます。
  • privateとpublicという言葉どおりではありますが、publicは、フロントエンド公開しても良い変数。privateはフロントエンドに公開してはいけないものという使い分けになります。
  • 上記の使い分けからspaモードの場合、privateRuntimeConfigは使用できません。

まとめ

  • dotenvは使わない、runtimeConfigに移行する
  • .envファイルや環境変数の管理方針(.gitignoreしてGitHub等に公開しない)などは変わらず、使い方が変わっただけ。

Discussion

TETSUTETSU

記事ありがとうございました!大変参考になりました。ちなみに今まで通り .env.staging, .env.production など、環境ごとに別々のenvファイルを用意して yarn generate のときに使い分ける方法とかご存知だったりしますでしょうか?

tai-hataketai-hatake
yarn generate --dotenv .env.staging
yarn generate --dotenv .env.production

とかで呼び分けられます。