[프로젝트 배포] netlify 배포 시 api key 환경 변수를 설정하는 방법

리액트 프로젝트를 netlify 배포하고 url 접속했는데 api key 못 가져오는 문제가 발생하여 이를 해결하기 위해 구글링 하다가 netlify 환경 변수를 설정해야 된다는 것을 알아서 내용을 정리하여 작성했다.

 

1. netlify 사이트에 접속하여 로그인 후 아래의 화면이 나온다. (아래의 이미지는 필자의 화면)

2. "Sites" 에서 설정하고 싶은 프로젝트를 클릭한다.

3. 프로젝트를 클릭하면 아래의 이미지처럼 나온다.

4. "Domain settings" 클릭한다. (아래의 이미지 참고)

5. "Domain settings" 클릭하고 왼쪽 메뉴에서 "Environment variables > Add a variable > Add a single variable" 이 순서대로 클릭한다. (아래의 이미지 참고)

6. 클릭하면 아래의 이미지처럼 보인다. "Key, Value" 입력하고 "Create variable" 클릭하면 환경 변수가 만들어진다. .env 파일에 작성했던 것을 입력하면 된다. (예시: REACT_APP_KEY=1234567890 이라면 Key: REACT_APP_KEY / Value: 1234567890 이렇게 입력하면 된다. "=" 작성하지 않는다.)