前回の続きでPart3：環境変数の整理 (.env)。プロジェクト内APIの整理。
Part4：予算アラートの設定。GCPで行う、もしもの備え。
今回は「セキュリティを守る編」の完結として、環境変数の徹底管理と、万が一の事態を食い止める「予算アラート」の設定を一気に行います。
FirebaseのAPIキーをソースコードに直書きしたまま、GitHubにプッシュしていませんか？
「個人開発の規模なら大丈夫」という油断が、ある日突然、身に覚えのない高額請求や情報漏洩を招くかもしれません。
せっかく作り上げたアプリも、セキュリティが疎かでは安心して公開できませんよね。
これを済ませれば、枕を高くして眠れる安全な開発環境が手に入りますよ！
前回のおさらい：セクション５(セキュリティロードマップ）
アプリのセキュリティの向上
Part1：Firestore DB セキュリティルールの内容変更。Part2：API Key Restrictions。GCPでのHTTPリファラーとAPI制限を設ける。- Part3：環境変数の整理 (.env)。プロジェクト内APIの整理。
- Part4：予算アラートの設定。GCPで行う、もしもの備え。
Part 3：環境変数の整理（.env）とプロジェクト内APIの整理
AIエージェントへの依頼：複雑なファイル整理をスマートに
Firebaseの初期化設定などは、コードに直接書く（ハードコードする）と管理が面倒なだけでなく、漏洩のリスクも高まります。
今回はAIエージェントを活用して、一気にファイルを整理します。
Firebase設定をソースコード直書きから切り離し、安全に管理できる構成へ改善するフェーズ。
目的
- APIキーなどの設定値をコードから分離し、漏洩リスクを下げる。
やること
.env.localを作成し、Firebase設定値を環境変数として定義。firebase.tsを修正し、process.env.NEXT_PUBLIC_...から値を読み込む形に変更。- Git管理対象外の確認：
.env/.env.localが.gitignoreに含まれているかチェック。
結果
- 設定情報がリポジトリに残らない安全な構成に。
- 本番・開発で設定を切り替えやすくなり、運用性も向上。
実装：.env.local への移行とGitの確認
AIの力を借りつつ、以下の2点を確実に実行します。
- 1. 設定値を環境変数へ切り出す
-
APIキーなどの重要な情報を
.env.localにまとめます。これにより、リポジトリを公開しても重要な鍵は手元のPCにしか残らない状態になります。
アプリケーションに必要なFirebase関連のAPIキーやプロジェクトIDなどの環境変数を.env.localファイルに設定している。 - 2.
.gitignoreの鉄壁チェック： ここが一番重要です！ -
どんなに環境変数に分けても、そのファイルをGitHubなどにアップしてしまったら意味がありません。
.gitignoreファイルに.envや.env.localが含まれているか、必ず自分の目で確認しましょう。機密性の高い環境変数ファイル（.env）を誤ってGitリポジトリにコミットしないよう、.gitignoreに設定を追加している。
完了後のメリット
この整理を行うことで、設定情報がリポジトリに残らない安全な構成になります。
また、将来的に本番環境と開発環境を切り替える際も、環境変数ファイルを入れ替えるだけで済むため、運用性が格段に向上します。
Part4：予算アラートの設定。GCPで行う、もしもの備え。
最後に「もしも」への保険をかける
セキュリティ対策の総仕上げとして、予算アラートを設定します。
これは、万が一Part 1〜3の防御が突破され、APIが大量に消費されたとしても、設定額に達した時点で「スッと」通知が来るようにする最後の保険です。
個人開発において、開発段階で設定額を超える利用がある場合、それは「APIキーの漏洩」か「料金設定の甘いシステムの構築」のどちらかです。いずれにしても、被害を最小限に抑えるためにこの設定は必須と言えます。
5分で完了！予算アラート設定の手順
GCPのコンソールから以下の手順で設定を行います。
- GCPのコンソール画面左の項目欄から「課金」をクリック
- 「課金」コンソール画面の左の項目欄から「予算とアラート」をクリック
- 「予算とアラート」画面の上面のメニューの「+ 予算を作成」をクリック
続いて、予算アラートを作成していきます！
※今回の作成手順は私の行った設定なので、自身の目的に応じた設定を行ってください。
管理しやすい任意の名前を付けます。
「月次」を選択し、自身のプロジェクトを指定します。
他にも「四半期」や「年次」があります。
予算タイプ：指定額
目標金額： 「500円」 に設定します。
これが自分が出せる最大値になります。
デフォルトでは、３段階で設定でき必要に応じて増減して各ポイントを作る事ができます。
Step3での目標金額の50%や90%に達した際、段階的に通知メールが届くようにします。
デフォルトでは請求管理者にしかメールが飛びませんが「プロジェクトのオーナーにもメールを送る」にチェックを入れます。
私の場合は、「請求アカウント」と「プロジェクトアカウント」が違う場合は、オーナー通知をオンにするのがミソです。
設定が完了すると、「予算とアラート」ページに作成した予算が表示されます。
これでセキュリティ編のすべての準備が整いました！
まとめ：安心を手に入れた次のステップへ
今回の成果物
環境変数の整理によってソースコードがクリーンになり、予算アラートによって金銭的な安心感が確保されました。
やったことリスト
SWELLのキャプションボックスなどを使って、振り返りやすくまとめます。
- 環境変数の分離: Firebaseの設定値を
.env.localに移行し、コードから秘匿情報を排除しました。 - APIの整理:
process.envを経由して値を読み込む、安全かつ柔軟な構成に変更しました。 - 予算アラートの設置: GCPで500円の上限設定を行い、段階的な通知設定を完了しました。
- 通知ルートの確保: 請求アカウントとプロジェクトオーナーの両方にメールが飛ぶよう設定しました。
次回予告：いよいよ世界へ！デプロイ編
セキュリティの守りは完璧です。次回はいよいよセクション6：デプロイに移ります。
- Next Step Firebase App Hosting × GitHub 連携による自動デプロイ
書いたコードが、実際にURLを持つ「生きたアプリ」として公開される瞬間を一緒に体験しましょう！
締めの一言
最後まで読んでいただき、ありがとうございました！
この記事が、あなたの個人開発をより安全で楽しいものにする手助けになれば幸いです。
今回の設定で分からないことがあれば、ぜひコメント欄で教えてくださいね。
また、この記事が役に立った！という方は、SNSでのシェアやブックマークをしていただけると、執筆の励みになります！
Tomoya
コメント