Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
54
Help us understand the problem. What are the problem?
@taai

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等に公開しない)などは変わらず、使い方が変わっただけ。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
54
Help us understand the problem. What are the problem?