163 lines
3.7 KiB
Markdown
163 lines
3.7 KiB
Markdown
# 環境變量配置實現總結
|
||
|
||
## 完成的修改
|
||
|
||
### 🔧 創建配置工具類
|
||
|
||
**文件：`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`**
|
||
|
||
修改了分享組件來使用新的配置工具：
|
||
|
||
```typescript
|
||
// 舊的硬編碼方式
|
||
const shareUrl = evaluationId
|
||
? `${window.location.origin}/results?id=${evaluationId}`
|
||
: window.location.href
|
||
|
||
// 新的環境變量方式
|
||
const shareUrl = evaluationId
|
||
? generateShareUrl(evaluationId)
|
||
: getCurrentUrl()
|
||
```
|
||
|
||
### 📋 創建環境變量範例
|
||
|
||
**文件：`env.example`**
|
||
|
||
提供了環境變量配置範例：
|
||
|
||
```bash
|
||
# 應用配置
|
||
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. **創建環境變量文件**
|
||
```bash
|
||
cp env.example .env.local
|
||
```
|
||
|
||
2. **編輯配置**
|
||
```bash
|
||
# .env.local
|
||
NEXT_PUBLIC_APP_URL=http://localhost:12024
|
||
NEXT_PUBLIC_APP_NAME=AI 智能評審系統
|
||
```
|
||
|
||
3. **重啟服務器**
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 🌐 生產環境
|
||
|
||
在部署平台設置環境變量：
|
||
|
||
```bash
|
||
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. **部署配置**
|
||
- 確保在部署平台正確設置環境變量
|
||
- 重啟服務器使環境變量生效
|
||
|
||
## 結論
|
||
|
||
通過環境變量配置，分享功能現在具備了更好的靈活性和可維護性：
|
||
|
||
- ✅ 支援多環境部署
|
||
- ✅ 自動適配客戶端和服務端
|
||
- ✅ 提供回退機制確保穩定性
|
||
- ✅ 保持向後兼容性
|
||
|
||
現在您可以在不同環境中使用正確的域名進行分享，無需修改代碼！
|