使用 docker-compose 啟動專案

Ting
  2025-06-05 21:38:22 2025-06-05 21:38:22 Created   2025-06-06 00:07:14 2025-06-06 00:07:14 Updated    

專案概述

此專案包含：

  • Backend: ASP.NET Core 8.0 應用程式 (Port: 5004 → 8080)
  • Frontend: Next.js 應用程式 (Port: 3004 → 3000)
  • 網路: 使用 bridge 模式的 dynamic-network

前置需求

1. 安裝 Docker Desktop

2. 驗證 Docker 安裝

開啟 PowerShell 或命令提示字元，執行：

1
2
docker --version
docker-compose --version

專案結構

1
2
3
4
5
6
7
8
9
10
11
12
TRC-204/
├── docker-compose.yml          # Docker Compose 設定檔
├── dynamic-backend/            # 後端專案資料夾
│   ├── Dockerfile             # 後端 Dockerfile
│   ├── src/                   # 後端原始碼
│   └── dynamic-backend.sln    # .NET 解決方案檔
├── dynamic-frontend/          # 前端專案資料夾
│   ├── Dockerfile            # 前端 Dockerfile
│   ├── src/                  # 前端原始碼
│   ├── package.json          # Node.js 相依套件
│   └── next.config.ts        # Next.js 設定
└── README.md

啟動步驟

步驟 1: 開啟 CMD

步驟 2: 導航到專案根目錄

步驟 3: 確認 docker-compose.yml 檔案存在

步驟 4: 建立並啟動所有容器

1
docker-compose up --build -d

參數說明：

  • --build: 強制重新建立映像檔
  • -d: 在背景運行容器（detached mode）

步驟 5: 驗證容器狀態

1
docker ps

您應該看到兩個運行中的容器：

  • dynamic-frontend (Port: 3004)
  • dynamic-backend (Port: 5004)

步驟 6: 檢查容器日誌（可選）

1
2
3
4
5
6
7
8
# 查看前端日誌
docker logs dynamic-frontend

# 查看後端日誌
docker logs dynamic-backend

# 即時查看日誌
docker logs -f dynamic-frontend

存取應用程式

前端

後端 API

常用管理指令

停止所有容器

1
docker-compose down

停止並移除所有資源

1
docker-compose down --volumes --remove-orphans

重新啟動特定服務

1
2
3
4
5
# 重啟前端
docker-compose restart frontend

# 重啟後端
docker-compose restart backend

查看服務狀態

1
docker-compose ps

進入容器內部（除錯用）

1
2
3
4
5
# 進入前端容器
docker exec -it dynamic-frontend sh

# 進入後端容器
docker exec -it dynamic-backend bash

單獨啟動服務

只啟動前端 (Next.js)

1
2
3
4
5
# 建立並啟動前端
docker-compose up frontend -d

# 或者重新建立前端映像檔並啟動
docker-compose up --build frontend -d

只啟動後端 (ASP.NET Core)

1
2
3
4
5
# 建立並啟動後端
docker-compose up backend -d

# 或者重新建立後端映像檔並啟動
docker-compose up --build backend -d

停止特定服務

1
2
3
4
5
# 停止前端
docker-compose stop frontend

# 停止後端
docker-compose stop backend

移除特定服務

1
2
3
4
5
# 停止並移除前端容器
docker-compose rm -s frontend

# 停止並移除後端容器
docker-compose rm -s backend

開發流程

查看特定服務日誌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 查看所有服務日誌
docker-compose logs -f

# 查看前端日誌
docker-compose logs frontend

# 查看後端日誌
docker-compose logs backend

# 即時追蹤前端日誌
docker-compose logs -f frontend

# 即時追蹤後端日誌
docker-compose logs -f backend

故障排除

問題 1: 容器無法啟動

解決方案：

1
2
3
4
5
6
7
# 檢查容器日誌
docker logs dynamic-frontend
docker logs dynamic-backend

# 重新建立映像檔
docker-compose build --no-cache
docker-compose up -d

問題 2: Port 衝突

錯誤訊息： Port already in use
解決方案：

1
2
3
4
5
# 查看佔用埠號的程序
netstat -ano | findstr :3004
netstat -ano | findstr :5004

# 停止衝突的服務或修改 docker-compose.yml 中的埠號對應

問題 3: 映像檔建立失敗

解決方案：

1
2
3
4
5
# 清理 Docker 快取
docker system prune -a

# 重新建立
docker-compose build --no-cache

問題 4: 網路連線問題

解決方案：

1
2
3
4
5
6
7
# 檢查網路
docker network ls
docker network inspect dynamic-network

# 重新建立網路
docker-compose down
docker-compose up -d

進階設定

修改埠號對應

編輯 docker-compose.yml 檔案中的 ports 設定：

1
2
3
4
5
6
7
services:
  frontend:
    ports:
      - "3005:3000" # 修改外部埠號為 3005
  backend:
    ports:
      - "5005:8080" # 修改外部埠號為 5005

設定環境變數

在 docker-compose.yml 中添加環境變數：

1
2
3
4
5
services:
  backend:
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - DATABASE_URL=your_database_url
Comments
On this page
使用 docker-compose 啟動專案
  1. 專案概述
  2. 前置需求
    1. 1. 安裝 Docker Desktop
    2. 2. 驗證 Docker 安裝
  3. 專案結構
  4. 啟動步驟
    1. 步驟 1: 開啟 CMD
    2. 步驟 2: 導航到專案根目錄
    3. 步驟 3: 確認 docker-compose.yml 檔案存在
    4. 步驟 4: 建立並啟動所有容器
    5. 步驟 5: 驗證容器狀態
    6. 步驟 6: 檢查容器日誌（可選）
  5. 存取應用程式
    1. 前端
    2. 後端 API
  6. 常用管理指令
    1. 停止所有容器
    2. 停止並移除所有資源
    3. 重新啟動特定服務
    4. 查看服務狀態
    5. 進入容器內部（除錯用）
  7. 單獨啟動服務
    1. 只啟動前端 (Next.js)
    2. 只啟動後端 (ASP.NET Core)
    3. 停止特定服務
    4. 移除特定服務
  8. 開發流程
    1. 查看特定服務日誌
  9. 故障排除
    1. 問題 1: 容器無法啟動
    2. 問題 2: Port 衝突
    3. 問題 3: 映像檔建立失敗
    4. 問題 4: 網路連線問題
  10. 進階設定
    1. 修改埠號對應
    2. 設定環境變數