Frontend/React
[React] .env 환경변수 사용법 (Vite / CRA 환경)
sol_git
2025. 2. 27. 16:24
.env를 사용하는 이유
1. github 같은 오픈 리포지토리에 소스코드를 업로드할 경우, 오픈되면 안되는 정보들을 변수화하여 노출 없이 관리하기 위함
ex) `API Key`, `DB 정보`
2. 자주 사용되는 값을 전역 환경변수로 지정해두고, 유지보수를 용이하게 하기 위함
ex) Backend `API Uri` 혹은 `Port` 등
.env 파일 생성하기
어떤 프로젝트 파일이든, 처음 생성하면 `.env` 파일이 없는 경우가 많다.
그 경우 직접 만들어주면 된다!
⭐️.env 파일의 위치⭐️
`.env` 파일은 꼭 정해진 위치 -프로젝트 최상위 Root- 에 생성되어야 한다!
헷갈리면 `package.json`과 동일 선에 있다고 생각하믄 됨.
⭐️.env 파일 gitignore 처리⭐️
열심히 `.env` 파일 만들어놓고 gitignore처리를 하지 않으면, github에 또 노출되고 만다 ㅋㅎ...
`.gitignore` 파일에 들어가서, `.env`를 추가해주기!
이러면 `.env` 파일이 더이상 깃 히스토리에 트래킹 되지 않는다.
.env 변수 사용하기
변수 사용법은 프로젝트 빌더에 따라 차이가 있다. 이 글에서는 요즘 많이 쓰는 `Vite`, 그리고 정통 `CRA`기준으로 방법을 알아보겠다.
Vite 빌드 프로젝트
1. Vite 환경변수 만들기
- 규칙 : `VITE_` 로 시작해야 함
VITE_API_KEY=blahblah~2. Vite 환경변수 사용하기
- 별도 import 필요 없고, 어디에서든 `import.meta.env.key이름`으로 불러올 수 있다.
import.meta.env.VITE_API_KEY
CRA (create-react-app) 빌드 프로젝트
1. CRA 환경변수 만들기
- 규칙 : `REACT_APP_` 으로 시작해야 함
REACT_APP_API_KEY=blahblah~
2. CRA 환경변수 사용하기
- 별도 import 필요 없고, 어디에서든 `process.env.key이름`으로 불러올 수 있다
process.env.REACT_APP_API_KEY