Dev Day

Nuxt.js dotenv로 환경 변수 사용하기

Nuxt.js로 개발을 진행하다 보면 production과 development로 분리하고 싶을 때가 있습니다. 물론 환경 분리는 분리하고 싶을 때 분리하는 게 아닌 저는 필수라고 생각합니다.

환경변수들을 개발용 실제 운영용으로 분리하는 것은 개발자체도 용이하게 해 줄뿐더러 보안상에도 좋습니다.

재사용하는 정보들이나 공개되어서는 안될 정보들(DB URL, 각종 Key 값 등)을 편하게 관리할 수 있습니다.

만약 백엔드와 통신을 하는데 하드코딩으로 API EndPoint를 노출한다던지, 중요한 키값을 노출하게 된다면 제 정보 좀 가져가 주세요~라고 하는 것과 같습니다.

.env 파일이란?

.env파일이나 dotenv파일은 응용 프로그램 환경 변수를 제어하는 간단한 텍스트 구성 파일입니다.

애플리케이션에는 각 환경 사이에 일부 변수를 변경해야 하는 경우가 있습니다.

환경 간의 일반적인 구성 변경에는 URL 및 API 키가 포함될 수 있지만 이것만이 .env파일을 구성한다고는 볼 수 없습니다.

.env파일은 변수명=값의 형태로 되어 있습니다.

변수명은 대문자로 사용합니다. 각 문자 사이에는 underscore( _ )를 통해 구분하게 됩니다.

VARIABLE_NAME = 값

 

Nuxt.js에서 .env 사용하기

출처 : https://modules.nuxtjs.org/

Nuxt.js 환경에서 .env를 사용하여 개발환경을 분리하는 것은 간단합니다.

이미 dotenv모듈을 제공하고 있기 때문에 npm을 통해 설치해줍니다.

$ npm install @nuxtjs/dotenv

dotenv 모듈 등록

모듈 설치 후 nuxt.config.js 파일에서 buildModules에 설치한 dotenv 모듈을 등록해야 합니다.

// nuxt.config.js

buildModules: [
    '@nuxtjs/dotenv'
  ],

 

.env 파일 생성

위 순서대로 모듈을 등록하셨다면 이제 .env 파일을 사용할 수 있습니다.

저는 프로젝트 최상위 경로에 .env 파일을 만들었습니다.

.env 변수에 접근하기

성공적으로 dotenv 모듈을 설치하고 nuxt.config.js 파일에 등록 및 .env 파일 작성을 완료했다면 .env 변수에 접근이 가능합니다.

테스트이므로 간단히 mounted()에서 콘솔로 .env의 변수 값을 찍어보도록 하겠습니다.

// pages/index.vue

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(process.env.TEST_VARIABLE)
  }
}
</script>

<style scoped>

</style>

아까 변수에 담았던 Hello가 찍히는 것을 확인할 수 있습니다.

 

키와 값이 있는 객체에 접근하기

변수=값 구조가 아닌 변수 = 객체의 경우를 알아보겠습니다.

만약 구글에서 여러 개의 키를 받았다고 가정한다면 google이라는 객체 안에 담아둘 가능성이 크기 때문에 알아두는 게 신상에 이롭다고 생각했습니다.

이러한 경우 process.env로 접근하는 방식 말고 env.js라는 파일을 만들어서 사용이 가능합니다.

루트 디렉토리에 .env 파일과 env.js 파일을 생성하여 아래와 같이 작성합니다.

// .env

GOOGLE_API1 = 1234asdf
GOOGLE_API2 = 5678qwer

// env.js

export default {
  google: {
    googleApiKey1 : process.env.GOOGLE_API1,
    googleApiKey2 : process.env.GOOGLE_API2
  }
}

다시 index.vue 파일을 아래와 같이 수정합니다.

// pages/index.vue

<template>
  <div>

  </div>
</template>

<script>
import ENV from '@/env'

export default {
  mounted() {
    console.log(ENV.google.googleApiKey1)
    console.log(ENV.google.googleApiKey2)
  }
}
</script>

<style scoped>

</style>

 

다시 실행해보면 정상적으로 환경변수에 접근이 가능한 것을 확인할 수 있습니다.

 

환경변수 설정에 대해 공부하다 보니 중간에 문득 이런 생각이 들었습니다.

개발은 혼자 하는 게 아닌데 .env 파일을 git ignore 하게 된다면 다른 개발자들은 어떻게 해당 환경변수의 변수들을 알 수 있을까? 라는 생각을 했습니다.

찾아본 결과 미리 팀에서 안내를 한다던지, .env.example 이라는 파일을 생성하여 변수명은 설정하고 값은 빈 값으로 만들어서 어떤 변수가 필요한지 알 수 있게 하는 방법이 있었습니다.

저도 .env.example 파일을 만들어서 어떤 변수가 필요한지 알 수 있게 하는 방법이 가장 좋을 것 같다고 생각합니다.

 

혹시나 제 글에 잘못된 내용이 있다면 댓글로 남겨주시면 감사드리겠습니다.