197 lines
4.5 KiB
Markdown
197 lines
4.5 KiB
Markdown
# 環境變量配置指南
|
||
|
||
## 概述
|
||
|
||
為了讓應用在不同環境中使用不同的域名，我們已經將硬編碼的 localhost URL 改為環境變量配置。
|
||
|
||
## 配置方式
|
||
|
||
### 1. 創建環境變量文件
|
||
|
||
在項目根目錄創建 `.env.local` 文件：
|
||
|
||
```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
|
||
```
|
||
|
||
### 2. 不同環境的配置
|
||
|
||
#### 開發環境 (`.env.local`)
|
||
```bash
|
||
NEXT_PUBLIC_APP_URL=http://localhost:12024
|
||
NEXT_PUBLIC_APP_NAME=AI 智能評審系統 (開發版)
|
||
```
|
||
|
||
#### 測試環境 (`.env.test`)
|
||
```bash
|
||
NEXT_PUBLIC_APP_URL=https://test.yourdomain.com
|
||
NEXT_PUBLIC_APP_NAME=AI 智能評審系統 (測試版)
|
||
```
|
||
|
||
#### 生產環境 (`.env.production`)
|
||
```bash
|
||
NEXT_PUBLIC_APP_URL=https://yourdomain.com
|
||
NEXT_PUBLIC_APP_NAME=AI 智能評審系統
|
||
```
|
||
|
||
## 技術實現
|
||
|
||
### 🔧 配置工具類 (`lib/config.ts`)
|
||
|
||
創建了統一的配置管理工具：
|
||
|
||
```typescript
|
||
// 獲取應用基礎 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` 來使用配置工具：
|
||
|
||
```typescript
|
||
import { generateShareUrl, getCurrentUrl } from "@/lib/config"
|
||
|
||
// 生成分享連結
|
||
const shareUrl = evaluationId
|
||
? generateShareUrl(evaluationId)
|
||
: getCurrentUrl()
|
||
```
|
||
|
||
## 使用說明
|
||
|
||
### 🚀 開發環境設置
|
||
|
||
1. **複製環境變量範例**
|
||
```bash
|
||
cp env.example .env.local
|
||
```
|
||
|
||
2. **修改配置**
|
||
編輯 `.env.local` 文件，設置您的開發環境 URL：
|
||
```bash
|
||
NEXT_PUBLIC_APP_URL=http://localhost:12024
|
||
```
|
||
|
||
3. **重啟開發服務器**
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 🌐 部署到生產環境
|
||
|
||
1. **設置生產環境變量**
|
||
在您的部署平台（如 Vercel、Netlify 等）設置環境變量：
|
||
```bash
|
||
NEXT_PUBLIC_APP_URL=https://yourdomain.com
|
||
```
|
||
|
||
2. **自動部署**
|
||
環境變量會在部署時自動生效
|
||
|
||
## 功能特色
|
||
|
||
### ✨ 智能 URL 生成
|
||
|
||
- **客戶端**：自動使用當前域名
|
||
- **服務端**：使用環境變量配置
|
||
- **回退機制**：如果環境變量未設置，使用 localhost:12024
|
||
|
||
### 🔄 環境適配
|
||
|
||
- **開發環境**：使用 localhost
|
||
- **測試環境**：使用測試域名
|
||
- **生產環境**：使用正式域名
|
||
|
||
### 📱 分享功能
|
||
|
||
- **QR Code**：自動使用正確的域名
|
||
- **分享連結**：包含正確的完整 URL
|
||
- **郵件分享**：使用配置的域名
|
||
|
||
## 注意事項
|
||
|
||
### ⚠️ 重要提醒
|
||
|
||
1. **環境變量命名**
|
||
- 客戶端可用的變量必須以 `NEXT_PUBLIC_` 開頭
|
||
- 只有 `NEXT_PUBLIC_` 前綴的變量才能在客戶端代碼中使用
|
||
|
||
2. **安全考慮**
|
||
- 不要在環境變量中存儲敏感信息
|
||
- API 密鑰等敏感數據使用服務端專用變量
|
||
|
||
3. **文件忽略**
|
||
- `.env.local` 文件已在 `.gitignore` 中，不會被提交到版本控制
|
||
|
||
## 測試驗證
|
||
|
||
### ✅ 功能測試
|
||
|
||
1. **開發環境測試**
|
||
```bash
|
||
npm run dev
|
||
# 訪問 http://localhost:12024/results
|
||
# 測試分享功能，確認 URL 正確
|
||
```
|
||
|
||
2. **生產環境測試**
|
||
```bash
|
||
npm run build
|
||
npm run start
|
||
# 測試分享功能，確認使用生產域名
|
||
```
|
||
|
||
### 🔍 驗證方法
|
||
|
||
- 檢查分享連結是否使用正確的域名
|
||
- 驗證 QR Code 是否包含正確的 URL
|
||
- 測試郵件分享是否使用正確的域名
|
||
|
||
## 故障排除
|
||
|
||
### 🐛 常見問題
|
||
|
||
1. **環境變量不生效**
|
||
- 確認變量名以 `NEXT_PUBLIC_` 開頭
|
||
- 重啟開發服務器
|
||
- 檢查 `.env.local` 文件位置
|
||
|
||
2. **分享連結錯誤**
|
||
- 檢查 `NEXT_PUBLIC_APP_URL` 是否正確設置
|
||
- 確認 URL 格式正確（包含 http:// 或 https://）
|
||
|
||
3. **部署後 URL 不正確**
|
||
- 在部署平台設置環境變量
|
||
- 確認變量名稱和值正確
|
||
|
||
## 結論
|
||
|
||
通過環境變量配置，分享功能現在可以在不同環境中使用正確的域名，提供更好的靈活性和可維護性。無論是在開發、測試還是生產環境，都能確保分享連結使用正確的 URL。
|