Webpack으로 환경 변수 사용하기

date
Sep 24, 2021
slug
webpack-4
summary
React + Typescript + Webpack 구성
thumbnail
status
publish
CRA 방식으로 생성된 프로젝트는 내부적으로 환경변수에 대한 설정과 패키지가 설치되어 있기 때문에 상관이 없지만
Custom Webpack 방식으로 시작된 프로젝트는 사용자가 직접 환경변수에 대한 설정을 해줘야합니다❗️

1. dotenv-webpack 설치

npm i -D dotenv-webpack

2. Webpack 설정

2-1. webpack.config.js

const dotenv = require('dotenv-webpack');
exports = {
  ...,
  plugins: [
    new dotenv();
  ],
};

2-2. .env (Project Root) 파일 생성

ENV_KEY = TESTKEY
위와 같이 플러그인 설정만 해준다면 이제 클라이언트 코드에서 process.env.ENV_KEY 와 같이 .env 파일의 생성된 환경변수에 접근이 가능합니다.

2-3. Netlify, Heroku, CI 등에서 환경 변수 사용하기

Netlify, Heroku, CI 등 사용자가 작성한 .env 파일을 사용하지 않고 외부에서 환경변수 설정을 따로 해주는 상황이 존재합니다.
const dotenv = require('dotenv-webpack');
exports = {
  ...,
  plugins: [
    new dotenv({
      systemvars: true,
    }),
  ],
};
그럴 경우 systemvars 옵션을 true 로 주면 외부 시스템(Netlify, Heroku, CI) 변수에 접근이 가능하게 됩니다.
systemvars 패키지 옵션 설명 - Set to true if you would rather load all system variables as well (useful for CI purposes).