[React, Vite] Vite 에서 .env 환경변수 사용하기

[React, Vite] Vite 에서 .env 환경변수 사용하기

Vite 로 구성된 React 프로젝트를 다루다가 다음과 같은 에러를 마주쳤다.

 

ReferenceError

환경변수 사용을 위해서 .env 파일에 외부로 노출되면 안 되는 key 값을 저장했고, 불러오는 과정에서 발생한 에러였다.

 

환경 변수란?

환경변수란 프로세스가 실행될 때 사용되는 동적인 값을 말한다.

데이터베이스 연결 정보, API Key, Port Number 등을 환경변수로 설정할 수 있다.

외부로 노출되면 안 되는 중요한 정보의 경우 소스코드에 직접 하드코딩하는 것이 아닌 환경 변수로 관리해야 보안성을 강화할 수 있다.

 

Vite 에서 환경 변수 사용은 다르다.

Node.js 환경에서는 `process.env` 를 사용하여 접근할 수 있다. Node.js 에서는 런타임 시에 환경 변수가 사용되는데, `process` 에는 Node.js 에 대한 정보를 가지고 있어 환경 변수를 다룰 수 있다.

하지만 Vite 에서 `process.env` 로 접근하려고 한다면 `process is not defined` 와 같은 에러가 발생한다.

 

Vite 에서는 환경 변수가 컴파일 시에 사용된다.

Vite 에서 환경변수에 접근하기 위해서는 `import.meta.env` 로 접근해야한다.

 

또한 환경변수를 구성할 때 변수의 명은 반드시 `VITE_` 로 시작되어야 한다. 이것이 Vite 의 규칙이기 때문이다.

Vite 는 .env 파일에서 환경 변수를 읽고 Javascript 모듈에 주입하는데, `VITE_` 로 시작하는 변수만 주입하기 때문이다.

다음은 환경 변수명을 VITE_ 로 시작하지 않았을 때 발생할 수 있는 에러이다.

• `Failed to parse .env file`
• `Cannot read property 'VARIABLE_NAME' of undefined`
• 빌드 시 에러

 

환경 변수 사용하기

.env

VITE_API_KEY = [API_KEY]

 

config.ts

const apiKey = import.meta.env.VITE_API_KEY

`import.meta` 는 모듈에 대한 메타 데이터를 저장하기 위한 객체이다.

 

마치며

환경에 따라 환경 변수 처리 방법이 다르며, Vite 에서는 import.meta.env 를 통해 환경 변수에 접근할 수 있다는 것을 알게 되었다. 또한 VITE_ 키워드로 변수명을 지정해줘야 하는 규칙도 있다.

API 키는 .env 파일에 보관하고 gitignore 에 등록하여 소스코드가 업로드되지 않도록 보안에 특히 조심해야한다.

 

reference

---

• VITE GUIDE env and mode
• VITE + REACT 환경에서 환경변수 설정하기
• Vite에서 import.meta는 왜 사용하는 걸까?