petty09190/ai-scoring-application

Fork 0

Files

吳佩庭 99ff9654d9 實作完整分享、刪除、下載報告功能

2025-09-24 00:01:37 +08:00

4.5 KiB

Raw Blame History

環境變量配置指南

概述

為了讓應用在不同環境中使用不同的域名，我們已經將硬編碼的 localhost URL 改為環境變量配置。

配置方式

1. 創建環境變量文件

在項目根目錄創建 .env.local 文件：

# 應用配置
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

2. 不同環境的配置

開發環境 (`.env.local`)

NEXT_PUBLIC_APP_URL=http://localhost:12024
NEXT_PUBLIC_APP_NAME=AI 智能評審系統 (開發版)

測試環境 (`.env.test`)

NEXT_PUBLIC_APP_URL=https://test.yourdomain.com
NEXT_PUBLIC_APP_NAME=AI 智能評審系統 (測試版)

生產環境 (`.env.production`)

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

技術實現

🔧 配置工具類 (`lib/config.ts`)

創建了統一的配置管理工具：

// 獲取應用基礎 URL
export function getAppUrl(): string {
  // 在客戶端使用 window.location.origin
  if (typeof window !== 'undefined') {
    return window.location.origin
  }
  
  // 在服務端使用環境變量
  return process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:12024'
}

// 生成分享連結
export function generateShareUrl(evaluationId: string): string {
  const baseUrl = getAppUrl()
  return `${baseUrl}/results?id=${evaluationId}`
}

📱 分享組件更新

修改了 components/share-modal.tsx 來使用配置工具：

import { generateShareUrl, getCurrentUrl } from "@/lib/config"

// 生成分享連結
const shareUrl = evaluationId 
  ? generateShareUrl(evaluationId)
  : getCurrentUrl()

使用說明

🚀 開發環境設置

複製環境變量範例
```
cp env.example .env.local
```
修改配置 編輯 .env.local 文件，設置您的開發環境 URL：
```
NEXT_PUBLIC_APP_URL=http://localhost:12024
```
重啟開發服務器
```
npm run dev
```

🌐 部署到生產環境

設置生產環境變量 在您的部署平台（如 Vercel、Netlify 等）設置環境變量：
```
NEXT_PUBLIC_APP_URL=https://yourdomain.com
```
自動部署 環境變量會在部署時自動生效

功能特色

✨ 智能 URL 生成

客戶端：自動使用當前域名
服務端：使用環境變量配置
回退機制：如果環境變量未設置，使用 localhost:12024

🔄 環境適配

開發環境：使用 localhost
測試環境：使用測試域名
生產環境：使用正式域名

📱 分享功能

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

注意事項

⚠️ 重要提醒

環境變量命名
- 客戶端可用的變量必須以 NEXT_PUBLIC_ 開頭
- 只有 NEXT_PUBLIC_ 前綴的變量才能在客戶端代碼中使用
安全考慮
- 不要在環境變量中存儲敏感信息
- API 密鑰等敏感數據使用服務端專用變量
文件忽略
- .env.local 文件已在 .gitignore 中，不會被提交到版本控制

測試驗證

✅ 功能測試

開發環境測試

npm run dev
# 訪問 http://localhost:12024/results
# 測試分享功能，確認 URL 正確

生產環境測試

npm run build
npm run start
# 測試分享功能，確認使用生產域名

🔍 驗證方法

檢查分享連結是否使用正確的域名
驗證 QR Code 是否包含正確的 URL
測試郵件分享是否使用正確的域名

故障排除

🐛 常見問題

環境變量不生效
- 確認變量名以 NEXT_PUBLIC_ 開頭
- 重啟開發服務器
- 檢查 .env.local 文件位置
分享連結錯誤
- 檢查 NEXT_PUBLIC_APP_URL 是否正確設置
- 確認 URL 格式正確（包含 http:// 或 https://）
部署後 URL 不正確
- 在部署平台設置環境變量
- 確認變量名稱和值正確

結論

通過環境變量配置，分享功能現在可以在不同環境中使用正確的域名，提供更好的靈活性和可維護性。無論是在開發、測試還是生產環境，都能確保分享連結使用正確的 URL。

4.5 KiB Raw Blame History Unescape Escape