dotenv로 환경 변수 설정하기

 

Create React App의 경우 root의 .env파일에서 환경변수를 쉽게 설정할 수 있었지만

Vanilla JS로 만든 프로젝트에 환경 변수를 설정하려니 다른 절차가 필요했다.

 

 

아무 절차 없이 그냥 .env 파일을 만들고 

process.env.SOMETING_KEY와 같은 형태로 불러오면 당연하게도 ReferenceError가 발생한다.

 

 

1. dotenv 설치

npm i dotenv

 

2. webpack.config.js에 플러그인 추가

// webpack.config.js

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


module.exports = (_, argv) => {

    return {
    //.. 일부 생략

        plugins: [
          new HtmlWebpackPlugin({ template: './index.html' }),
          new MiniCssExtractPlugin({ filename: 'style.css' }),
          new webpack.EnvironmentPlugin(Object.keys(dotenv.parsed || {})), // 추가
        ],
   };
};