CRA없이 환경변수 설정하기 - dotenv, ReferenceError: process is not defined

CRA에서는 간단하게 .env파일을 생성한 다음 필요한 환경변수를 설정해주면 됐는데,
CRA를 사용하지 않고 타입스크립트+웹팩으로 프로젝트를 하다보니 별도로 설정이 더 필요했다.

환경변수?

운영체제의 입장에서 해당 프로세스를 실행시키기 위해 참조하는 변수이다.

.env(dotenv)?

dotenv는 환경변수를 .env파일에 저장해 관리할 수 있게 해주는 Node.js 패키지이다.
보안을 고려해 관리해야하는 변수들은 dotenv패키지를 이용해 환경변수 파일을 외부에 만들어 접근하도록 만들 수 있다.

dotenv 설치

npm install dotenv

.env 파일 생성

필요한 변수 정보들을 다음과 같은 형태로 넣어준다.

PORT=4000
HOST=localhost
USER=root
PASSWORD=password

webpack.config.js 설정

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

//..

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

DefinePlugin?

웹팩에서 제공하는 플러그인으로, 모든 자바스크립트 코드에서 접근이 가능한 전역변수를 선언하기 위해 사용되는 플로그인이다.

전역변수를 지나치게 사용하면 글로벌 네임스페이스가 너무 많은 변수들로 오염되어 유지 보수가 힘들어질 수 있으므로 필요한 상황에서만 사용하도록 하자.

이렇게 설정하고 나면 process.env.[설정한 변수 이름]으로 해당 변수값에 접근해 사용할 수 있다.


Reference

좋은 웹페이지 즐겨찾기