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 やり直すの忘れない）