[Vue.js] .env 파일로 환경 변수 관리하기

[.env 파일이란?]

environment의 약자인 .env 파일은 환경 변수를 정의할 때 사용합니다.

 

프로젝트의 root에 .env 파일을 생성하여 애플리케이션의 구성을 제어하거나, 각 서버 환경(ex. 개발 서버, 운영 서버)에 맞게 동작하는 부분을 처리하는 데 사용할 수 있는데요. 실제로 현재 프로젝트에서 .env 파일로 각 서버에 따라 다르게 동작하고 있습니다 😎

[어떻게 사용할까?]

Key = Value 형식으로 환경 변수를 정의할 수 있습니다.

VUE_APP_TITLE=My App
VUE_APP_API_URL=https://my-api-url.com

정의한 환경 변수를 접근하기 위해서는 process.env.${이름}의 형태를 사용하면 됩니다!

created() {
  console.log(process.env.VUE_APP_TITLE); // 'My App'
  console.log(process.env.VUE_APP_API_URL); // 'https://my-api-url.com'
}

 

진행 중인 프로젝트에서는 VITE라는 빌드 툴을 사용하고 있어서 접두사를 VUE 대신 VITE로 사용하면 됩니다.

VITE_API_URL=https://my-api-url.com

접근하려면 import.meta.env.${이름}의 형태로 사용하면 되고요!

const API_URL = import.meta.env.VITE_API_URL;

[왜 사용할까?]

물론,,, .env 파일을 사용하지 않아도 문제는 발생하지 않습니다. 그냥 상수로 정의할 수 있기는 하죠.

const API_URL = "https://my-api-url.com";

그럼에도 불구하고 사용하는 이유는... 각 화면에서 매번 정의하고 사용하는 게 귀찮기 때문입니다!

좀 고급진 말로 편의성과 유연성 측면에서 떨어지기 때문이에요.

 

예를 들어, 서버 주소가 변경되었을 때 .env 파일을 사용한다면 하나의 파일만 변경하면 되는 거죠!!

 

이러한 이유로 .env 파일을 생성하여 환경 변수를 관리하는 것을 추천한답니다 ✨