[React] .env (환경변수파일) - 'create-react-app'과 'webpack 빌드' 프로젝트에서의 각 설정 및 사용 방법

목표

서버API URL을 환경변수 파일(.env)에 등록하고,

React 프로젝트내 어디에서든 process.env.(변수이름)으로 사용할 수 있도록 한다.

 

 

1. create-react-app을 설치한 프로젝트

 

.env 을 만들고 아래와 같이 작성해준다.

REACT_APP_SERVER_API_URL="http://localhost:4001"

 

create-react-app으로 만든 프로젝트에서는 환경변수를 사용할 때

앞에 REACT_APP_ 이라고 꼭 붙여주어야 사용할 수 있다.

 

사용해줄 때에도 똑같이 REACT_APP_을 붙여서 쓰면 된다.

console.log(process.env.REACT_APP_SERVER_API_URL);
// output => http://localhost:4001

 

 

2. webpack을 직접 설정해서 만든 프로젝트

 

dotenv 라는 npm 모듈을 설치한다.

$ npm i --save-dev dotenv

 

.env 파일을 아래와 같이 작성해준다.

SERVER_API_URL="http://localhost:4001"

 

webpack.config.js 파일을 아래와 같이 작성한다.

const dotenv = require('dotenv');
const webpack = require('webpack');

module.exports = () => {
  dotenv.config();

  return {
   //...
    plugins: [
      new webpack.DefinePlugin({
        'process.env.SERVER_API_URL': JSON.stringify(process.env.SERVER_API_URL),
      }),
    ],
    //...
  };
};

- dotenv 모듈을 불러와 dotenv.config()로 dotenv를 사용할 수 있도록 실행

- plugins에 사용할 env를 등록

 

아래와 같이 작성하여 사용할 수 있다.

console.log(process.env.SERVER_API_URL);
// output => http://localhost:4001