개요
Gatsby에서 제공하는 react 보일러플레이트로 프로젝트로 진행할 때 .env로 환경변수를 설정하는 방법을 정리해보려 합니다.
환경 변수
환경변수는 OS(Window, 리눅스 등)의 운영체제 레벨에서 관리되는 동적인 값들을 의미합니다.
일반적으로 공개된 코드 저장소에 올라가면 안되는 API Key값이나 DB Password 등의 민감한 정보를 저장하는 용도로 사용합니다.
그렇다면 환경 변수를 어떻게 저장하고 사용할까?
환경 변수를 저장하는 방법에는 두 가지가 있는데 하나는 js파일을 작성하여 불러오는 방법이고 다른 하나는 .env 파일을 이용하는 방벙입니다. 대게 .env를 채택하며 이번 글도 후자의 방법으로 저장할 겁니다.
이렇게 저장된 환경 변수에 접근하기 위해 Node.js에서는 process.env라는 내장 자바스크트 객체를 사용합니다. 이는 전역객체로 어디에서든 접근이 가능합니다.
그럼 이제 본론으로 들어가서 Gastby에서 .env를 활용하여 환경 변수를 저장하는 방법을 알아보겠습니다.
.env 작성
일반적으로 node에서는 production(배포), development(개발), test 환경으로 구분하여 사용합니다. 그러므로 우리도 test 파일까지는 필요없고 .env.production과 .env.development 두 파일을 생성하여 각 환경에 맞게 필요한 정보를 작성하면 됩니다.
Gatsby에서는
npm run develop
npm start위의 명령어 실행은 개발환경으로 인식하여 .env.devlopment에 있는 환경 변수를 사용하고
npm run build위의 명령어 실행은 배포환경으로 인식하여 .env.production에 있는 환경 변수를 사용한다.
환경 변수 값을 저장할 때에는 아래와 같이 key, value로 저장하고 불러올 때는 process.env.keyName으로 불러옵니다.
// prefix에 GATSBY_ 를 꼭 붙여서 key를 설정해야한다.
GATSBY_APP_API_KEY=1234abcdef추가 작업
마지막으로 root에 있는 gatsby-config.* 파일에 아래의 코드를 추가해줍니다.
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});이상 글을 마치겠습니다.
