[개발환경] .env 분리 사용

---

개발환경 설정과 관련된 설정을 기록하는 포스트 입니다.

---

.env 분리를 통한 상수 분리

---

import axios from 'axios';

const instance = axios.create({
	baseURL: process.env.VUE_APP_API_URL,
});

function registUser(userData) {
	return instance.post('signup', userData);
}

export { registUser };

위와 같이 우리는 axios를 실제 Component가 아닌 분리하여 하나의 API js 파일로 분리를 할 수 있다.

실제 사용하는 Component에서는 API 파일을 import 하여 사용하면 되는 이점이 있다.

이때 내부적으로도 동일한 URL의 경우 이렇게 공통으로 묶어 조금 더 중복을 줄이는 코드를 만들 수 있다.

하지만, 이경우에 localhost, dev, prod 환경에서 동일하게 URL을 줄 수는 없지 않을까?

이러한 부분을 Vue cli에서 제공하는 .env파일로 대체할 수 있다.

위 이미지에서 보이듯이 .env(공통), .env.development(개발), .env.production(운영) 세가지의 파일을 제공한다.

이 세가지 안의 변수들은 각 환경에 따라 해당 .env파일에서 값을 불러와서 사용하게 된다.