Day 26｜：保護我的 AI Recipe 網站

前幾天已經完成 AI API 串接，也逐步增加了網站功能。

不過，當網站開始使用外部 AI 服務時，有一個非常重要的問題不能忽略：API 金鑰安全性。

一、為什麼不能公開 API 金鑰？

API 金鑰就像是使用服務的通行證。

如果直接把金鑰寫在前端 JavaScript，例如：

const apiKey = "我的API金鑰";

使用者就可能透過瀏覽器開發者工具查看程式碼，進而取得金鑰。

因此，不能將真正的 API 金鑰放在公開的前端程式碼中。

二、使用環境變數

前面已經建立 .env 檔案，可以將金鑰放在裡面：

DIFY_API_KEY=你的API金鑰

後端透過：

process.env.DIFY_API_KEY

讀取金鑰。

另外，還要建立 .gitignore：

.env
node_modules/

這樣就能避免不小心將環境變數檔案和套件資料夾提交到 Git。

三、部署時也要注意

網站部署到雲端時，不能只把 .env 上傳，而是應該到部署平台的環境變數設定中，重新加入需要的金鑰。

此外，也要避免在錯誤訊息或公開紀錄中輸出完整金鑰。

四、今天的成果

今天重新檢查 API 金鑰的存放方式，也了解前端與後端在安全性上的差異。

雖然這些設定不會直接改變網站畫面，但對真正要公開使用的網站來說非常重要。

下一篇就要將 AI Recipe 部署到網路上，讓其他人也能透過網址開啟網站！