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

はじめに

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

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

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

実際にやってみる

1. 環境変数をRuntimeConfigに定義

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

.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等に公開しない）などは変わらず、使い方が変わっただけ。