Infisical으로 React 환경변수 적용하기

프로젝트에서 Project 들어가서 Project Settings를 클릭하면 다음과 같은 화면이 나옵니다.

여기에서 SLUG가 중요합니다. 이게 나중에 CLI 명령어 칠때 환경을 구분하는 태그 같은 것 입니다.

GPT한테 물어보니

"Slug"는 주로 URL에서 사용되는 짧고 사람이 읽을 수 있는 문자열을 의미합니다. 보통 특정 콘텐츠의 제목을 URL-friendly하게 만든 것이에요. 라고 합니다.

이렇게 환경을 설정해두고

사용하는 환경변수를 넣습니다.

그 후 프로젝트로 이동하여 다음 명령어를 통해 infisical을 설치합니다.

npm install -g @infisical/cli

그리고 로그인 합니다.

infisical login

그리고 Self-hosted 선택하고

Domain 입력하라 할때 http://<VM의IP> 입력을 하면 콜백 URL 나올텐데 그걸 클릭해서 브라우저로 들어갑니다.

그럼 브라우저 들어가서 필요한 정보들 입력 후 로그인 합니다.

그리고 infisical 초기화합니다.

infisical init

그리고 organization(NewSum)과 프로젝트(NewSum-FE) 체크합니다.

그 이후 환경변수가 잘 가져와지는지 테스트를 해보기 위해 기존 .env 파일을 다른데 백업해두고 프로젝트에서 삭제합니다.

그 후 다음 명령어를 이용해 .env 파일이 생성되는지 확인합니다.

infisical export --env=local > .env

여기에서 —env 뒤의 local이 처음에 중요하다 했던 SLUG 입니다.

이렇게 환경에 맞는 환경변수를 가져올 수 있고, .env 파일이 생기는 것을 확인할 수 있습니다.

잘 가져오는 것을 확인했고, 이걸 React를 실행할 때 환경변수를 주입하기 위해서는 다음 명령어를 입력합니다.

infisical run --env=local -- npm run dev

이러면 환경변수가 잘 적용되고 React 앱이 실행되는 것을 확인할 수 있습니다.

그리고 그냥 원래 입력하던 명령어를 입력했을 때는 당연히

npm run dev

안나옵니다.