create-react-app 에서 GitHub에 커밋할 수 있도록 API 키를 숨기는 방법을 간단히 정리해 둡니다.

① 프로젝트 디렉토리의 루트에 .env 파일 만들기

② .env 파일에서 선택한 API 키 이름에 REACT_APP_를 추가하여 할당합니다.

.env 내에, 이하를 기입.

React_APP_OPENWEATHERMAP_API_KEY = (ここにAPIキーを書く)

※React_APP_ 이쪽을 써 잊지 않는 것.

③ .env 파일을 .gitignore 파일에 추가.

gitignore는 Git에서 사용되는 특수한 파일명으로, 이 파일에 쓰여진 파일은 위에서부터 순서대로 처리되어 Git의 추적 대상에서 제외된다. Git의 추적 대상에서 제외된다는 것은 Git에서 관리하고 있던 디렉토리 안에 있어도 무시된다는 것.

# api keys
.env

④사용하다

process.env 객체를 통해 API 키에 액세스할 수 있습니다.

const APIKEY = process.env.React_APP_OPENWEATHERMAP_API_KEY;

배포 시...

페이지를 배포하기 전에 .env 파일을 삭제하고 플랫폼 키 관리 시스템을 사용합니다.

그 외 주의점

○팀 개발 시 주의점
github에는 오르지 않기 때문에, git pull해도 다른 사람의 환경에는 들어가지 않는다.
API 키는 따로 가르쳐야 한다.

○.env 를 만든 후에는 재기동을 하는 것.
(yarn start 다시 시도하는 것을 잊지 마십시오)