Docker Compose 參數

前端專案啟動方式

前端服務端口： 3004:3000
瀏覽器訪問： http://localhost:3004

# 啟動前端服務
docker-compose up frontend

# 或啟動所有服務
docker-compose up -d

所有服務端口對應表

服務名稱	瀏覽器端口 → 容器端口	用途說明	訪問網址
backend	5004 → 8080	後端 API 服務 (.NET Core)	http://localhost:5004
frontend	3004 → 3000	前端網頁服務 (Next.js)	http://localhost:3004

端口對應格式說明

端口對應格式：瀏覽器端口:容器端口

• 瀏覽器端口（左側）：從外部（您的電腦）訪問的端口，可以隨意調整
• 容器端口（右側）：Docker 容器內部應用程式監聽的端口，通常不會變更

端口調整範例：

目前配置：

frontend:
  ports:
    - "3004:3000" # 瀏覽器訪問 localhost:3004 → 容器內 3000 端口

可以調整為：

frontend:
  ports:
    - "3002:3000" # 瀏覽器訪問 localhost:3002 → 容器內仍是 3000 端口
    - "8080:3000" # 瀏覽器訪問 localhost:8080 → 容器內仍是 3000 端口
    - "5000:3000" # 瀏覽器訪問 localhost:5000 → 容器內仍是 3000 端口

重要注意事項：

1. 瀏覽器端口可以自由調整：

   • 避免與其他服務衝突
   • 選擇未被占用的端口
   • 例如：3004 → 3002、5004 → 5000

2. 容器內部端口通常不變更：

   • Next.js 預設監聽 3000 端口
   • .NET Core 預設監聽 8080 端口
   • 變更需要修改應用程式配置

3. 修改後需要重新啟動：

   docker-compose down
   docker-compose up -d

網路架構說明

Docker 網路配置：

• dynamic-network： 主要應用服務網路（前端、後端服務）

常用操作指令

# 啟動所有服務
docker-compose up -d

# 僅啟動前端和後端
docker-compose up -d frontend backend

# 查看服務狀態
docker-compose ps

# 查看服務日誌
docker-compose logs frontend

# 停止所有服務
docker-compose down

# 重新建置並啟動
docker-compose up -d --build

重要提醒

• 確保 Docker Desktop 已啟動
• 前端和後端服務均連接至 dynamic-network 網路
• 後端環境設定為 ASPNETCORE_ENVIRONMENT=Development
• 端口衝突時：只需調整 docker-compose.yml 中的左側端口號

服務依賴關係

• 前端和後端服務透過 dynamic-network 進行內部通信
• 所有服務設定為 restart: unless-stopped 自動重啟

端口調整實用場景

情境一：端口衝突

如果 3004 端口被其他應用占用：

frontend:
  ports:
    - "3002:3000" # 改用 3002 端口

情境二：多環境部署

開發環境和測試環境使用不同端口：

# 開發環境
frontend:
  ports:
    - "3004:3000"

# 測試環境可改為
frontend:
  ports:
    - "4004:3000"

情境三：團隊協作

不同開發者使用各自偏好的端口：

# 開發者 A 偏好
frontend:
  ports:
    - "3000:3000"

# 開發者 B 偏好
frontend:
  ports:
    - "8080:3000"

情境四：同時運行前後端

確保前後端端口不衝突：

backend:
  ports:
    - "5004:8080" # 後端服務

frontend:
  ports:
    - "3004:3000" # 前端服務

---

📄 此指南基於當前的 docker-compose.yml 配置生成
🔧 記住：左側端口可調，右側端口通常不變
如需修改端口配置，請編輯 docker-compose.yml 文件後重新啟動服務