개발환경은 간단하게 로컬(local) , 개발(dev) , 운영(prod)으로 나눌 수 있다. 만일 개발환경에서 사용하는 특정 URL주소와 운영환경에서 사용하는 URL주소를 각각 설정하고 싶다면?🤔 이를 위해 사용되는 것이 .env(환경변수파일)이다.
.env 환경변수 파일
환경 변수 파일이란 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미한다.
쉽게말해 .env파일에 사용할 특정 값에 대한 변수를 선언하여 각 환경에 맞게 사용될 수 있도록 설정 하는것
//.env 파일
VUE_APP_SERVER_URI=http://localhost:8080/
VUE_APP_PROD_SERVER=http://velogenv.com:9090/
환경변수 설정
Vue CLI 3.x 버전 이상부터는 DefinePlugin을 사용하지 않고도 쉽게 사용이 가능한 장점이 있다. https://webpack.kr/plugins/define-plugin/
환경변수 설정 시 변수명
변수명 앞에는 항상 VUE_APP_ 을 붙여 사용해야만 한다. 그래야만 VUE CLI에서 DefinePlugin을 자동적으로 사용해주는 역활을 수행할 수 있다.
VUE_APP_ 외에도 사용할 수 있는 변수들도 있다.
NODE_ENV ▶️ 애플리케이션이 실행되는 모드를 가리키는 변수 development, production, test
BASE_URL ▶️ vue.config.js 파일에 정의된 publicPath(기본경로)를 의미하는 변수
환경변수 확인
console.log(process.env)을 사용하여 network환경에서 현재 사용중인 환경변수값도 확인 해 볼 수가 있다.
환경변수 사용방법
//.env 파일
VUE_APP_API_URL= http://localhost:3000/ //index.js에서 사용될 baseURL 선언//api index.js 파일
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL, // process.env로 접근하여 변수 사용
});
function registerUser(userData) {
return instance.post('signup', userData); // axios사용시 정의된 baseURL사용
}
export { registerUser };