react 리액트 설정 dotenv 모듈로 설정변수 활용하기

요새 리액트와 파이어베이스로 게시판을 만들다보니

파이어베이스 설정파일까지 깃허브같은데 올라가게 되는데..

개인계정 정보가 같이 올라가게 되서 

좀 그랬는데 

dotenv 모듈을 활용하면 편리하게 할 수 있다고 해서 찾아보았습니다.

dotenv 개요

react 로 개발을 하면서, 

firebase apiKey, 서비스포트, DB 관련 정보 등 전역으로 필요한 여러 정보들이 존재한다. 

dotenv 패키지를 통해 환경변수 파일을 외부에 만들고, 관리할 수 있다.  

깃허브 등에 오픈소스로 프로젝트를 공개할때, 

해당 정보를 소스코드 내에 하드코딩하지 않고, 

외부 환경변수 파일에 작성하고, .gitignore 을 통해 제외하면 괜찮은 방법인듯 합니다.

설치

yarn add dotenv

사용방법

프로젝트 루트경로에 .env 파일을 생성한다.

파일내부에 필요한 설정정보를 셋업합니다.

REACT_APP_NOT_SECRET_CODE="abcdeffff"

REACT_APP_APIKEY="-CpAQtU"

리액트에서는 REACT_APP으로 시작되어야 인식이 되네여.(첨에 안되서 아래 리액트공식싸이트에 보니)

다른 노드제이에스에서는 암거나 잘됐었는데..

pakage.json에 start 스크립트 뒤에 .env를 붙여준다.(요건 안해도 되는데 가끔 안될때 붙여주니 되서)

실제사용되는 곳에서는 process.env.변수명을 사용한다.

import React, { Component } from "react"; import "./App.css"; import dotenv from "dotenv"; import Sample01 from "./sample01"; import Basic from "./Sample02"; import Selectable from "./Sample03"; dotenv.config(); console.log("test1 " + process.env.NODE_ENV); console.log("test2 " + JSON.stringify(process.env)); class App extends Component { render() { return ( <div className="App">

오 잘찍히네여..

그래서 크롬 개발자도구로 봐보니 오호라 apikey에 실제값이 찍혀서 거시기 했었는데.. 잘되네여..

해당 .env 파일은 깃이그노어 해놓으면 깃허브에 올릴때도 굿잡..ㅎㅎ

참고할 URL이네요

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables