[nuxt.js] nuxt dotenv(.env)

nuxt.js 를 사용하여 프로젝트를 진행하면서,
환경정보를 개발용(development) / 상용(production) 으로 분리를 하고 싶었다.

nuxt.config.js 에서 env 속성을 이용하여, 클라이언트측에서 사용할 환경변수들을 정의가 가능하다.

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

그러면, process.env 는 어떻게 불러오는가?

기본적으로, root directory 에 .env 를 불러오게 이미 설정이 되어있다.

그러면 루트 디렉토리에서 .env.development 같이 분리해서 불러올려면 어떻게 해야할까?
방법이 없어서, 수정해서 PR을 남겨보기로 하였다.

https://github.com/nuxt/nuxt.js/pull/9000/commits/16ac4cf0969a4d0187c616ab6fd4bea09152bb14#diff-cba57dce8689b0b15bac4cd779357605a9c6ce76da7d424eedf8c4eb385b75d8

pi0 님이 친절하게 코멘트를 남겨주었다. --dotenv 인자를 활용하면 된다는 내용과 현재 버전에서는 저렇게 동작하는걸 의도했고 이유는 해당 링크를 참고하라고 하였다.

아무래도 .env.development 이런식으로 사용하는거는 안티패턴이라서 그런걸로 알고 있다. 각 환경에 맞게 .env 들이 존재하고 이것들은 보안상 이유로 당연히 저장소를 통해서 관리하지 않는다.

@nuxtjs/dotenv 모듈을 사용해도 nuxt.config.js 가 실행되는 단계에서는 .env 가 오버라이딩이 안되는 문제는 여전하다.
그래서 nuxt.config.js 에서 env 속성에 정의를 할 수가 없다.

그런데 실제 실행단계에서 위 모듈을 쓰는 경우, 컴포넌트내 코드에서 속성을 불러와 사용이 가능하다.(이거는 삽질을 하면서 알게된건데 혼란스러우니 굳이 이렇게 사용하는건 피해야할거 같다)