현대 웹 개발에서는 API 키, 데이터베이스 자격 증명, 다양한 환경에 대한 다양한 구성과 같은 민감한 데이터를 관리하는 것이 필수적입니다. 이러한 변수를 코드에 직접 저장하면 보안 위험이 발생하고 배포가 복잡해질 수 있습니다. 최신 프런트엔드 빌드 도구인 Vite는 .env 파일을 통해 환경 변수를 관리하는 간단한 방법을 제공합니다.

.env 파일이란 무엇입니까?

.env 파일은 환경별 변수를 정의하는 데 사용되는 간단한 구성 파일입니다. 이러한 변수는 소스 코드와 별도로 유지하면서 애플리케이션 내에서 액세스할 수 있습니다. 이 방식을 사용하면 민감한 데이터를 하드코딩하지 않고도 개발, 스테이징, 프로덕션 등 다양한 환경을 쉽게 관리할 수 있습니다.

Vite의 환경 변수:

Vite에는 환경 변수에 대한 지원이 내장되어 있어 현재 환경에 따라 다양한 값을 더 쉽게 주입할 수 있습니다. Vite가 환경 변수를 처리하는 방법은 다음과 같습니다.

전역 변수: Vite는 빌드 시 환경 변수를 주입합니다.
접두사가 붙은 변수: 보안상의 이유로 VITE_ 접두사가 붙은 변수만 클라이언트측 JavaScript 코드에 노출됩니다. 이 접두사가 붙지 않은 변수는 브라우저에서 액세스할 수 없습니다.

Vite 환경 변수의 예:

VITE_API_URL=https://api.example.com

Vite에서 .env 파일 설정
Vite는 여러 .env 파일을 지원하므로 특정 환경에 대한 환경 변수를 정의할 수 있습니다. 일반적인 설정은 다음과 같습니다.

.env: 모든 환경에서 공유되는 환경 변수의 기본 파일입니다.
.env.development: 개발 환경에 특정한 변수입니다.
.env.production: 프로덕션 환경에 특정한 변수입니다.

예제 .env 파일:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

예제 .env.development 파일:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

예제 .env.production 파일:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

Vite에서 환경 변수에 액세스

Vite 프로젝트 내부의 환경 변수에 액세스하려면 import.meta.env 객체를 사용하세요.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite는 현재 환경을 기반으로 빌드 프로세스 중에 import.meta.env 값을 자동으로 대체합니다.

여러 환경 관리:

Vite의 .env 파일은 개발, 준비, 생산과 같은 다양한 환경에 맞게 사용자 정의할 수 있습니다. 현재 있는 환경에 따라 Vite는 적절한 .env 파일을 로드합니다:

vite를 실행하면 .env.development 파일이 로드됩니다.
vite 빌드를 실행하면 .env.production 파일이 로드됩니다.
특정 환경에서 실행:

vite --mode staging

환경 변수 디버깅:

환경 변수가 예상대로 작동하지 않는 문제가 있는 경우 다음을 확인하세요.

• 변수 접두사: Vite는 이 접두사가 없는 변수를 무시하므로 모든 클라이언트측 변수에 VITE_ 접두사가 있는지 확인하세요.
• 환경 로드 순서: .env 및 환경별 파일이 프로젝트 루트에 있고 이름이 올바른지 확인하세요.
• 빌드 프로세스 확인: 개발 중에 사용 가능한 모든 환경 변수를 보려면 console.log(import.meta.env)를 사용하세요.

결론::

Vite는 .env 파일을 통해 환경 변수를 기본적으로 지원하므로 다양한 환경에서 구성을 쉽게 관리할 수 있습니다.