[Vite] .env 파일로 환경 변수 관리 하기 (Feat. API Key)

프로젝트를할때 서버 url과 로그인 시 필요한 Rest api key를 관리하기위해서 .env로 만들어 관리하고자한다.

 

리액트의 .env

1. React에서 변수명은 REACT_APP_ 으로 시작되어야 한다.
2.  변수명과 값 사이에는 공백 또는 따옴표("")가 존재해서는 안된다.
3.  변수명은 대문자로 작성하는 것이 관례이다.

Vite 의 .env

1. Vite에서 변수명은 VITE_ 으로 시작되어야 한다.
2.  변수명과 값 사이에는 공백 또는 따옴표("")가 존재해도된다.
3.  변수명은 대문자로 작성하는 것이 관례이다.
4. 별도 vite-env.d.ts를 생성하여 meta 타입을 설정해줘야한다.

 

env는 루트에 만들고 사용하고자하는 변수들을 선언해준다.

 

 

src폴더에 vite-env.d.ts를 만들어주고 사용할 변수의 타입을 정해준다.

 

 

const SERVER_BASE_URL = import.meta.env.VITE_SERVER_BASE_URL;
const KAKAO_REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
const GOOGLE_REST_API_KEY= import.meta.env.VITE_GOOGLE_REST_API_KEY;

export const API_PATHS = {
  AUTH: {
    SOCIAL_LOGIN: (provider: string) => `${SERVER_BASE_URL}/api/v1/auth/${provider}/callback`,
    LOCAL_LOGIN: `${SERVER_BASE_URL}/api/v1/auth/local`,
    KAKAO_LOGIN: (redirectUrl: string) => `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_REST_API_KEY}&redirect_uri=${redirectUrl}&response_type=code`,
    GOOGLE_LOGIN: (redirectUrl: string) => `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_REST_API_KEY}&redirect_uri=${redirectUrl}&response_type=code&scope=email profile`,
  },
};

 

필요한 key들은 import.meta.env를 통해서 사용가능하다!