firebaseのコンソールでアプリを追加をすると、API keyやauthDomainなどが含まれるfirebaseConfigが作成され、我々開発者はそれをコピーして、firebase.jsのようなファイルを作成し、そこに貼り付けて、コンポーネントでimportするなどをしてfirebaseを利用します。
ただ、これをそのままgithubにpushしてしまうとapi keyなどの情報が漏れてしまい、不正利用されるなんてこともあるかもしれません。
そこで、.envファイルを作成してgitignoreすることで、githubに公開してしまうのを防ぐことができるので、その方法について説明します。
今回はreactで開発している前提で説明します。
また、firebaseConfigをfirebase.jsに記述しているものとして進めていきます。
.envファイルをrootディレクトリに作成
まずは.envファイルを作成します。
場所はpublicやbuildなどと同じ、rootディレクトリです。
作成したら.envファイルにfirebaseのapi keyなどの公開したく無い情報を記述します。
REACT_APP_FIREBASE_API_KEY=xxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxx
REACT_APP_FIREBASE_DATABASE_URL=xxxxxxx
REACT_APP_FIREBASE_PROJECT_ID=xxxxxxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxxxxxx
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=xxxxxxx
REACT_APP_FIREBASE_APP_ID=xxxxxxx
環境変数のkeyには注意しよう
reactの場合は環境変数のkey、つまりREACT_APP_FIREBASE_API_KEYなどの公開したく無い情報を代入される側はREACT_APP_で始める必要があります。
このように記述しないと、firebaseの読み込みが行われません。
逆にいうと、reactの場合、REACT_APP_で始めることで、.envファイル内の記述が特に設定をすることもなく読み込んでくれます 😎
firebase.jsの記述はどうなる？
さて.envファイルが完成したので、firebaseConfigの中身を変更しましょう。
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
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
})
先ほど.envで設定した変数を利用しているだけです😅
.gitignoreに.envを追加して完成！！
最後は.gitignoreに.envと記述して終わりです！！
これで、githubに公開されなくなったはずです。
ちなみにfirebaseはめっちゃ親切なので、もし、githubなどの外部に公開してしまった場合は速攻でメールを送ってくれます。