# 🔐 安全的環境變數設定指南

## 🎯 **為什麼使用環境變數？**

✅ **絕對安全** - 不會被 Git 追蹤
✅ **不會暴露** - Claude Code 看不到
✅ **團隊友善** - 每個人設定自己的金鑰
✅ **生產就緒** - 符合企業級部署標準

---

## 📋 **Step 1: 取得 Supabase 資訊**

### 1.1 登入 Supabase Dashboard
```bash
# 在瀏覽器中開啟:
https://app.supabase.com
```

### 1.2 取得連接資訊
**導航**: Settings → Database
```
Host: db.[your-project-id].supabase.co
Database: postgres
Username: postgres
Password: [您的資料庫密碼]
Port: 5432
```

**完整連接字串格式**:
```
Host=db.[project-id].supabase.co;Database=postgres;Username=postgres;Password=[password];Port=5432;SSL Mode=Require;
```

### 1.3 取得 API 金鑰
**導航**: Settings → API
```
Project URL: https://[your-project-id].supabase.co
anon public: eyJ... (前端用)
service_role secret: eyJ... (後端用)
JWT Secret: (在 JWT Settings 部分)
```

---

## 🔧 **Step 2: 設定環境變數**

### 2.1 編輯 Shell 配置檔案
```bash
# macOS 預設使用 zsh
nano ~/.zshrc

# 如果使用 bash
nano ~/.bashrc
```

### 2.2 在檔案末尾加入 (請替換實際值)
```bash
# ================================
# DramaLing 專案環境變數
# ================================

# 資料庫連接
export DRAMALING_DB_CONNECTION="Host=db.[your-project-id].supabase.co;Database=postgres;Username=postgres;Password=[your-db-password];Port=5432;SSL Mode=Require;"

# Supabase 配置
export DRAMALING_SUPABASE_URL="https://[your-project-id].supabase.co"
export DRAMALING_SUPABASE_SERVICE_KEY="[your-service-role-key]"
export DRAMALING_SUPABASE_JWT_SECRET="[your-jwt-secret]"

# AI 服務
export DRAMALING_GEMINI_API_KEY="[your-gemini-api-key]"

# 前端配置 (如果需要)
export DRAMALING_SUPABASE_ANON_KEY="[your-anon-key]"
```

### 2.3 重新載入環境變數
```bash
source ~/.zshrc
# 或
source ~/.bashrc
```

### 2.4 驗證設定
```bash
# 檢查環境變數是否設定成功 (不會顯示完整值，保護隱私)
echo "Supabase URL: ${DRAMALING_SUPABASE_URL:0:20}..."
echo "DB Connection: ${DRAMALING_DB_CONNECTION:0:30}..."
```

---

## 🎨 **Step 3: 配置前端 (安全方式)**

### 3.1 建立前端環境變數檔案
```bash
# 建立前端環境變數 (從系統環境變數讀取)
cat > frontend/.env.local << EOF
NEXT_PUBLIC_SUPABASE_URL=\$DRAMALING_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=\$DRAMALING_SUPABASE_ANON_KEY
NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_APP_URL=http://localhost:3001
EOF
```

### 3.2 或者使用腳本自動生成
```bash
# 自動從環境變數生成前端配置
echo "NEXT_PUBLIC_SUPABASE_URL=$DRAMALING_SUPABASE_URL" > frontend/.env.local
echo "NEXT_PUBLIC_SUPABASE_ANON_KEY=$DRAMALING_SUPABASE_ANON_KEY" >> frontend/.env.local
echo "NEXT_PUBLIC_API_URL=http://localhost:5000" >> frontend/.env.local
echo "NEXT_PUBLIC_APP_URL=http://localhost:3001" >> frontend/.env.local
```

---

## 🚀 **Step 4: 測試配置**

### 4.1 重新啟動後端
```bash
# 重新啟動 .NET API (會讀取新的環境變數)
./start-dotnet-api.sh
```

### 4.2 檢查啟動日誌
```bash
# 應該看到:
# ✅ 建置成功！
# 🌐 啟動 API 服務...
# info: Microsoft.Hosting.Lifetime[0] Application started

# 如果看到資料庫連接錯誤，表示環境變數有問題
```

### 4.3 測試 API 端點
```bash
# 測試健康檢查
curl http://localhost:5000/health

# 測試 API 認證 (應該返回 401，表示需要認證)
curl http://localhost:5000/api/auth/profile
```

---

## 🚨 **常見問題解決**

### ❌ **環境變數沒有生效**
```bash
# 檢查是否正確載入
echo $DRAMALING_SUPABASE_URL

# 如果是空的，重新執行:
source ~/.zshrc
```

### ❌ **資料庫連接失敗**
```bash
# 檢查連接字串格式
echo $DRAMALING_DB_CONNECTION

# 確認 IP 白名單設定 (Supabase Dashboard → Settings → Database → Network)
```

### ❌ **JWT 驗證失敗**
```bash
# 檢查 JWT Secret 是否正確
echo "JWT Secret length: ${#DRAMALING_SUPABASE_JWT_SECRET}"
# 應該是很長的字串 (>100 字元)
```

---

## 🎯 **完成後的效果**

### ✅ **安全性**
- 沒有任何機密資訊在專案檔案中
- Git 只會追蹤安全的配置檔案
- Claude Code 無法看到敏感資訊

### ✅ **功能性**
- 後端可以連接真實的 Supabase 資料庫
- 前端可以使用 Supabase 認證
- API 可以驗證用戶身份

### ✅ **開發體驗**
- 一次設定，長期使用
- 團隊成員各自配置
- 符合業界最佳實踐

---

## 📞 **需要協助**

**您現在需要**:
1. 取得 Supabase 專案的實際資訊
2. 按照 Step 2 設定環境變數
3. 告訴我設定完成，我會協助測試

**您準備好開始設定環境變數了嗎？** 🚀