환경변수란?
보호해야 할 key값들이나 자주 사용하는 값들을 변수에 담아 쓸 수 있게 .env 파일에 등록해 관리할 수 있다.
확장파일
.env # 모든 상황에서 사용될 환경 변수
.env.local # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode] # 특정 모드에서만 사용될 환경 변수
.env.[mode].local # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
작성법
.env나 .env.local로 확장파일을 만든 다음 변수이름에는 REACT_APP 이렇게 붙여줘야 리액트로 인식해 리액트 환경에서 설정할 수 있다. VITE로 프로젝트를 생성한 경우에는 VITE라는 이름을 붙여줘야 한다
REACT_APP=값
VITE=값REACT_APP 뒤에 _APP_KEY 이런식으로 이름을 지정해주면 되고 값에다 따옴표를 사용하지 않고(난 지금까지 붙이는 건 줄 알았다) 값을 입력해야 변수이름이 파란색으로 활성화된다.
보안 권고사항
공식문서에서 나와 있는 주의 해야 할 사항은 다음과 같다.
.env..local 파일은 오로지 로컬에서만 접근이 가능한 파일이며, 데이터베이스 비밀번호와 같은 민감한 정보를 이 곳에 저장하도록 합니다. 또한 .gitignore 파일에 .local 파일을 명시해 Git에 체크인되는 것을 방지하도록 합니다.
Vite 소스 코드에 노출되는 모든 환경 변수는 번들링 시 포함되게 됩니다. 따라서, VITE_* 환경 변수에는 민감한 정보들이 포함되어서는 안됩니다.
