7th_fix port

README.md

@@ -33,6 +33,20 @@
 
 ## 🛠 技術架構
 
+### 端口配置
+
+#### 主要服務端口
+- **前端服務**：Port 12012 (Next.js)
+- **後端 API**：Port 12011 (Flask)
+- **資料庫**：Port 33306 (MySQL)
+
+#### 外部依賴端口
+- **快取系統**：Port 6379 (Redis)
+- **LDAP 服務**：Port 389
+- **郵件服務**：Port 25 (SMTP)
+
+> 📝 **註意**：所有主要服務端口已調整到 12010-12019 範圍內，符合企業環境統一規範。
+
 ### 前端技術棧
 - **框架**：Next.js 14 (React 18)
 - **UI 庫**：Material-UI (MUI) 5
@@ -100,7 +114,7 @@ copy .env.example .env
 # 初始化資料庫
 python init_db.py
 
-# 啟動後端服務
+# 啟動後端服務 (現使用 port 12011)
 python app.py
 ```
 
@@ -116,8 +130,12 @@ npm install
 copy .env.example .env.local
 # 編輯 .env.local 文件
 
-# 啟動開發服務器
+# 啟動開發服務器 (現使用 port 12012)
 npm run dev
+
+# 生產環境部署
+npm run build
+npm run start
 ```
 
 ### 4. 背景任務 (可選)
@@ -139,7 +157,7 @@ celery -A celery_app beat --loglevel=info
 # 資料庫連線
 DATABASE_URL=mysql+pymysql://username:password@host:port/database
 MYSQL_HOST=mysql.example.com
-MYSQL_PORT=3306
+MYSQL_PORT=33306
 MYSQL_USER=your_user
 MYSQL_PASSWORD=your_password
 MYSQL_DATABASE=your_database
@@ -162,33 +180,68 @@ SMTP_SENDER_EMAIL=noreply@example.com
 
 # Redis 設定
 REDIS_URL=redis://localhost:6379/0
+
+# CORS 設定
+CORS_ORIGINS=http://localhost:12012
 ```
 
 #### 前端設定 (frontend/.env.local)
 ```env
-NEXT_PUBLIC_API_BASE_URL=http://localhost:5000/api
+# 後端 API 設定
+NEXT_PUBLIC_API_URL=http://localhost:12011
+NEXT_PUBLIC_BACKEND_URL=http://localhost:12011
+
+# 應用基本設定
 NEXT_PUBLIC_APP_NAME=PANJIT To-Do System
+NODE_ENV=development
+
+# CORS 設定
+NEXT_PUBLIC_ALLOWED_ORIGINS=http://localhost:12012,http://localhost:12011
 ```
 
 ## 📝 部署指南
 
+### Docker 部署 (建議)
+
+```bash
+# 建置 Docker 鏡像
+# 後端
+cd backend
+docker build -t todolist-backend .
+
+# 前端  
+cd frontend
+docker build -t todolist-frontend .
+
+# 啟動容器
+docker run -d -p 12011:12011 --name backend todolist-backend
+docker run -d -p 12012:12012 --name frontend todolist-frontend
+```
+
 ### 生產環境部署
 
 1. **資料庫準備**
-   - 建立 MySQL 資料庫
+   - 建立 MySQL 資料庫 (Port 33306)
    - 執行資料庫遷移腳本
    - 設定資料庫備份策略
 
 2. **應用程式部署**
-   - 設定 IIS 或 Apache 反向代理
+   - 設定反向代理 (Nginx/IIS)
+     - 前端: Port 12012 → 對外 Port 80/443
+     - 後端 API: Port 12011 → 對外 API 路徑
    - 配置 SSL 證書
-   - 設定環境變數
+   - 設定生產環境變數
 
 3. **背景服務設定**
-   - 配置 Celery Windows Service
-   - 設定 Redis 服務自動啟動
+   - 配置 Celery Windows Service  
+   - 設定 Redis 服務自動啟動 (Port 6379)
    - 配置日誌輪轉
 
+4. **環境判斷保護**
+   - 生產環境使用 `NODE_ENV=production`
+   - 自動禁用 HMR WebSocket 連接
+   - 禁用 React DevTools 提示
+
 ## 🔐 權限矩陣
 
 ### 待辦事項權限控制
@@ -294,7 +347,16 @@ A: 檢查 LDAP 設定和網路連線，確認服務帳號權限
 A: 驗證 SMTP 設定，檢查防火牆和郵件伺服器設定
 
 **Q: 前端無法連接後端 API**
-A: 確認 CORS 設定和 API 基礎 URL 配置
+A: 確認 CORS 設定和 API 基礎 URL 配置，檢查端口 12011 (後端) 和 12012 (前端) 是否正確設定
+
+**Q: 生產環境出現 WebSocket HMR 錯誤**
+A: 系統已加入環境判斷保護，確保使用 `npm run build && npm run start` 而非 `npm run dev` 進行生產部署
+
+**Q: 端口衝突問題**
+A: 系統使用 12010-12019 範圍的端口，如遇衝突請修改環境變數中的端口設定
+
+**Q: CORS 錯誤**
+A: 確認後端 .env 文件中 CORS_ORIGINS 包含正確的前端 URL (http://localhost:12012)
 
 **Q: Excel 匯入失敗**
 A: 檢查文件格式和欄位映射，參考匯入模板