`끄적끄적` .env 로 환경 변수 관리하기 (VITE)

안녕

 

안녕하세욥 오늘은 중요한 Key와 같은 값을 .env 파일 안에서 관리하는 방법을 정리하겠습니다.

 

 

.env 생성 및 사용법

 

1. 먼저 생성하는 방법은 프로젝트의 루트 디렉토리에 .env 를 생성합니다

 

2.해당 파일안에 key = value 형식으로 환경 변수를 작성합니다

VITE_API_KEY=your_api_key_here

 

참고로 Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 

VITE_ 라는 접두사를 붙여야 합니다 - 공식 문서 참고

https://ko.vitejs.dev/guide/env-and-mode

Vite

 

 

3. 환경 변수 사용

const SUPABASE_KEY = import.meta.env.VITE_API_KEY

 

컴포넌트 안에 import 하는 것은 아니지만 import.meta.env.라고 붙여주세요

 

.gitignore에 추가하기

이렇게 env 파일로 중요한 값을 저장하고 관리하여 프로젝트를 보다 안전하게 만들 수 있습니다.

 

만약 깃 헙에 올리게 된다면 해당 파일이 포함되어 올라가지 않게 

 

루트 디렉토리에 있는 .gitignore 파일에 .env 를 추가해주어야 합니다

////////////.gitignore



# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

.env //<<<<<<<<<<<<<<<<<<<<<<<<<<이렇게 추가해주면 됨

 

 

마치며

팀 프로젝트를 진행하면서 프로젝트 기획부터

세팅하는 것 까지 무엇 하나 중요하지 않은 것은 없단 걸 느끼면서

오늘도 큰 거 하나 배운 것 같습니다 내일도 ㅎㅇㅌ