201 lines
4.7 KiB
Markdown
201 lines
4.7 KiB
Markdown
# 🔐 安全的環境變數設定指南
|
||
|
||
## 🎯 **為什麼使用環境變數？**
|
||
|
||
✅ **絕對安全** - 不會被 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. 告訴我設定完成，我會協助測試
|
||
|
||
**您準備好開始設定環境變數了嗎？** 🚀 |