[Vue] dotenv( .env ) 사용하기

.env

보안상 코드에 직접 하드코딩 하면 안되는 private key나 전역으로 사용할 환경설정 등을 설정하는 파일이다.

설치

기본적인 노드 환경에서는 dotenv패키지를 설치해야 한다.

npm i dotenv

내가 쓰는 vue cli에서는 dotenv가 깔려있기 때문에 설치 없이 바로 사용할 수 있다.

파일 생성

프로젝트의 root에 .env파일을 생성한다.

 

파일명

파일 명은 아래와 같은 세가지 규칙이 있다.

1. .env
2. .env.[mode]
3. .env.[mode].local

이때 mode는 development모드, production모드 , text.모드 등이 있다.

개발시와, 배포시의 환경설정이 다르기 때문에 이렇게 나뉘어져 있다.

모드에 따라서 다른 .env파일을 로드한다.

로드하는 파일

.env는 모든 환경에서 적용된다.

.env.[mode]는 해당 모드일때 적용된다. 예를 들어서 .env.development는 development모드일 때 적용된다.

.env.[mode].local은 해당 모드일 때 적용되고, gitignore된다. 로컬에서만 사용하고 싶을 때 쓴다.

내용

.env안에는 key, value만 들어간다. 자세한 문법은 document를 참고하자.

FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar

 

프론트 코드에서 가져다 쓰기

아래와 같이 가져올 수 있다.

console.log(process.env.VUE_APP_NOT_SECRET_CODE)

dotenv에 대한 기본적인 내용이었다.

 

VueCli에서 dotenv를 쓰고 싶다면 아래의 document에 자세히 나와있다.

https://cli.vuejs.org/guide/mode-and-env.html

Modes and Environment Variables | Vue CLI