CRA 없이 env 설정하기

dotenv란?

.env파일에 선언한 변수를 process.env로 로드해주는 무의존성 모듈.

os와 path모듈을 통해 .env파일의 절대 경로를 찾고, fs모듈로 .env파일을 읽어들여 process.env에 key-value형식으로 담아준다. dotenv는 이처럼 Node.js의 기본 환경에서 실행되도록 한 패키지이다(무의존성)

React≠Node.js이다. Node.js는 번들링된 파일을 실행할 수 있는 환경을 제공해주는 자바스크립트 런타임이다.

따라서 .env에서 선언한 값을 src폴더 안의 파일들에서 사용하고자 하면 fs 에러가 발생하게 된다. dotenv는 fs, os, path 모듈 사용하여 연결만 해주기 때문이다!

config

config는 .env파일을 읽고, 내용을 파싱하고, 이를 process.env에 넣는다. 옵션을 넘겨줄 수 있다. 여러 옵션 중 가장 사용이 많을 path만 알아보자

Path

.env파일이 있는 위치를 정해주기 위해 사용한다. default값으로는 path.resolve(process.cwd(), '.env') 를 가진다.

parse

어떻게 parsing할지를 정할 수 있다.

dotenv

환경변수로 사용하기

DefinePlugin

파일 어디서든 process.env라는 전역변수에 접근할 수 있도록 정의해주어야 한다. webpack의 DefinePlugin을 사용하면 컴파일 타임에 구성할 수 있는 전역 상수를 만들 수 있다. 문자열로 저장되기 때문에 JSON.stringfy()를 통해 저장하자.

DefinePlugin | 웹팩

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const path = require("path");
const webpack = require("webpack");

require("dotenv").config({
  path: path.join(__dirname, "./.env.development"),
});

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    historyApiFallback: true,
    port: 3000,
    hot: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(process.env),
    }),
  ],
});

이번 프로젝트에서evelopment와 production 모드의 .env를 나누어 작성하여 사용해 보았다.