Reactでfirebaseのconfig.jsファイルにあるappIdとstorageBucketを隠す方法【備忘録】

初めに

初心者です。
ある日Reactの勉強のためfirebaseを使用し個人をアプリを作成。
知人にレビューしてもらったところappIdとstorageBucketが公開されており隠す必要があると指摘を受けました。
どうやらセキュリティ的にかなりまずいと...

公開しないようにするには

ズバリ環境変数を使用して解決しました。

1　.rootディレクトリ直下に.envファイルを作成

root/
├ src/
　│　└ firebase/
　│　　　└ config.js/
├ env

2 .envファイルの中身を以下のように記述

create react appの公式サイトを見るとReactで環境変数を作る前はREACT_APP_を変数の頭に記載する必要があるため変数名1つ1つに加える。

.env

REACT_APP_apiKey="AAAAAAAAAAAAAAAAAAAA"
REACT_APP_authDomain= "BBBBBBBBBBBBBB"
REACT_APP_projectId="CCCCCCCCCCCCCCC"
REACT_APP_storageBucket="DDDDDDDDDDDDDD"
REACT_APP_messagingSenderId="EEEEEEEEEEE"
REACT_APP_appId="1:1111111111:web:1111111111111"
REACT_APP_measurementId="FFFFFFFFFFFF"

3 環境変数を使ってconfig.jsファイルappId等を記述する

他のファイルで環境変数を呼び出す際は変数名の前にprocess.env.を加えてあげればいい

.src/firebase/config.js

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};

export {firebaseConfig};

最後に忘れずに.envファイルを.gitigoreに加えてあげる

.gitignore

/node_modules
/.pnp
.pnp.js
/coverage
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
.env

これでGithubに載せた時に環境変数のおかげでappIdとstorageBucketが公開されないようになりましたね！

参考：Create React App
https://create-react-app.dev/docs/adding-custom-environment-variables/#referencing-environment-variables-in-the-html