NODE_ENV와 REACT_APP_ 환경변수란? + 깃허브 토큰 예제

🤔 환경변수란?

 

환경변수는 프로젝트 전체에서 참조할 수 있는 변수 만들 수 있어 편리하게 이용된다.

 

환경변수로 변수를 선언하시면 JS파일 내에서 지역변수로 선언한 것 과같이 변수를 참조해 올 수 있다.

기본적으로 NODE_ENV라는 환경변수가 있고,

필요에따라 REACT_APP_으로 시작하는 다른 환경 변수들도 설정할 수 있다.

이 둘에 대한 이야기는 아래에서 각각 더 자세히 다룬다.

 

 

---

💡 NODE_ENV는 현재의 모드를 가르킨다

 

Node.js의 express 서버를 실행할 때 필요한 변수이다.

NODE.ENV는 지금 돌아가고 있는 어플리케이션의 모드를 특성화 시키는 환경변수이다.

 

보통은 'development'와 'production' 이 두가지 문자열로 등장한다.

 

아래의 코드를 보면 어떤 식으로 쓰이는지 더 잘 이해가 갑니다. (코드 출처)

 

const { NODE_ENV } = process.env as {[key as string]: string}
// 환경변수의 경우 반환값이 항상 string입니다.

const isPro = NODE_ENV === 'production';
const isDev = NODE_ENV === 'development';
const isTest = NODE_ENV === 'test';

if(isDev){
    // 개발자 모드
}else if(isPro){
    //프로덕션 모드
}else if(isTest){
    //테스트 모드
}else{
    // 에러!!
}

 

지금 내가 npm start로 개발모드 중이냐, 아님 npm build로 배포모드이냐, 아님 npm test로 테스트 모드이냐에 따라

NODE_ENV라는 환경 변수가 각각 모드에 맞게 변하고, 이를 이용해서 다양한 로직을 짤 수 있다.

 

create-react-app으로 리액트 앱 개발을 실행할 경우 

package.json에 자동으로 들어가있는 아래의 부분을 보면 ...

 

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

바로 요기서 어떤 명령어를 실행하냐에 따라 저 ENV변수가 설정될 것이다.

 

App.js에 아래의 코드를 넣고 npm start를 하면

 

console.log(`NODE_ENV = ${process.env.NODE_ENV}`);

 

콘솔창에 'NODE_ENV = development' 가 뜬다.

 

---

📌 리액트 커스텀 환경변수는 REACT_APP_으로 시작

 

NODE_ENV외에도 직접 환경 변수를 지정하여 편하게 꺼내다 쓸 수 있다.

이때에는 꼭 REACT_APP_으로 시작하여 네이밍을 해야한다.

 

아래는  REACT_APP_ 환경변수를 이용해서 토큰을 저장하고, 서버에 요청보낼때 꺼내서 사용하는 예시이다.

 

 

💙 1. 프로젝트 최상위 디렉토리에 .env파일을 생성한다.

 

💙 2. .env파일 내부에 환경변수를 설정한다.

🛑주의
- 변수명은 반드시 REACT_APP_ 키워드로 시작한다.
-쌍따옴표, 작은 따옴표, 띄어쓰기 모두 ❌ (대문자로작성하고 띄어쓰기는 언더바(_)사용)

 

💙 3. 서버에 요청보낼 파일내에서 process.env.[변수명]로 접근해서 값을 가져온다.

 

import { graphql } from '@octokit/graphql';
const { REACT_APP_GITHUB_AGORA_STATES_TOKEN, NODE_ENV } = process.env; //📌

async function getRepository() {
  let token;
  //📌NODE_ENV 환경 변수 활용 'production'일때는 token에 아무것도 할당되지 않아서 번들에 포함안됨
  if (NODE_ENV === 'development' || NODE_ENV === 'test') {
    token = REACT_APP_GITHUB_AGORA_STATES_TOKEN;
  }

  const { repository, viewer } = await graphql(
    `
      {
        repository(owner: "codestates-seb", name: "agora-states-fe") {
          discussionCategories(first: 100) {
            edges {
              node {
                id
                name
              }
            }
          }
          discussions(first: 100) {
            edges {
              node {
                category {
                  name
                }
                author {
                  login
                  avatarUrl
                }
                createdAt
                title
                id
                updatedAt
                bodyHTML
                url
                answer {
                  author {
                    login
                    avatarUrl
                  }
                  bodyHTML
                  createdAt
                  id
                }
              }
            }
          }
        },
        viewer{
          login
          avatarUrl
        }
      }
    `,
    {
      headers: {
        authorization: `token ${token}`, //📌
      },
    }
  );
  return {repository, viewer};
}

export default getRepository;

💡참고:

-위 코드에서는 graphQL의 쿼리를 로컬 환경에서 쉽게 수행할 수 있게 도와주는 라이브러리 octokit/graphql을 사용하고 있다.
-서버로 부터 받아올 때는 async와 await꼭 써줘야한다. (함수가 실질적으로 쓰이는 곳엔 useEffect와  then,catch이용)
-Github GraphQL Explorer를 사용하여 깃허브 데이터를 받아오는 실습을 할 수 있다.
-실습해보고 코드에 적용할땐, 깃허브>settings>developer settings> 토큰이 필요하다. 

 

 

💙 4. 깃허브에 올릴 때는 꼭  .env 파일을 추가하여 비밀정보가 노출되지 않도록 한다.

 

 

---

🔥 그 밖의 .env 활용

 

env 파일 자체를 나누어, 각각 모드에따라 다른 환경 변수가 설정되도록 할 수 있다.

더 자세한 내용은 링크 참고 (https://han-py.tistory.com/441)

.env	기본
.env.local	기본 .env를 덮어쓰는 파일, Test를 제외한 모든 환경에서 로딩됨
.env.development	개발 환경(npm start)에서 로딩
.env.test	테스트 환경(npm test)에서 로딩
.env.production	배포 환경(npm run build)에서 로딩

 

또 이러한 파일은 각 명령어에서 다음의 우선순위를 적용받는다.

npm start	env.development.local >  .env.local > .env.development > .env
npm run build	.env.production.local > .env.local > .env.production > .env
npm test	env.test.local > .env.test > .env (note .env.local is missing)

 

---

💙참고자료

Adding Custom Environment Variables

What is NODE_ENV in Node.js ?