MODULE 6 · 部署 · 6-10

環境變數實戰：如何配置兩套獨立的資料庫與 API Key，不讓測試資料污染真實用戶數據

上一課知道要分兩套環境。這一課用一個聰明的小東西， 讓同一份程式碼自動連到對的家，順便把你的金鑰藏好、不外洩。

§1 · 大哉問

同一份程式碼，怎麼連到兩個不同的家？

🧪
Dev
要連測試資料庫
📄
同一份程式碼
只有一份
🌍
Prod
要連正式資料庫

你不會想為了兩個環境，維護兩份幾乎一樣的程式碼。 一份就好，但要讓它「看情況」連到不同的家。怎麼做到？

§2 · 這是什麼

環境變數：可抽換的設定插槽

用你家牆上的插座來想。

概念
環境變數（Environment Variable）
程式碼裡不寫死真正的值，只留一個「插槽」（變數名稱）。 真正的值，由它所在的環境從外面插進來。
比喻
像同一台電器插不同插座
同一台電風扇（程式碼），插在家裡或公司都能轉。 電從哪來，看你插哪個插座（哪個環境）。
點一個插座，把這台電風扇插上去：
🌀
電風扇（你的程式碼）
🔌
§3 · 另一個名詞

API Key：呼叫外部服務的通行證

🎫
當你的 App 要用別人的服務（金流、地圖、AI…），對方會發給你一串 API Key，當作「通行證」。 你每次呼叫服務都要出示它，對方才知道是你、並跟你算錢。 所以這串 key 等於你的錢包，絕對不能外流。
練習一下：點出下面哪幾行是「不能外洩的祕密」。
設定.js
提示：金鑰（key）和密碼（password）外洩會出事；標題、顏色這種就算公開也無所謂。
§4 · 最常見的災難

把 key 寫死在程式碼裡，會出大事

這段程式碼把 key 直接寫死了。按 push 上 GitHub 看看。

付款.js
// 連到金流服務
const key = "sk-live-9f3a2c8e1b"
§5 · 正確做法

把祕密搬進 .env，程式碼裡只留插槽

按一下，把那串 key 從程式碼搬到一個叫 .env 的小檔案。

付款.js（會上傳）
// 連到金流服務
const key = "sk-live-9f3a2c8e1b"
.env（不會上傳）
（空的）
§6 · 一份程式碼，兩個家

配兩套環境變數，自動連到對的地方

切換 Dev / Prod，看同一份程式碼怎麼接到不同的資料庫與 key。

現在這份程式碼跑在：
同一份程式碼（沒改過）
db = process.env.DATABASE_URL
key = process.env.PAY_KEY
🧪 Dev 的環境變數
DATABASE_URL = 測試資料庫
PAY_KEY = sk-test-...（測試）
程式碼一個字都沒改，只是換了環境，那兩個插槽就被插上不同的值。 Dev 連測試資料庫、刷測試卡；Prod 連正式資料庫、收真錢。兩套井水不犯河水。
§7 · 那 Prod 的值放哪

正式環境的值，貼在平台後台

.env 不上傳，那 Prod 怎麼知道正式的值？答案：你把正式環境的變數， 直接貼在 Hosting 平台的後台（一個專門放環境變數的設定頁）， 不放進程式碼、也不放進 repo。平台會在 Prod 跑的時候，自動把這些值插進去。
一句話：本機的祕密放 .env，正式的祕密放平台後台，程式碼裡永遠只有插槽。
§8 · 試試看

快速檢查一下

答錯不會鎖死，可以一直重選。

答對 0 / 2
Q1

為什麼 API key 不能直接寫死在程式碼裡？

Q2

你想讓同一份程式碼，在測試時連測試資料庫、上線時連正式資料庫。靠什麼？

🎒這一課帶走的
環境變數API Key.env

程式碼裡只留插槽（環境變數），真正的值（資料庫網址、API Key） 放在環境裡：本機放 .env、正式放平台後台，都別進 repo。 一份程式碼，配兩套變數，Dev 與 Prod 自動接到各自的家。

🔑VIBE CODER 秘訣
👀觀察
程式碼裡看到寫死的 key 或網址，就是警訊。祕密要走環境變數，.env 永遠別上傳。
💬怎麼跟 AI 講
交代 AI：「幫我把這些寫死的 key 改成從環境變數讀，並把 .env 加進 .gitignore。」
下一個 Part　程式上線、環境也安全了。接下來讓真實用戶走進你的產品：登入。第一個問題不是技術，而是「該不該一進來就逼人註冊」。
下一課