[react]APIキーを非表示にする

今回チームプロジェクトを行ったときに作成した投稿
Firebaseプラットフォームを使用するには、API keyコードを襟に置かない方法が必要です.
最初はAPI keyを含むコードを排除したいと思っていましたが、一人で仕事をしているわけではありません.
チームがコードを共有する必要がある場合なので、いろいろな方法を考えて、私の解決方法を共有します.

.envファイルの作成

プロジェクトの最上位パス上に.envが生成され、Firebaseから発行されたAPI keyコードが転送される.
(※your-api-keyを削除して隠したいAPI keyを作成すればよい.)

// .env
...
REACT_APP_FIREBASE_API_KEY='<your-api-key>'
...

Firebaseコードの変更

.envファイルに作成されたAPI keyを読み込むには、process.env.<작성한 Name>を読み込む必要があります.

// firebase.js
const firebaseConfig = {
...
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
...
};

.gitignoreコードの追加

最後に.envファイルをGitHubにアップロードします.envファイルパスコードを追加します.

// .gitignore
...
.env
...

以上は簡単なgooglingで検索する方法ですが、
困っている人に役立つように、自分で解決する方法をこんなに短い記録に書きました.
(番外)Firebaseは、API keyだけでなく、他のコードを非表示にする必要がある場合があります.
参考までに使用したコードフォーマットを共有します.

// firebase.js
...
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};
...