.env 환경변수 사용법

환경 변수를 쓰는 이유는 개발을 하다 보면 외부로 알려지면 안 되는 API_KEY 등등 보안이 필요한 값들이 있습니다. 이러한 값들을 보안이나 유지 보수를 용이하게 하기 위해 .env 파일에 환경 변수로 만들어 변수를 꺼내와 사용하는 것입니다.

먼저 .env 파일을 프로젝트 최상단에 만들어 줍니다. .env 파일을 세개나 만들었네요. 그 이유는 로컬, 상용, 목서버의 API_KEY키가 다르기 때문입니다.
이렇게 하면 cli로 편리하게 골라서 실행시킬 수 있습니다.

그 다음 파일 안에

Vue는 VUE_APP_으로 시작하여 VUE_APP_API_BASE_URL=http://API_KEY로 저장하시면 됩니다.
REACT는 REACT_APP_으로 시작하여 똑같이 지어주시면 됩니다.

그리고 instance를 만들어 줍니다.

import axios from "axios";

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 환경 변수를 사용하여 baseURL 설정
  withCredentials: false, // 이것은 CORS 요청을 위한 것입니다.
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

export default apiClient;

이러면 cli로 시작 할 때 내가 선택한 .env파일로 시작하여 VUE_APP_API_BASE_URL이 바뀌게 됩니다.

마지막으로 package.json에

"serve:mock": "vue-cli-service serve --mode mock",
"serve:local": "vue-cli-service serve --mode local",
"serve:production": "vue-cli-service serve --mode production",

이 부분을 추가 합니다.

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:mock": "vue-cli-service serve --mode mock",
    "serve:local": "vue-cli-service serve --mode local",
    "serve:production": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint:fix": "vue-cli-service lint --fix"
  },

그러면 완성입니다.

이제 처음에 실행시킬 때 yarn serve:local로 실행시키면 .env.local에 설정한 API_KEY로 실행이 됩니다.

진짜 마지막으로 제일 중요한 것은 .env 파일들을 깃허브나 오픈된 공간에 올리시면 안됩니다.

잊지마세요.