為什麼你的 OpenAI API Key 突然不能用了？

當你學會了用 Vercel 部署網站之後，你可能興高采烈地寫了一個串接 ChatGPT API 的酷炫網站，然後把它 Push 到 GitHub 上。過了十分鐘，你的手機突然收到一封來自 OpenAI 的警告信件：「🚨 我們偵測到您的 API Key 已經外洩到公開的 GitHub 網路上，為了保護您的帳戶安全，我們已經強制撤銷了這把鑰匙！」

這時候你才驚覺，原來你在寫程式的時候，直接把那串價值連城的 sk-proj-xxxxxxxx 密碼，寫死在程式碼 (app.js 或 page.tsx) 裡面了！

在軟體工程界，這被稱為「裸奔」。如果外洩的是資料庫密碼，駭客就可以登入你的資料庫把資料刪光，然後勒索你；如果外洩的是 AWS 伺服器密碼，駭客就可以用你的帳號去挖礦，讓你隔天收到幾十萬台幣的帳單！

為了避免這種傾家蕩產的悲劇，全世界的工程師共同發明了一個機制：環境變數 (Environment Variables)。

什麼是環境變數？程式碼與密碼的「完全隔離」

環境變數的核心概念非常簡單：「把所有敏感的密碼，全部集中寫在一個叫做 .env 的隱形檔案裡。而且，這個檔案絕對不能上傳到 GitHub！」

實戰步驟一：建立 `.env` 檔案

在你的專案最外層（通常是跟 package.json 同一個階層），建立一個名為 .env（或在 Next.js 中常命名為 .env.local）的檔案。裡面長這樣：

OPENAI_API_KEY=sk-proj-你的真實金鑰
DATABASE_PASSWORD=你的超強密碼
NEXT_PUBLIC_API_URL=https://api.example.com

實戰步驟二：在程式碼中呼叫它

在你的 JavaScript / TypeScript 程式碼中，你再也不要寫死密碼了。你要改用這串咒語來「召喚」環境變數：

// 錯誤寫法 (會傾家蕩產)
// const apiKey = "sk-proj-123456789"; 

// 正確寫法 (讀取隱形保險箱)
const apiKey = process.env.OPENAI_API_KEY;

這樣一來，你的程式碼就變成了一個「空殼」，它只知道要去保險箱拿東西，但不知道保險箱裡到底裝了什麼。

實戰步驟三：把 `.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 (重新部署)。

等大約一分鐘打包完成後，你的雲端網站就能夠順利讀取到金鑰，並且安全地運作了！

Vibe Prompt 實戰：讓 AI 幫你檢查資安漏洞

身為新手，有時候你可能在幾百行的程式碼裡，不小心把密碼寫死了卻沒發現。在你要 Push 上 GitHub 之前，請對著 Cursor 詠唱這個終極資安防護咒語：

【資安漏洞掃描 Prompt】 我準備要把這個專案 Push 到公開的 GitHub 上了。請幫我掃描整個專案（特別是 src/ 與 app/ 資料夾下的所有檔案）。

請檢查是否有任何把 API Key、Token、密碼 (Password) 或是資料庫連線字串「明文寫死 (Hardcoded)」在程式碼裡面的狀況。

如果有，請幫我把它們全部抽換成 process.env.XXX 的環境變數寫法。

請幫我檢查 .gitignore 檔案，確保所有的 .env 檔案都已經被忽略，不會被上傳。

請列出一份清單，告訴我等一下去 Vercel 部署時，需要在後台手動新增哪些環境變數名稱 (Keys)。

這個 Prompt 價值連城！它就像是請了一位資深的白帽駭客，在你的產品上線前幫你做最後的把關。AI 會揪出所有你粗心大意留下的破綻，確保你的商業機密萬無一失。

在下一章中，我們將教你如何擺脫 .vercel.app 這種免費的次級網址，換上你自己專屬的、充滿霸氣的品牌網域 (Custom Domain)！