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 이후 GiitHub 등에 공개하지 않음) 등은 그대로 두고 사용법이 바뀌었을 뿐이다.