React ClientSide에서 환경변수 사용하기

tech

2 years ago

환경변수

프로젝트를 진행하다 보면 외부에 노출되면 안 되는 API KEY, Database URL과 같은 정보를 자주 다루게 됩니다. 그리고 이런 정보들을 전역적으로 사용할 변수들과 함께 전체 프로젝트 내 다양한 환경에서 사용하게 됩니다.

민감한 정보의 경우 Git 혹은 Production 환경에 하드 코딩하여 배포하면 보안에 위험이 될 수 있으므로 주로 .env 파일을 만들어서 환경변수를 사용하고, .gitignore에 등록하여 버전 관리에 포함되는 것을 방지합니다.

.env 사용하기

환경변수를 관리하기 위해서 dotenv 패키지를 주로 사용합니다. dotenv는 .env 파일로부터 process.env 로 환경변수를 불러올 수 있게 도와줍니다. 그리고 CRA(Creact React App)로 시작한 프로젝트라면 기본적으로 dotenv 패키지가 포함되어 있습니다. 또한 REACT_APP*이 환경변수의 이름에 포함되어 있어야 합니다.

# CRA Project .env file

REACT_APP_APIKEY="AeoiwefjFEoijdaodAZ"
REACT_APP_DATABASEURL="https://myproject-001.example.com"
REACT_APP_PROJECTID="myproject-001"

아래와 같이 환경변수를 사용할 수 있습니다.

const App = () => <h3>{process.env.REACT_APP_DATABASEURL}</h3>;

개발, 배포 환경에 맞게 사용할 수도 있습니다.

.env
.env.local
.env.test
.env.development
.env.production

npm 명령어를 실행하면 명령어에 따라서 왼쪽부터 높은 우선순위를 가지고 선택됩니다.

# 왼쪽부터 우선순위를 가지고 있습니다.
# npm run build를 실행할 경우
.env.production.local > .env.local > .env.production > .env

# npm run start를 실행할 경우
.env.development.local > .env.local > .env.development > .env

그리고 .env 파일의 기본 위치는 Root directory 이며 .env 파일의 내용을 수정한다면 다시 빌드를 해야 합니다. 만약에 다른 경로에 있으면 아래와 같이 .config()로 다른 파일을 참조할 수 있습니다.

import path from "path";
require("dotenv").config({ path: "/custom/path/to/.env" });

ClientSide 에서 환경변수 사용하기

환경변수를 사용하기 위해서 Webpack의 DefinePlugin이 Wrap 되어 있는 dotenv-webpack를 사용합니다.DefinePlugin은 컴파일 시점에 전역변수를 생성할 수 있게 도와주고 생성한 전역 변수를 자바스크립트 코드 내에서 사용할 수 있습니다.

# webpack.config.js
const webpack = require('webpack');

module.exports = {
	plugins:[
    	new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify(true),
          VERSION: JSON.stringify('1oha5'),
          #VERSION이라는 전역변수에 1oha5 라는 값이 할당됩니다.
         });
      ],
};

DefinePlugin으로 생성한 환경 변수를 사용할 경우 DefinePlugin이 자바스크립트 코드에서 해당 환경 변수를 찾고 설정한 value로 대체하게 됩니다. 그래서 VERSION.[] 와 같은 방식으로는 접근할 수 없습니다.

이제 dotenv-webpack 패키지를 사용한다면 .env파일에 접근해서 쉽게 .env파일을 읽을 수 있고 필요한 경우 Path만 설정해주면 .env 파일에 설정한 환경 변수를 클라이언트 환경에서 사용할 수 있습니다.

# webpack.config.js

const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

module.exports = {
	plugins:[
    	new Dotenv({
        path: './.env',
    })],
 };

이처럼 DefinePlugin을 활용하여 전역변수로 사용할 값을 넣어주면 클라이언트 사이드에서 해당 변수를 사용할 수 있고 이를 활용한 dotenv-webpack을 사용하여 클라이언트 환경을 위한 환경변수를 설정하고 사용할 수 있습니다.

만약 Gitlab, Vercel, Netlify 그리고 Heroku 같은 플랫폼을 이용해서 프로젝트를 배포할 경우, 해당 플랫폼 내에 환경변수를 등록하여 Runtime과 Buildtime에서 환경변수를 사용할 수 있습니다.

React ClientSide에서 환경변수 사용하기

환경변수

.env 사용하기

ClientSide 에서 환경변수 사용하기

Reference