const 빌드 후 환경변수 수정 = ( Param ) => {
💻 return Result;
env.js 파일 생성
// public/env.js
// 전역에 선언되기 때문에 window 객체를 통해 참조할 수 있음
export const env = {
...import.meta.env, // vite 환경변수 값
...window["env"], // 전역에 저장된 이전 환경변수 값
// 필요 환경 변수 정의
BASE_URL: "http://localhost:3000"
};
index.html에서 script 태그를 통해 env.js 선언
<!-- index.html -->
<html>
<head>
...
<script src="/env.js"></script>
</head>
</html>
env.js의 환경변수 적용
//App.jsx
import env from "../public/env"
...
return (
<div>
{env.BASE_URL}
{env.VITE_VERSION}
// or
{window.env.BASE_URL}
{window.env.VITE_VERSION}
</div>
)
배포된 후 env.js를 수정하여 환경변수 변경하기
// 배포된 env.js 파일
// 배포 후에는 전역으로 접근하기 때문에 아래와 같이 사용해야 함
window.env = {
...window.env,
// 다시 정의할 환경변수
BASE_URL: "http://aaa.com"
VITE_VERSION: 0.1.0
}
📝 console.log( history )
회사에서 프로젝트 진행 중 환경변수를 변경할 때마다 빌드하는 상황이 발생하여 빌드 후 특정 파일을 수정하면 환경변수를 수정할 수 있도록 하는 방법이 필요했다.
열심히 구글링해 본 결과 public 폴더에 env.js를 선언하여 사용하는 방식을 발견했다. react-inject-env 라이브러리를 적용하여 테스트해 보니 작동이 되는 것을 확인했다.
env.js 파일에 선언된 env 변수는 전역으로 선언되었기 때문에 window 객체를 통해 접근할 수도 있고 import를 통해 접근할 수 있다. 따라서 빌드 후 env.js 파일을 수정하면 빌드된 파일에서 수정된 변수의 값을 바라볼 수 있다.
react-inject-env 결과물을 확인해 보니 굳이 라이브러리를 사용하지 않고 직접 배포된 폴더에서 env.js 파일을 접근하여 수정해도 되겠다는 생각이 들어 테스트해 보니 동일하게 동작하는 것을 확인했다.
다만, 라이브러리와 직접 수정하는 두 경우 모두 변경된 사항을 반영하기 위해서 브라우저를 새로고침해야 한다.
환경 변수를 배포 후에 재빌드하지 않고 수정할 수 있지만 env.js 파일이 로드될 때 브라우저 개발자 도구에서 확인할 수 있기 때문에 보안상 중요한 키와 같은 값들은 계속해서 .env를 활용하는 것이 좋아 보인다.
/ / Improvements
빌드 후 환경변수 수정에 대한 개선 사항은 아니지만 해당 기술을 확인하는 것을 일주일 전에 진행했고 동작하는 것을 확인하고 넘어갔다가 필요할 때 사용하려 하니 생각이 나지 않았다. 옵시디언을 통해 메모하는 습관은 있지만 미루다 보니 작성하지 못했다. 기술 확보 및 배운 것이 있다면 바로 메모하는 습관을 가져야 할 것 같다.
24.07.15
당연한 결과지만 개발자 도구에서 env.js에 지정한 모든 변수에 접근이 가능하다. 그래서 해당 변수를 바꾸면 적용되는 것을 확인했다. env.js에 선언된 env에 접근할 수 없도록 만들거나 난독화, 암호화하는 방법 등을 찾아봐야 할 것 같다.
}
'DEV > WebProgramming' 카테고리의 다른 글
| [React.js] React-Table getGroupedRowModel() 오류 (0) | 2024.09.18 |
|---|---|
| [React.js] debounce 사용하기 (0) | 2024.07.09 |
| [JavaScript] 사용자 스크롤 막기 및 스크롤 여백 처리 (0) | 2024.04.20 |
| [React.js] 소셜 로그인 구현 - 카카오 (0) | 2023.04.28 |
| [React.js] Viewport와 동적으로 meta 태그 수정하기 (0) | 2023.01.31 |