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

1 min読了の目安(約1300字TECH技術記事 2

はじめに

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

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

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

実際にやってみる

1. 環境変数をRuntimeConfigに定義

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

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