vite - 환경 변수와 mode

개발 환경에서 아직 API가 제공되지 않는 상황에서 로컬 환경에서는 목업 데이터를 반환하고, 실제 프로덕션 환경에서는 API로부터 데이터를 받을 수 있도록 Vite의 환경 변수와 모드를 다르게 구성하기 위하여 vite의 환경 변수와 모드를 사용하였습니다.

Vite의 환경 변수를 사용하면 애플리케이션에서 필요한 값을 동적으로 지정할 수 있기때문에 현재와 같이 동적으로 구성하기 위한 환경에 적합하다고 판단하였습니다. .env 파일을 사용하여 환경 변수를 정의하고 로드할 수 있습니다. .env 파일에 설정된 환경 변수를 읽어오기 위해 import.meta.env 객체에 접근할 수 있습니다.

vite의 환경변수

• .env 파일 생성
  • 프로젝트의 루트 디렉토리에 .env 파일을 생성
  • .env 파일은 환경 변수를 KEY=VALUE 형식으로 정의
• 환경 변수 정의:

  • .env 파일에 필요한 환경 변수를 정의

  • VITE_API_KEY=yourapikey와 같이 환경 변수를 설정

  • .env 파일:
    - .env 파일은 프로젝트의 루트 디렉토리에 생성되며 환경 변수의 값을 설정하기 위해 사용합니다.
    - .env 파일명:

    jsxCopy code
    .env                # 모든 경우에 로드됨
    .env.local          # 모든 경우에 로드되지만 Git에서는 무시됨
    .env.[mode]         # 지정한 모드에서만 로드됨
    .env.[mode].local   # 지정한 모드에서만 로드되지만 Git에서는 무시됨
    

  • .env 파일 예시:

    jsxCopy code
    VARIABLE_NAME=value
    API_URL=https://api.example.com
    SET VITE_DUMMY_FETCH=true
    

• 환경 변수 로드:
  • Vite에서는 import.meta.env 객체를 통해 환경 변수에 접근가능
  • const apiKey = import.meta.env.VITE_API_KEY;와 같이 환경 변수 값을 취득 가능
    • import.meta.env가 제공하는 대표적인 속성

      • import.meta.env.MODE: {string} 애플리케이션이 실행 중인 모드입니다.

      • import.meta.env.BASE_URL: {string} 애플리케이션이 제공되는 기본 URL입니다.

      • import.meta.env.PROD: {boolean} 애플리케이션이 프로덕션 모드로 실행 중인지 여부입니다.

      • import.meta.env.DEV: {boolean} 애플리케이션이 개발 모드로 실행 중인지 여부입니다.

      • import.meta.env.SSR: {boolean} 애플리케이션이 서버에서 실행 중인지 여부입니다.

        import.meta.env 사용 예시:

        const dummyApi = (url) => {
        	// 목업데이터 취득
        }
        const authApi = (url) => {
        	// api에서 데이터 취득
        }
        const selectedAuthApi = import.meta.env.VITE_DUMMY_FETCH === 'true' ? dummyApi : authApi;
        
        const get = async <T = {}>(
          url: string,
          param: QueryParameter | null,
          omitParam: string[] | null = null
        ) => {
          const getUrl = baseUrl + url + appendQueryParam(param, omitParam);
        
          const options = {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            },
          };
        
          return await selectedAuthApi(getUrl, options);
        };
        

• 환경 변수 파일을 사용할 때 주의점
  • 환경 변수 파일(.env)에는 민감한 정보(비밀번호, API 키, 암호화된 토큰 등)를 저장하지 않는 것이 좋다.
  • 환경 변수 파일은 프로젝트 루트 디렉토리에 위치해야 함
  • 구문:
    • 환경 변수 파일은 key=value 형식으로 환경 변수를 정의합니다. 키와 값 사이에는 등호(=)를 사용하며, 공백을 넣지않음
  • 특수 문자 및 공백:
    • 환경 변수 값에 특수 문자나 공백이 포함된 경우 이스케이프(Escape) 시퀀스를 사용하여 처리해야 함
  • 파일 변동과 서버 재시작:
  • 우선순위:
    • 일반적으로 .env.local 파일의 환경 변수가 가장 높은 우선순위
• 모드 (Mode)
  • Vite에서의 "mode"는 애플리케이션을 실행하는 데 사용되는 모드를 나타냄
  • 기본 모드는 "dev"로, 일반적으로 아무런 설정 없이 실행하면 개발 모드로 실행됩니다.
    • 개발 모드 (dev):
      • 개발 중에 사용하는 모드로, 실시간 리로딩, 소스 맵 디버깅 등의 기능이 활성화
      • 개발 환경에서의 일반적인 모드
      • import.meta.env.MODE가 "development"로 설정됩니다.
    • 프로덕션 모드 (production):
      • 실제 배포 및 운영 환경에서 사용하는 모드
      • 애플리케이션을 최적화하고 불필요한 기능을 제거하여 성능을 향상
      • 소스 맵 디버깅과 같은 개발자 도구 기능은 일반적으로 비활성화
      • import.meta.env.MODE가 "production"으로 설정됩니다.
  • 다른 모드로 실행하는 방법:
    • .env.staging 파일의 환경 변수를 사용하여 실행