[React.js] .env 파일 만들고 사용하기 (환경 변수 관리)

.env 파일 만들고 사용하기 (환경 변수 관리)

들어가며

• 리액트(React.js)에서 환경 변수 관리를 위해 @.env@ 파일을 만들고 사용하는 방법을 정리해본다.

 

@.env@ 파일

개념

• 애플리케이션에서 사용되는 환경 변수(Environment Variables)를 저장하는 파일
• 환경 변수는 운영체제나 애플리케이션의 설정 값들을 외부에서 설정하고 관리할 수 있게 해주는 변수들로, 코드에 직접 하드코딩하지 않고도 민감한 정보나 설정 값을 관리할 수 있게 해준다.
• 리액트나 노드 같은 웹 애플리케이션에서는 주로 다음과 같은 정보를 @.env@ 파일에 저장한다.

✅ API 키
✅ 데이터베이스 연결 정보
✅ API 엔드포인트
✅ 앱 환경 설정 (개발, 테스트, 프로덕션 등)

 

특징

• 애플리케이션에서 민감한 정보나 환경에 따라 달라지는 설정 값을 코드에 직접 쓰지 않고, 외부 파일로 관리할 수 있다.
• 민감한 정보를 코드에 하드코딩하지 않고 @.env@ 파일에 저장해 관리함으로써 보안을 강화할 수 있다.
  • 하지만 @.env@ 파일은 반드시 @.gitignore@에 추가해 Git 등 버전 관리 시스템에 포함되지 않도록 해야 한다.

.gitignore

# ...

.env

# ...

 

• @.env@ 파일을 개발, 테스트, 프로덕션 등 환경별로 분리할 수 있다.
  • 예를 들어, @.env.development@, @.env.production@ 파일을 사용하여 개발 환경과 배포 환경에서 다른 설정을 사용할 수 있다.

 

사용 예

./.env (create-react-app)

REACT_APP_API_KEY=your_api_key_here
REACT_APP_API_URL=https://api.example.com
REACT_APP_MODE=development

 

• 이러한 환경 변수들은 애플리케이션 내에서 @process.env@ 객체를 통해 접근할 수 있다.

 

API 키나 데이터베이스 비밀번호와 같은 정보는 코드를 공유하거나 배포할 때 노출되지 않도록 별도로 관리해야 한다. 또한, 환경 변수로 관리하면 다른 환경(개발, 배포)에서 설정 값만 다르게 하여 동일한 코드를 사용할 수 있다.

 

사용 방법

• 프로젝트의 최상위 경로에 @.env@ 파일을 생성한 후, 안에 내용을 작성한다.

 

① create-react-app

/.env

• 환경 변수명이 @REACT_APP_@으로 시작한다.

REACT_APP_API_KEY=your_api_key_here
REACT_APP_API_URL=https://api.example.com

 

 

./src/component/MyComponent.jsx

• @process.env.환경변수명@으로 해당 값을 불러온다.

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // process.env에 접근하여 가져온다.
    const apiKey = process.env.REACT_APP_API_KEY;
    const apiUrl = process.env.REACT_APP_API_URL;
    
    console.log('API Key:', apiKey);
    console.log('API URL:', apiUrl);
    
    // 예: API 호출
    // fetch(`${apiUrl}/data?api_key=${apiKey}`)
    //   .then(response => response.json())
    //   .then(data => console.log(data));
  }, []);

  return (
    <div>
      // ...
    </div>
  );
};

export default MyComponent;

 

• 다음과 같이 환경별로 설정 파일을 만들 수도 있다.

./.env.development, ./.env.production

# .env.development
REACT_APP_API_URL=https://dev.api.example.com

# .env.production
REACT_APP_API_URL=https://prod.api.example.com

 

⇒ 빌드 시, 자동으로 환경에 맞는 @.env@ 파일을 적용한다.

 

 

② VITE

/.env

• 환경 변수명이 @VITE_@으로 시작한다.

VITE_API_KEY=your_api_key_here
VITE_API_URL=https://api.example.com

 

 

./src/component/MyComponent.jsx

• @import.meta.env.환경변수명@으로 해당 값을 불러온다.

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // import.meta.env에 접근하여 가져온다.
    const apiKey = import.meta.env.VITE_API_KEY;
    const apiUrl = import.meta.env.VITE_API_URL;
    
    console.log('API Key:', apiKey);
    console.log('API URL:', apiUrl);
    
    // 예: API 호출
    // fetch(`${apiUrl}/data?api_key=${apiKey}`)
    //   .then(response => response.json())
    //   .then(data => console.log(data));
  }, []);

  return (
    <div>
      // ...
    </div>
  );
};

export default MyComponent;

 

• 다음과 같이 환경별로 설정 파일을 만들 수도 있다.

./.env.development, ./.env.production

# .env.development
VITE_API_URL=https://dev.api.example.com

# .env.production
VITE_API_URL=https://prod.api.example.com

 

⇒ 빌드 시, 자동으로 환경에 맞는 @.env@ 파일을 적용한다.

 

참고 사이트

Adding Custom Environment Variables | Create React App

Vite