個人開発をしている過程で、firebase.jsのアクセスキー情報を
Githubに公開してしまっていることに気づき、対処したときの流れです。
webアプリはGithubからNetlifyでビルドして公開しています。
キー情報のみ非公開にしてビルドする時にかなり詰まったので備忘録。
私は独学でNext.jsを使って個人開発をしているのですが、「キー情報を公開してはいけない」
っていう認識がそもそも抜けていて、何も考えずにGithubにpushしていましたw
その状態で初めて完成したwebアプリを無事に公開！やったー
Githubにもコードちゃんと反映できてる！
え、でもGithubにfirebaseのアクセスキーとかそのまま載せてるな・・・？
これってセキュリティ的にいいんだっけ、もしかしてやばい・・・？
え、しかもGithubからもセキュリティのところでなんか言われてるー！
firebase.jsのアクセスキーとかもろもろ非公開にしなきゃ！ってなりました。
あせあせしながらwebで検索していると↓この記事に遭遇
これ読んで、キー情報だけ非公開にする方法を理解しました。
内容を要約すると
「.env」っていう隠しファイル作ってこの中にキーを格納
変数として設定して、firebase.jsで変数名を記述すれば直接キーを記述しなくてよくなる！
そして.envは.gitinoreファイルでgithubにpushされないように設定すればよい！
なるほどー！！これだ！ってなりました。
スクール通っていた時に.envファイル作成する手順は踏んでいたのですが、
とりあえずこれ作っておいて、みたいに教材に書かれていたので、意味は全くわかっていませんでしたが、
今回で.envの意味がやっとわかりました。
次からは外部に出したくないキー等は.envファイルに入れる癖をつける
そして記事に書いている通りに.envに
REACT_APP_FIREBASE_API_KEY=xxxxxxx
などのキー情報をつらつらと書いて保存！
.gitinoreにも.envを読み込まないように記述して、gitにpush！
Netlifyでビルド開始！
・・・エラー・・・・・・・・
環境変数が定義されてないよ！って怒られました。
原因は以下でした。
①「.env」ファイルに追加した「REACT_APP_」はReactの記述。
私はNext.jsで作ってたから「NEXT_PUBLIC_」を先頭につけないといけない
②「next.config.mjs」に以下のコードを記述
環境変数の前に「process.env.」を先頭につけることが重要。これがないと読み込まない。
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
env: {
NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
NEXT_PUBLIC_FIREBASE_PROJECT_ID:
process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID:
process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
NEXT_PUBLIC_FIREBASE_APP_ID: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID:
process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
},
output: "export",
};
export default nextConfig;
③「firebase.js」を以下のように変更
ここでも環境変数の前に「process.env.」を先頭につけることが重要。
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
この記述でビルドが上手く行きました。あーよかった。
それから、Githubに公開したfirebase.jsのコードを削除できないか検索
なんか問い合わせないとむりっぽい・・・めんどう・・・、そんな時↓
この記事見つけて、新しいリポジトリ作ってそっちにコードを移動(個人開発だからできたことかも)
古いリポジトリの履歴からアクセスキーが見えてしまっていたので、非公開に設定
これで無事にアクセスキー非公開にしてGithubからも見えなくすることができました！
最後の新しいリポジトリに移動させるのは個人開発だからできたことかもしれませんが、
「.env」ファイルでキーを管理する記述は実務でも使う方法(のはず)なので、これからは機密情報の取り扱いは気をつけようと思います。