create-react-app env 파일 undefined로 읽히는 문제

목차

• 상황
• 해결책

 

상황

 

api key를 숨기기 위해 api key를 담은 .env 파일을 최상위 디렉토리에 추가, .gitignore에 .env를 추가하여 원격 저장소에 푸시하고 빌드하는 상황.

 

이상하게도 process.env 로 api key를 호출하려 하였으나 계속 undefined만 출력되는 문제가 발생.

 

const fetch_data = async () => {
    const api_key = process.env.APIKEY;
    console.log(api_key);
    
    // 데이터 가져오기
    const url = `api 주소`
    const result = await fetch(url);
    const json = await result.json();
    console.log(json);
  }

 

 

 

해결책

 

결론부터 말하면,

create-react-app에서 환경변수는 반드시 'REACT_APP'으로 시작해야 앱에서 인식하므로 .env 파일에 변수명 앞에 'REACT_APP'을 붙여야 한다.

 

그래도 출력되지 않으면?

 

npm 서버를 재실행시켜야 한다. create-react-app으로 앱을 실행하면 코드를 재작성하고 저장하면 자동으로 앱이 재빌드되고 재실행되어 .env파일도 다 같이 읽힐듯하지만 .env 파일은 서버를 켤 때 한번 참조되므로 env 파일을 수정했다면 서버를 재실행시켜야 수정된 내용을 인식할 수 있다.

 

dotenv 모듈을 설치하지 않아 발생하는 문제로 생각했으나 dotenv 모듈 없어도 환경변수를 생성하고 사용 가능하다.

creat-react-app은 환경변수를 사용하기 위해 dotenv 모듈을 이미 사용하고 있다. 또 다시 dotenv 모듈을 설치할 필요 없다.

 

 

.env 파일

 

코드

const fetch_data = async () => {
    const api_key = process.env.REACT_APP_APIKEY;
    console.log(api_key);
    
    const url = `api 주소`;
    const result = await fetch(url);
    const json = await result.json();
    console.log(json);
  }

 

성공

 

 

 

출처

https://create-react-app.dev/docs/adding-custom-environment-variables/

https://m.blog.naver.com/legend25/222033372402