ai-scoring-application/ENV_CONFIG_IMPLEMENTATION.md

環境變量配置實現總結

完成的修改

🔧 創建配置工具類

文件：lib/config.ts

創建了統一的配置管理工具，包含以下功能：

1. getAppUrl() - 獲取應用基礎 URL

   • 客戶端：自動使用 window.location.origin
   • 服務端：使用環境變量 NEXT_PUBLIC_APP_URL
   • 回退：如果未設置環境變量，使用 http://localhost:12024

2. generateShareUrl(evaluationId) - 生成評審結果分享連結

   • 自動組合基礎 URL 和評審 ID
   • 格式：{baseUrl}/results?id={evaluationId}

3. getCurrentUrl() - 獲取當前頁面 URL

   • 客戶端：使用 window.location.href
   • 服務端：使用基礎 URL

4. getAppName() - 獲取應用名稱

   • 使用環境變量 NEXT_PUBLIC_APP_NAME
   • 回退：AI 智能評審系統

📱 更新分享組件

文件：components/share-modal.tsx

修改了分享組件來使用新的配置工具：

// 舊的硬編碼方式
const shareUrl = evaluationId 
  ? `${window.location.origin}/results?id=${evaluationId}`
  : window.location.href

// 新的環境變量方式
const shareUrl = evaluationId 
  ? generateShareUrl(evaluationId)
  : getCurrentUrl()

📋 創建環境變量範例

文件：env.example

提供了環境變量配置範例：

# 應用配置
NEXT_PUBLIC_APP_URL=http://localhost:12024
NEXT_PUBLIC_APP_NAME=AI 智能評審系統

# 資料庫配置
DB_HOST=localhost
DB_PORT=3306
DB_NAME=ai_scoring
DB_USER=root
DB_PASSWORD=

# AI 配置
GEMINI_API_KEY=your_gemini_api_key_here

使用方式

🚀 開發環境

1. 創建環境變量文件

   cp env.example .env.local
   

2. 編輯配置

   # .env.local
   NEXT_PUBLIC_APP_URL=http://localhost:12024
   NEXT_PUBLIC_APP_NAME=AI 智能評審系統
   

3. 重啟服務器

   npm run dev
   

🌐 生產環境

在部署平台設置環境變量：

NEXT_PUBLIC_APP_URL=https://yourdomain.com
NEXT_PUBLIC_APP_NAME=AI 智能評審系統

技術優勢

✨ 智能適配

• 客戶端渲染：自動使用當前域名，無需配置
• 服務端渲染：使用環境變量，支援不同環境
• 回退機制：確保在任何情況下都能正常工作

🔄 環境靈活性

• 開發環境：http://localhost:12024
• 測試環境：https://test.yourdomain.com
• 生產環境：https://yourdomain.com

📱 功能完整性

• 分享連結：使用正確的域名
• QR Code：包含完整的 URL
• 郵件分享：使用配置的域名

測試驗證

✅ 功能測試

1. 開發環境

   • 分享連結應該使用 http://localhost:12024
   • QR Code 包含正確的 URL

2. 生產環境

   • 分享連結使用生產域名
   • 所有分享功能正常工作

🔍 驗證步驟

1. 點擊分享按鈕
2. 檢查分享連結的域名
3. 測試 QR Code 掃描
4. 驗證郵件分享功能

注意事項

⚠️ 重要提醒

1. 環境變量命名

   • 必須使用 NEXT_PUBLIC_ 前綴才能在客戶端使用
   • 變量名稱區分大小寫

2. 文件安全

   • .env.local 不會被提交到版本控制
   • 敏感信息不要放在客戶端環境變量中

3. 部署配置

   • 確保在部署平台正確設置環境變量
   • 重啟服務器使環境變量生效

結論

通過環境變量配置，分享功能現在具備了更好的靈活性和可維護性：

• ✅ 支援多環境部署
• ✅ 自動適配客戶端和服務端
• ✅ 提供回退機制確保穩定性
• ✅ 保持向後兼容性

現在您可以在不同環境中使用正確的域名進行分享，無需修改代碼！