본문 바로가기

WEB

.env 환경변수 설정

728x90

[초보 주의]  리액트와 node.js 를 사용하여 웹페이지를 만들던 중 .env 파일을 사용하는 경우를 발견했다.
이게 뭐지? 하며 찾아보니 원래 대부분 Api Key 또는 IP는 .env를 통해 환경변수를 사용해서 외부에 노출되는 것을 막는 것이 일반적이라고 한다. 생각해보니 당연한데 생각없이 그냥 만들고 있었다.... 이제 알았으니 사용해보고자 한다.

 

일단 본인이 환경변수를 설정하고자 하는 폴더의 최상단에 .env 파일을 생성한다.
(꼭 .env가 아니어도 괜찮음 근데 env는 포함 되어야함)

 

그후 

npm install dotenv

 

을 통해 dotenv를 설치해줌.

 

이제 .env 파일에 아래와 같이 본인이 원하는 민감한 Key 들을 넣어주면 됨

(COOLSMS를 이용하여 문자 보내는 것을 만드는 중이기에 변수명이 이런거임)

REACT_APP_COOLSMS_API_KEY = '???????'
REACT_APP_COOLSMS_API_SECRET = '????'

 

이제 위에 작성한 값들을 사용하기 위해 실행폴더에서 

require('dotenv').config()

const apiKey = process.env.REACT_APP_COOLSMS_API_KEY;
const apiSecret = process.env.REACT_APP_COOLSMS_API_SECRET;

과 같이 사용하면 된다!!(이때 process는 node.js에 들어 있는 전역객체임)

 

혹여 .env 파일이 github에 올라가는 것을 막기위해 gitignore에 넣어주는 것도 잊지 말자!!

 

dotenv는 .env의 환경변수를 읽어오도록 도와주는 역할을 함. 추가적인 path 설정이 없을 시 .env의 환경변수를 읽어오기 때문에 본인이 .env가 아닌 다른 이름을 사용 시 그 이름을 코드에 넣어줘야함 

ex) 만약 팡리 이름이 .server_env 라면

require('dotenv').config({ path: '.server_env'});