이번 포스트는, 제가 Front에서 환경변수를 사용하기 위해 dotenv와 webpack config 파일을 조작했던 경험을 작성하겠습니다.

Problem

API 주소와 같은 것을 환경변수로 처리하려고 했지만, 환경변수를 그대로 사용할 수 없다. Webpack으로 빌드된 파일이 돌아가는 시점과, 서버가 파일을 서빙하는 공간이 다르기 때문에, 유저가 사용하는 시점에서 process.env를 먹일 수 없었다.

Front에 환경변수를 넘겨주는 방법을 찾는 와중에, Webpack으로 번들링을 하는 시점에 환경변수를 적용할 수 있음을 알게되었다.

Solution

• webpack.config.js가 기존과 크게 바뀐 부분은, json 객체가 아니라. arrow function이 json 객체를 리턴하는 형태로 바뀐 것이다. cli에서 입력한 mode나 다른 옵션을 인자로 받을 수 있게 되었다.webpack.config.js에서 실행되는 함수는 인자로 받은 mode를 기반으로 development.env를 읽을지, productuon.env를 읽을지 결정한다.
  onst dotenv = require('dotenv');

import dotenv require("dotenv")

module.exports = (env, options) => {
  dotenv.config({path: `env 파일 경로`});
  // 위 코드를 통해 process.env 의 환경변수를 읽었다.
  
  return { 
  	// 여기에 원래 webpack.config에 작성했던 내용을 쓰면 된다.
  }

• config가 .env 파싱을 해왔다면, 이제 webpack.config.js에서 process.env.이름 으로 접근 할 수 있다. 그러나 아직은 NODE 런타임 환경변수이기 때문에, NODE환경을 벗어나면 무용지물인 변수다.웹서버가 NODE 런타임 환경변수를 인식할 수 있도록 해주는 것이 webpack.DefinePlugin과 webpack.EnvironmentPlugin이다.

webpack.DefinePlugin

이 플러그인은, 웹팩 빌드 시에, 코드에 적힌 환경 변수에 우리가 설정한 값을 대입한다.

new webpack.DefinePlugin({
       'process.env.API_URL': JSON.stringify(process.env.API_URL),
       'process.env.API_VERSION': JSON.stringify(process.env.API_VERSION),
       'process.env.WEB_URL': JSON.stringify(process.env.WEB_URL),
     }),

js 코드 상에서 process.env.API_URL 로 적어둔 것을 .env파일 에서 읽어온 값으로 대체해주는 플러그인이다.그러나. js 코드에서 console.log(process.env.API_URL)을 하면 undefined가 출력된다.DefinePlugin은 웹팩이 빌드 할 때, 변수에 실제 값을 할당하는 역할만 수행하기 때문이다.

webpack.EnvironmentPlugin

• 노드 런타임(Node runtime)에서 process.env 에 저장되는 환경 변수를 전역 변수로 등록하기 위한 플러그인이다.

  솔직히 왜 필요한지 모르겠음 없어도 동작함. 그리고, definePlugin으로 EnviromentPlugin을 모두 대체 가능한 것 같음..