LoginSignup
94

More than 1 year has passed since last update.

posted at

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

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
94