jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-vocab-learning/note/ENV_SETUP_SECURE.md

4.7 KiB
Raw Blame History

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

🎯 為什麼使用環境變數？

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

📋 Step 1: 取得 Supabase 資訊

1.1 登入 Supabase Dashboard

# 在瀏覽器中開啟:
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 配置檔案

# macOS 預設使用 zsh
nano ~/.zshrc

# 如果使用 bash
nano ~/.bashrc

2.2 在檔案末尾加入 (請替換實際值)

# ================================
# 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 重新載入環境變數

source ~/.zshrc
# 或
source ~/.bashrc

2.4 驗證設定

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

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

3.1 建立前端環境變數檔案

# 建立前端環境變數 (從系統環境變數讀取)
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 或者使用腳本自動生成

# 自動從環境變數生成前端配置
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 重新啟動後端

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

4.2 檢查啟動日誌

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

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

4.3 測試 API 端點

# 測試健康檢查
curl http://localhost:5000/health

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

🚨 常見問題解決

❌ 環境變數沒有生效

# 檢查是否正確載入
echo $DRAMALING_SUPABASE_URL

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

❌ 資料庫連接失敗

# 檢查連接字串格式
echo $DRAMALING_DB_CONNECTION

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

❌ JWT 驗證失敗

# 檢查 JWT Secret 是否正確
echo "JWT Secret length: ${#DRAMALING_SUPABASE_JWT_SECRET}"
# 應該是很長的字串 (>100 字元)

🎯 完成後的效果

✅ 安全性

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

✅ 功能性

  • 後端可以連接真實的 Supabase 資料庫
  • 前端可以使用 Supabase 認證
  • API 可以驗證用戶身份

✅ 開發體驗

  • 一次設定，長期使用
  • 團隊成員各自配置
  • 符合業界最佳實踐

📞 需要協助

您現在需要:

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

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