개발을 위해 Local, Dev Server WAS 환경 분리하기 1 - Intellij 환경 변수 이용하기

오늘은 개발시 프론트엔드(WEB) 프로젝트와 백엔드(WAS) 프로젝트로 분리되어 있을 시 LOCAL WAS 또는 배포되어진 WAS로 환경을 분리한 경험을 기록하고자 한다. 

현재 진행중인 프로젝트에서 HTML, CSS에 관한 부분을 타 회사 팀에서 맡게 되어 환경을 분리해야 하는 상황이 생겼다. 퍼블리싱을 담당한 회사는 우리 회사에서 만들고 있는 SpringBoot 프로젝트 환경이 없다 보니 이에 대한 부분을 제공해야 했기 때문이다. 퍼블리싱 이외의 javascript 관련 코드도 우리 팀이 맡은 상황이다 보니 ajax 코드가 추가될 시 퍼블리셔 업체에서 동작을 확인할 수 있도록 해주어야 했다. 

우리 팀은 WEB과 WAS 모두 개발하기 때문에 WAS 환경을 LOCAL 에서 실행하며 테스트 해야했고, 퍼블리셔를 위한 서버 WAS를 배포해주어야 했다. 이때 두 환경의 axios base url을 분리하여 이 부분을 해결하였다.

우리팀: Local Vuejs 개발 -> Local Was
퍼블리셔: Local Vuejs 개발 -> Dev Server Was

이러한 환경 분리를 위해 환경 변수를 이용하였으며 인텔리 제이에서 npm 실행 환경을 설정할 시 환경 변수를 주어 구분하였다. Edit congirutaion -> Environment 에서 간단히 가능하였다. 처음에 환경 변수를 설정하였는데도 불구하고 값이 제대로 읽혀지지 않아 이유를 찾아보니 명명법을 지켜야 제대로 읽을 수 있었다. 
Vue의 경우 "VUE_APP_" 이란 접두사를 붙여주어야 했다. React 의 경우 REACT_APP_ 이란 접두사를 붙여주어야 한다고 한다.

이를 통하여 axios 의 base url 을 분리하였고, 문제는 해결되어진 것으로 보았다. 그러나 그 이후 더 큰 문제가 발생하였다. 개발 WAS 에서 Session ID 가 요청마다 새로 생기는 문제였다. 우리의 로그인 방식이 세션 방식이었기에 이 문제는 크게 작용하였다. 

이것에 대한 내용은 다음 링크에 이어 쓰도록 하겠다.

 

다음글 - 개발을 위해 Local, Dev Server WAS 환경 분리하기 2 - SameSite란 :: 꿀잠 (tistory.com)