OpenAI API를 사용하기 위해 API_KEY를 발급받고, 저장해야할 일이 생겼다.

그런데 주의해야 할 점! 이를 하드코딩할 경우, 외부에 API_KEY가 노출될 뿐더러, 뒤늦게 소스코드에서 제거한다고 해도 commit 기록에 남아있어 복구가 어렵다는 사실.

때문에 이러한 중요한 변수들을 분리할 필요성을 느꼈다.

환경변수란?

개발환경, 배포환경 등 환경변화에 따라 다른 변수 값을 사용할 수 있도록 어플리케이션으로부터 분리시킨 값이다.

React에서는 별도 라이브러리 없이는 Create-React-App을 이용해 만든 프로젝트의 경우에만 동작한다.

환경변수 사용하기

1. .env 파일을 생성한다.

.env파일을 프로젝트 루트 폴더에 생성한다. 이 때, 파일명에 따라 어떤 환경에서 작동할 것인지, 어떤 우선순위로 작동할 것인지를 정할 수 있다.

• .env: Default
• .env.local: .env 파일을 오버라이드, 테스트 환경에서는 사용되지 않는다.
• .env.development, .env.test, .env.production: 각 실행 환경에서 실행된다.
• .env.development.local, .env.test.local, .env.production.local: 각 실행 환경 파일을 오버라이드한다.

react-scripts에서 정해진 실행, 빌드, 테스트 명령어에 따라 사용할 환경변수 다음의 우선순위가 적용된다. 같은 변수명이 존재할 경우, 최종적으로는 좌측에 있는 파일들의 값이 덮어씌워지는 것이다.

• npm start: .env.development.local > .env.development > .env.local > .env
• npm run build: .env.production .local > .env.production > .env.local > .env
• npm test: .env.test.local > .env.test > .env

그 다음, 파일 내용으로 사용할 변수를 작성하는데, 변수명에 반드시 REACT_APP_을 붙여야 어플리케이션에서 이를 찾을 수 있다.

REACT_APP_BASE_URI=localhost:8000

2. 어플리케이션에서 변수를 불러와 사용한다.

어플리케이션에서는 process.env를 이용해 환경변수에 접근할 수 있다.

BASE_URI = process.env.REACT_APP_BASE_URI

3. .gitignore에 등록한다.

이렇게 만든 .env 파일을 저장소에 올린다면 아무런 의미가 없다. .gitignore에 반드시 등록하도록 하자.

.env는 노출된다?

그런데 Create-React-App의 공식문서 왈,

WARNING: Do not store any secrets (such as private API keys) in your React app!

환경변수는 누구나 접근할 수 있으므로, .env에 API_KEY와 같은 중요한 정보를 올리지 말라고 경고하고 있다.

실제로, 환경변수 중 어플리케이션에 사용된 값은 개발자 도구에 노출됨을 확인할 수 있었다. 때문에 프론트엔드에서는 .env를 보안보다는 환경에 따라 달라지는 변수 값(ex. API_ROOT)을 위한 기능으로만 사용하는 것이 적절하다고 판단되었다.

그렇다면 어떻게?

개발자 도구로 확인할 수 없는 백엔드 서버에 API_KEY를 두고 사용하기를 권장하고 있다.

Django 백엔드 서버를 뒀고, API_KEY를 환경변수를 분리했다. 프론트엔드에서 백엔드로 요청을 보내고, 백엔드에서 API_KEY를 포함해 원하던 OpenAI API로 재요청을 보내도록 구성하였다.