[Vue] vue-cli 스펙을 사용한 코드 베이스에서 IP 분리하기

개요

코드 베이스에 ip가 들어가 있는 경우는 조금 기형입니다. 개발된 코드 베이스에 ip가 있을 이유도 없고 있어선 안 된다고 생각했습니다. 그래서 vue-cli의 빌드 종류(개발/빌드)에 따라서 잡히는 환경변수를 이용해서 웹의 호스트를 자동으로 설정해 보겠습니다.

 

🤔생각한 문제점

- 개발 환경일 때와 배포 환경일 때 사용해야 할 IP 구분을 위한 로직이 추가되어야 함.

- 가독성 문제

- 보안 문제

간단하게. Vue-cli로 구축된 프로젝트에서 파일에 변수를 설정해서 코드베이스에서 이 파일을 참조해서 코드에 값을 대입하는 방법을 알아보겠습니다.

분리를 해야하는 문제를 해결하기 위해서, 전에 작성된 에서 소개한 Vue-CLI Mode env 관련한 공식문서를 다시 참고해 보았습니다.

---

구분 방법

1. 프로젝트 홈 환경(package.json과 같은 경로)에 .env 파일을 생성합니다.

파일 명도 '모드'에 따라서, 체이닝 식으로 이름을 지어 줄 수 있습니다.

파일 이름 짓기 규칙

.env  # loaded in all cases
.env.local  # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local  # only loaded in specified mode, ignored by git

저는 로컬의 개발 환경에서만 .env 파일에서 값을 읽을 용도로만 사용하므로,

.env.local 이라고 파일명을 지어주었습니다.

 

2. HOST IP를 가지는 변수를 입력했습니다.

작성 시,  주의할 점은, 선언하는 변수명의 시작은 NODE_ENV, BASE_URL 또는 VUE_APP_로 시작해야 합니다. 아니면, undefined가 나옵니다.

//.env.local
VUE_APP_DEV_HOST_URL = http://192.168.0.88:27889

 

// 코드베이스에서 common.js 호스트 설정 js 파일
let gHost = `http://${window.location.host}`;
if (process.env.NODE_ENV === 'development') {  //👈 개발 환경일 때
    gHost = process.env.VUE_APP_DEV_HOST_URL;
}

이제, Vue-CLI 명령어로 빌드를 하거나 dev server를 실행하면, .env.local 파일이 코드 베이스와 함께 번들링되면서, 코드에서 사용가능한 변수가 됩니다.

 

 

마지막으로, 저희 제품에서 적용되는 케이스는 없겠지만 공식 문서에서는 개인 API 키를 사용하지 말라고 권고하고 있습니다.