마이그레이션 중 발생한 Vite 환경 변수 처리

해결 과정

기존 미션을 진행할 때 JS(react)로 만들었던 페이지를 TS로 마이그레이션을 진행하는 중에 문제가 발생했다.

다른 레이아웃의 구성은 같으나 데이터만 가져오지 못한 것으로 보아 데이터 요청을 보내는 부분이 문제인 것으로 보였기에 개발자 도구로 확인해 보았다.

url 자체에서 undefined라는 이상한 친구를 url에 끼워서 보내고 있었고 undefined인 것으로 보아 변수에 변수값이 들어가지 않아서 발생된 일 같았다. 너무나도 JS스러운 경우

경우의 수를 생각해봤지만 역시 환경변수의 문제인 것 같았다.

TS로 마이그레이션을 진행하면서 동시에 진행한 부분이 개발 초기 도입하지 못한 환경 변수 작업이었는데 이 문제로 생각하고 탐구해보았다.

BASE_URL="주소"

// constants.ts
export const BASE_URL = process.env.BASE_URL;

기존 env파일과 그 env를 사용하는 ts 파일이다.

우선 process.env는 express에서 사용하는 즉 node.js 런타임 환경에서 환경 변수를 저장하는 객체이기 때문에 잘못된 부분이 있다는 것은 확인하였다.

next.js에서는 NEXT_PUBLIC_ 으로 클라이언트와 서버의 환경 변수를 구분하는데 VITE도 그런 구분법이 있을 것으로 생각하여 공식문서를 찾아보았다.

Vite 공식문서

VITE에서는 VITE_~ 으로 환경 변수를 지정하며 환경 변수에 기본으로 들어가 있는 변수명이 있는 것으로 보였다.

기존 BASE_URL은 이미 VITE에서 앱 내의 베이스 URL을 표시하는 변수이기 때문에 URL로 변경하여 저장하였다.

VITE_URL = "주소"

export const BASE_URL = import.meta.env.VITE_URL;

이후 vite build로 해당 변수를 dist로 가져온다.

참고로 VITE_로 설정된 경우 번들링시 무조건 포함되기 때문에 데이터베이스 비밀번호 같은 민감한 정보는 넣어선 안된다고 한다.

결과

JS에서 TS로 마이그레이션 하는 중에 생긴 일입니다!

잘못된 내용이 있다면 말씀 부탁드립니다. 감사합니다.