Vuejs 에서 환경 변수 설정 방법

Vue.js 프로젝트에서는 환경 변수를 사용하여 개발, 테스트, 프로덕션 환경에 따라 설정을 다르게 할 수 있습니다.

Vue CLI를 사용하면 이러한 환경 변수를 쉽게 설정하고 관리할 수 있습니다.

아래에 환경 변수를 설정하고 사용하는 방법을 단계별로 정리하겠습니다.

 

1. 환경 변수 파일 설정

 

Vue CLI를 사용하면 .env 파일을 통해 환경 변수를 설정할 수 있습니다.

Vue CLI는 프로젝트 루트 디렉토리에 위치한 .env 파일을 자동으로 로드합니다.

 

환경 변수 파일 종류

 

• .env: 모든 환경에 적용되는 기본 환경 변수.

• .env.local: 모든 환경에 적용되지만, 버전 관리를 하지 않는 로컬 환경 변수.

• .env.development: 개발 환경에 적용되는 환경 변수.

• .env.development.local: 개발 환경에 적용되지만, 버전 관리를 하지 않는 로컬 환경 변수.

• .env.production: 프로덕션 환경에 적용되는 환경 변수.

• .env.production.local: 프로덕션 환경에 적용되지만, 버전 관리를 하지 않는 로컬 환경 변수.

 

예시: 환경 변수 파일 생성

 

프로젝트 루트에 .env.development와 .env.production 파일을 생성합니다.

 

.env.development

VUE_APP_API_URL=http://localhost:3000
VUE_APP_DEBUG=true

.env.production

VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=false

2. 환경 변수 사용

 

Vue 애플리케이션에서 환경 변수를 사용하려면 process.env 객체를 통해 접근할 수 있습니다. Vue CLI는 VUE_APP_ 접두사가 붙은 환경 변수만을 인식하므로, 모든 환경 변수 이름은 VUE_APP_으로 시작해야 합니다.

 

예시: 환경 변수 사용

 

src/main.js 파일에서 환경 변수를 사용하는 방법을 설명합니다.

 

src/main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

console.log('API URL:', process.env.VUE_APP_API_URL);
console.log('Debug mode:', process.env.VUE_APP_DEBUG);

new Vue({
  render: h => h(App),
}).$mount('#app');

예시: 컴포넌트에서 환경 변수 사용

 

컴포넌트 내에서 환경 변수를 사용하는 방법도 동일합니다.

 

src/components/ExampleComponent.vue

<template>
  <div>
    <p>API URL: {{ apiUrl }}</p>
    <p>Debug Mode: {{ debugMode }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL,
      debugMode: process.env.VUE_APP_DEBUG
    };
  }
};
</script>

3. 환경 변수의 동작 확인

 

환경 변수 파일을 설정하고, 개발 또는 프로덕션 모드로 애플리케이션을 실행하여 환경 변수가 제대로 동작하는지 확인합니다.

 

개발 모드 실행

npm run serve

• npm run serve 명령어는 .env.development 파일의 환경 변수를 로드합니다.

 

프로덕션 모드 실행

npm run build

• npm run build 명령어는 .env.production 파일의 환경 변수를 로드합니다.

 

4. 환경 변수 파일 버전 관리

 

.env 파일과 .env.production 파일은 일반적으로 버전 관리 시스템에 포함됩니다.

그러나 로컬 환경 변수 파일(.env.local, .env.development.local, .env.production.local)은 버전 관리에서 제외하는 것이 좋습니다.

 

예시: .gitignore 파일 설정

.gitignore

# local env files
.env.local
.env.*.local

요약

 

1. 환경 변수 파일 설정: 프로젝트 루트에 .env 파일을 생성하여 환경 변수를 정의합니다. 환경에 따라 .env.development, .env.production 파일을 사용합니다.

2. 환경 변수 사용: process.env 객체를 통해 환경 변수에 접근합니다. 모든 환경 변수는 VUE_APP_ 접두사로 시작해야 합니다.

3. 환경 변수의 동작 확인: 개발 또는 프로덕션 모드로 애플리케이션을 실행하여 환경 변수가 올바르게 로드되는지 확인합니다.

4. 환경 변수 파일 버전 관리: .env.local, .env.development.local, .env.production.local 파일은 버전 관리에서 제외합니다.