[React] Webpack 환경 설정에서 (.env) 환경 변수 사용하기

예전에 CRA로 만들어 개발했던 프로젝트에서는 환경변수를 따로 설정해주지 않아도

.env 파일을 만들어서 REACT_APP_* 변수를 사용하면 사용할 수 있었던 것 같다!

 

하지만 Webpack에서는 내가 환경변수를 사용하겠다는 것을 webpack.config.js에 알려줘야 한다.

 

npm install dotenv

먼저 .env 설정을 위해 dotenv 라이브러리를 설치해준다.

 

`.env`

SERVER_URL="http://127.0.0.1:3000"

루트 폴더 내에 .env 파일을 만들고, 사용할 변수를 입력해준다.

 

`webpack.config.js`

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

module.exports = {
  ...
  plugins: [
    new webpack.EnvironmentPlugin(["SERVER_URL"])
  ],
}

plugins에 EnvironmentPlugin 을 통해서 내가 .env에서 SERVER_URL이라는 변수를 사용할 것이라고 알려준다!

EnvironmentPlugin 외에도 같은 기능을 할 수 있는 다른 패키지가 있지만, 이게 사용법이 가장 간단해 보여 사용했다.

 

function Page() {

  console.log(process.env.SERVER_URL, "환경변수 SERVER_URL");
  
  return (
    ...
  )
}

그럼 이제 React jsx파일에서 "process.env.변수명" 으로 불러와서 사용할 수 있다.