なぜあなたのOpenAI APIキーは突然使えなくなったのか？

Vercelでウェブサイトをデプロイする方法を学んだ後、ChatGPT APIを接続したクールなサイトを作成し、GitHubにPushしたかもしれません。 10分後、OpenAIから警告メールが届きます：「🚨 あなたのAPIキーが公開GitHubに流出したことを検知しました。アカウント保護のため、このキーを強制的に無効化しました！」

この時初めて気付くのです - あなたはコード(app.jsやpage.tsx)に貴重なsk-proj-xxxxxxxxパスワードを直接書き込んでいたことを！

ソフトウェアエンジニアリングの世界では、これを「裸奔(はだかで走る)」と呼びます。データベースパスワードが漏れた場合、ハッカーはデータベースにログインしてデータを削除し、あなたを脅迫するかもしれません。AWSサーバーパスワードが漏れた場合、ハッカーはあなたのアカウントでマイニングを行い、翌日数十万円の請求書が届くかもしれません！

このような破滅的な悲劇を防ぐため、世界中のエンジニアが共同で一つのメカニズムを発明しました：環境変数(Environment Variables)。

環境変数とは？コードとパスワードの「完全分離」

環境変数の核心概念は非常にシンプルです：「すべての機密パスワードを.envという隠しファイルに集中して記述する。そして、このファイルは絶対にGitHubにアップロードしない！」

実践ステップ1：`.env`ファイルを作成

プロジェクトの最外層（通常はpackage.jsonと同じ階層）に、.env（またはNext.jsでは.env.local）という名前のファイルを作成します。中身は次のようになります：

OPENAI_API_KEY=sk-proj-あなたの本物のキー
DATABASE_PASSWORD=あなたの超強力パスワード
NEXT_PUBLIC_API_URL=https://api.example.com

実践ステップ2：コードで呼び出す

JavaScript/TypeScriptコードでは、もはやパスワードを直接書き込むことはありま��ん。代わりにこの呪文で環境変数を「召喚」します：

// 間違った書き方 (破産の道)
// const apiKey = "sk-proj-123456789"; 

// 正しい書き方 (隠し金庫から読み取る)
const apiKey = process.env.OPENAI_API_KEY;

これにより、あなたのコードは「空の殻」になります。金庫から物を取ることは知っていますが、金庫の中身は知らないのです。

実践ステップ3：`.env`をブラックリストに追加 (`.gitignore`)

これが最も重要なステップです！Gitというタイムマシンが.envファイルをスナップショットに保存するのを厳密に禁止しなければなりません。プロジェクト内の.gitignoreファイル（通常フレームワークが作成してくれます）を開き、次の行があることを確認してください：

.env
.env.local

この行があれば、Gitはこれらのファイルを透明人間として扱います。CommitやPushを何度クリックしても、これらのパスワードはあなたのコンピュータのハードディスクに静かに留まり、決してGitHubに飛んでいくことはありません！

クラウドの金庫：Vercelの環境変数設定

ここまで読んで、あなたはある疑問に気付くかもしれません：「待って、もしパスワードがGitHubにアップロードされていないなら、VercelがGitHubからコードを取得してビルドするとき、パスワードを読み取れないのでは？そうすると私のサイトは公開後に動かなくなるのでは？」

これは非常に賢くて致命的な質問です！

その通り、Vercelは確かに.envを取得できません。したがって、あなたは自らVercelの管理画面に行き、手動でパスワードを渡す必要があります。これは店の鍵を信頼できる店長に直接手渡すようなものです。

Vercelダッシュボードにログインし、プロジェクトをクリックします。
上部の**Settings(設定)**をクリックします。
左メニューで**Environment Variables(環境変数)**を見つけます。
ここに入力欄があります：
- Key(名前)：OPENAI_API_KEYと入力
- Value(値)：本物のパスワードsk-proj-...を貼り付け
**Save(保存)**をクリックします。

🚨 Vercelの隠れた落とし穴：再デプロイ(Redeploy) Vercelで環境変数を追加または変更した後、それはすぐには有効になりません！ Vercelのロボットは「ビルド(Build)の瞬間」にパスワードを挿入するからです。したがって、手動で再ビルドをトリガーする必要があります：上部メニューでDeploymentsをクリックし、最新の記録を見つけて右側の三点リーダー...をクリックし、**Redeploy(再デプロイ)**を選択します。

約1分待ってビルドが完了すると、あなたのクラウドサイトはキーを安全に読み取り、正常に動作するようになります！

Vibe Prompt実践：AIにセキュリティ脆弱性をチェックしてもらう

初心者として、数百行のコードの中でうっかりパスワードを直接書き込んでしまい、気付かないことがあります。 GitHubにPushする前に、カーソルに向かってこの究極のセキュリティ保護呪文を唱えてください：

【セキュリティ脆弱性スキャンPrompt】 このプロジェクトを公開GitHubにPushしようとしています。プロジェクト全体（特にsrc/とapp/フォルダ内のすべてのファイル）をスキャンしてください。

API Key、Token、パスワード(Password)、データベース接続文字列がコード内に「直接記述(Hardcoded)」されていないかチェックしてください。

もしあれば、それらをすべてprocess.env.XXXの環境変数形式に置き換えてください。

.gitignoreファイルをチェックし、すべての.envファイルが無視され、アップロードされないことを確認してください。

Vercelにデプロイする際、管理画面で手動追加が必要な環境変数名(Keys)のリストを作成してください。

このPromptは非常に価値があります！それはあなたの製品が公開される前に、ベテランのホワイトハットハッカーに最終チェックを依頼するようなものです。AIはあなたがうっかり残したすべての弱点を指摘し、あなたのビジネス機密が万全であることを保証します。

次の章では、.vercel.appのような無料のサブドメインから脱却し、あなた専用の威厳あるブランドドメイン(Custom Domain)を取得する方法を教えます！