Docker 教學 第 6 堂：Docker Compose 全端專題：React + Flask + MySQL

Browser
  |
  v
frontend container
React build + Nginx
  |
  | /api proxy
  v
backend container
Flask REST API
  |
  v
db container
MySQL + Volume

docker compose up -d --build

frontend
  - 使用 Node build React
  - 使用 Nginx 提供靜態 HTML/CSS/JS
  - 把 /api 請求 proxy 到 backend

backend
  - 提供 Flask REST API
  - 負責商業邏輯
  - 連線到 MySQL

db
  - 使用 mysql:8.0 image
  - 保存 Todo 資料
  - 資料放在 Docker volume

frontend container = React build + Nginx
backend container  = Flask API
db container       = MySQL

frontend -> backend:5000
backend  -> db:3306

MYSQL_HOST=db

MYSQL_HOST=localhost

npm run build -> 產生靜態檔 -> Nginx serve

volumes:
  todo-db-data:

todo-fullstack/
  ├── compose.yaml
  ├── .env.example
  ├── .gitignore
  ├── README.md
  ├── frontend/
  │   ├── .dockerignore
  │   ├── Dockerfile
  │   ├── nginx.conf
  │   ├── package.json
  │   ├── index.html
  │   └── src/
  │       ├── main.jsx
  │       ├── App.jsx
  │       └── App.css
  ├── backend/
  │   ├── .dockerignore
  │   ├── Dockerfile
  │   ├── requirements.txt
  │   ├── app.py
  │   └── test_app.py
  ├── db/
  │   └── init.sql
  └── .github/
      └── workflows/
          └── cicd.yml

mkdir backend
mkdir frontend
mkdir frontend\src
mkdir db
mkdir .github
mkdir .github\workflows

mkdir -p backend frontend/src db .github/workflows

.env
node_modules/
dist/
__pycache__/
*.pyc
.pytest_cache/

SET NAMES utf8mb4;

ALTER DATABASE todo_app CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS todos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  completed BOOLEAN NOT NULL DEFAULT FALSE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO todos (title, completed) VALUES
  ('完成 Docker 第六堂專題', FALSE),
  ('確認 MySQL volume 會保存資料', FALSE),
  ('讓 GitHub Actions build image', FALSE);

flask==3.0.3
mysql-connector-python==9.0.0
pytest==8.3.3

import os
import mysql.connector
from flask import Flask, jsonify, request

app = Flask(__name__)


def get_connection():
    return mysql.connector.connect(
        host=os.getenv("MYSQL_HOST", "db"),
        port=int(os.getenv("MYSQL_PORT", "3306")),
        user=os.getenv("MYSQL_USER", "todo_user"),
        password=os.getenv("MYSQL_PASSWORD", "todo_password"),
        database=os.getenv("MYSQL_DATABASE", "todo_app"),
    )


def fetch_todos():
    conn = get_connection()
    cursor = conn.cursor(dictionary=True)
    cursor.execute(
        """
        SELECT id, title, completed, created_at
        FROM todos
        ORDER BY id DESC
        """
    )
    rows = cursor.fetchall()
    cursor.close()
    conn.close()
    return rows


@app.route("/api/health")
def health():
    return jsonify(status="ok")


@app.route("/api/todos", methods=["GET"])
def list_todos():
    return jsonify(fetch_todos())


@app.route("/api/todos", methods=["POST"])
def create_todo():
    data = request.get_json(silent=True) or {}
    title = str(data.get("title", "")).strip()
    if not title:
        return jsonify(error="title is required"), 400

    conn = get_connection()
    cursor = conn.cursor()
    cursor.execute("INSERT INTO todos (title) VALUES (%s)", (title,))
    conn.commit()
    cursor.close()
    conn.close()
    return jsonify(message="created"), 201


@app.route("/api/todos/<int:todo_id>", methods=["PATCH"])
def toggle_todo(todo_id):
    conn = get_connection()
    cursor = conn.cursor()
    cursor.execute(
        """
        UPDATE todos
        SET completed = NOT completed
        WHERE id = %s
        """,
        (todo_id,),
    )
    conn.commit()
    cursor.close()
    conn.close()
    return jsonify(message="updated")


@app.route("/api/todos/<int:todo_id>", methods=["DELETE"])
def delete_todo(todo_id):
    conn = get_connection()
    cursor = conn.cursor()
    cursor.execute("DELETE FROM todos WHERE id = %s", (todo_id,))
    conn.commit()
    cursor.close()
    conn.close()
    return jsonify(message="deleted")


def add(a, b):
    return a + b


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

from app import add, app


def test_add():
    assert add(2, 3) == 5


def test_health():
    app.config["TESTING"] = True
    with app.test_client() as client:
        response = client.get("/api/health")
        assert response.status_code == 200
        assert response.get_json()["status"] == "ok"

FROM python:3.11-slim

ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1

WORKDIR /app

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

EXPOSE 5000

CMD ["python", "app.py"]

__pycache__/
*.pyc
.pytest_cache/
venv/
.venv/
.env

{
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview --host 0.0.0.0"
  },
  "dependencies": {
    "@vitejs/plugin-react": "latest",
    "vite": "latest",
    "react": "latest",
    "react-dom": "latest"
  },
  "devDependencies": {}
}

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Docker Todo App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import { useEffect, useState } from 'react'
import './App.css'

export default function App() {
  const [todos, setTodos] = useState([])
  const [title, setTitle] = useState('')
  const [loading, setLoading] = useState(true)

  async function loadTodos() {
    const response = await fetch('/api/todos')
    const data = await response.json()
    setTodos(data)
    setLoading(false)
  }

  async function addTodo(event) {
    event.preventDefault()
    const trimmed = title.trim()
    if (!trimmed) return

    await fetch('/api/todos', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: trimmed }),
    })

    setTitle('')
    await loadTodos()
  }

  async function toggleTodo(id) {
    await fetch(`/api/todos/${id}`, { method: 'PATCH' })
    await loadTodos()
  }

  async function deleteTodo(id) {
    await fetch(`/api/todos/${id}`, { method: 'DELETE' })
    await loadTodos()
  }

  useEffect(() => {
    loadTodos()
  }, [])

  return (
    <main className="page">
      <section className="shell">
        <p className="eyebrow">Docker Fullstack Capstone</p>
        <h1>Todo App</h1>

        <form className="todo-form" onSubmit={addTodo}>
          <input
            value={title}
            onChange={(event) => setTitle(event.target.value)}
            placeholder="新增一個任務"
          />
          <button type="submit">新增</button>
        </form>

        {loading ? (
          <p className="muted">載入中...</p>
        ) : (
          <ul className="todo-list">
            {todos.map((todo) => (
              <li key={todo.id} className={todo.completed ? 'done' : ''}>
                <button type="button" onClick={() => toggleTodo(todo.id)}>
                  {todo.completed ? '完成' : '未完成'}
                </button>
                <span>{todo.title}</span>
                <button type="button" onClick={() => deleteTodo(todo.id)}>
                  刪除
                </button>
              </li>
            ))}
          </ul>
        )}
      </section>
    </main>
  )
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, "Noto Sans TC", sans-serif;
  color: #172033;
  background: #f4f6fb;
}

button,
input {
  font: inherit;
}

.page {
  min-height: 100vh;
  padding: 40px 16px;
}

.shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 32px;
  background: white;
  border: 1px solid #d9deea;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 32, 56, 0.08);
}

.eyebrow {
  margin: 0 0 8px;
  color: #4764f0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 24px;
  font-size: 36px;
}

.todo-form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.todo-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #c8cfdd;
  border-radius: 8px;
}

button {
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: #4764f0;
  cursor: pointer;
}

button:hover {
  background: #344ec7;
}

.muted {
  color: #6b7280;
}

.todo-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.todo-list li {
  display: grid;
  grid-template-columns: 86px 1fr 68px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e0e5ef;
  border-radius: 8px;
  background: #fbfcff;
}

.todo-list li.done span {
  color: #7a8395;
  text-decoration: line-through;
}

.todo-list li button:last-child {
  background: #d94a4a;
}

.todo-list li button:last-child:hover {
  background: #b83030;
}

@media (max-width: 560px) {
  .shell {
    padding: 20px;
  }

  .todo-form,
  .todo-list li {
    grid-template-columns: 1fr;
  }

  .todo-form {
    display: grid;
  }
}

server {
  listen 80;
  server_name _;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri /index.html;
  }

  location /api/ {
    proxy_pass http://backend:5000/api/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

http://backend:5000

node_modules/
dist/
.env
npm-debug.log

FROM node:20-alpine AS build

WORKDIR /app

COPY package.json .
RUN npm install

COPY . .
RUN npm run build

FROM nginx:1.27-alpine

COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80

MYSQL_ROOT_PASSWORD=rootpassword
MYSQL_DATABASE=todo_app
MYSQL_USER=todo_user
MYSQL_PASSWORD=todo_password

copy .env.example .env

cp .env.example .env

services:
  frontend:
    build:
      context: ./frontend
    ports:
      - "8080:80"
    depends_on:
      - backend

  backend:
    build:
      context: ./backend
    ports:
      - "5000:5000"
    environment:
      MYSQL_HOST: db
      MYSQL_PORT: 3306
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    depends_on:
      db:
        condition: service_healthy

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    volumes:
      - todo-db-data:/var/lib/mysql
      - ./db/init.sql:/docker-entrypoint-initdb.d/init.sql:ro
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      interval: 5s
      timeout: 5s
      retries: 10

volumes:
  todo-db-data:

docker compose up -d --build

docker compose ps

http://localhost:8080

curl http://localhost:8080/api/health
curl http://localhost:8080/api/todos

React -> Flask API -> MySQL

docker compose down
docker compose up -d

volumes:
  todo-db-data:

docker compose down -v
docker compose up -d --build

container 可以重建
image 可以重 build
volume 才是資料保存的位置

docker compose ps
docker compose logs frontend
docker compose logs backend
docker compose logs db
docker compose logs -f backend

docker compose exec backend sh
docker compose exec db mysql -u todo_user -p todo_app

docker compose build backend
docker compose build frontend
docker compose build --no-cache

docker compose restart backend

MYSQL_HOST=localhost

MYSQL_HOST=db

docker compose down -v
docker compose up -d --build

docker compose build frontend
docker compose up -d frontend

docker compose up -d --build

push
  |
  v
backend pytest
  |
  v
docker compose build frontend/backend
  |
  v
docker compose up
  |
  v
curl http://localhost:8080/api/health
  |
  v
push frontend/backend images to Docker Hub

name: Fullstack Todo CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

permissions:
  contents: read

env:
  BACKEND_IMAGE: todo-backend
  FRONTEND_IMAGE: todo-frontend

jobs:
  test-backend:
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: backend

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Python
        uses: actions/setup-python@v5
        with:
          python-version: "3.11"

      - name: Install dependencies
        run: pip install -r requirements.txt

      - name: Run tests
        run: pytest test_app.py -v

  compose-check:
    runs-on: ubuntu-latest
    needs: test-backend

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Prepare env file
        run: cp .env.example .env

      - name: Build and start services
        run: docker compose up -d --build

      - name: Check API through frontend proxy
        run: |
          for i in 1 2 3 4 5 6 7 8 9 10; do
            curl --fail http://localhost:8080/api/health && exit 0
            echo "Waiting for fullstack app..."
            docker compose ps
            sleep 5
          done
          exit 1          

      - name: Create todo through API
        run: |
          curl --fail -X POST http://localhost:8080/api/todos \
            -H "Content-Type: application/json" \
            -d '{"title":"Created by CI"}'
          curl --fail http://localhost:8080/api/todos          

      - name: Show logs on failure
        if: failure()
        run: docker compose logs

      - name: Stop services
        if: always()
        run: docker compose down -v

  push-images:
    runs-on: ubuntu-latest
    needs: compose-check
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Create image tags
        id: meta
        run: echo "sha_short=$(git rev-parse --short HEAD)" >> "$GITHUB_OUTPUT"

      - name: Build and push backend
        uses: docker/build-push-action@v5
        with:
          context: backend
          push: true
          tags: |
            ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.BACKEND_IMAGE }}:latest
            ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.BACKEND_IMAGE }}:${{ steps.meta.outputs.sha_short }}            

      - name: Build and push frontend
        uses: docker/build-push-action@v5
        with:
          context: frontend
          push: true
          tags: |
            ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.FRONTEND_IMAGE }}:latest
            ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.FRONTEND_IMAGE }}:${{ steps.meta.outputs.sha_short }}            

# Todo Fullstack Docker Demo

![CI](https://github.com/your-name/todo-fullstack/actions/workflows/cicd.yml/badge.svg)

這是一個 Docker 總整合範例：

- React frontend
- Nginx static server + `/api` reverse proxy
- Flask REST API backend
- MySQL database
- Docker volume 保存資料
- Docker Compose 一鍵啟動
- GitHub Actions CI/CD

## 架構

```text
Browser
  |
  v
frontend:80
React + Nginx
  |
  | /api
  v
backend:5000
Flask API
  |
  v
db:3306
MySQL + todo-db-data volume
```

## 啟動

```powershell
copy .env.example .env
docker compose up -d --build
```

打開：

```text
http://localhost:8080
```

## 測試 API

```powershell
curl http://localhost:8080/api/health
curl http://localhost:8080/api/todos
```

## 停止

```powershell
docker compose down
```

刪除資料庫 volume：

```powershell
docker compose down -v
```

## 除錯

```powershell
docker compose ps
docker compose logs frontend
docker compose logs backend
docker compose logs db
docker compose exec db mysql -u todo_user -p todo_app
```

## 重要觀念

Backend 連 MySQL 時使用：

```text
MYSQL_HOST=db
```

不要使用：

```text
MYSQL_HOST=localhost
```

在 backend container 裡，`localhost` 指的是 backend container 自己，不是 db container。

{
  "status": "ok",
  "database": "ok"
}

ports:
  - "5000:5000"

proxy_pass http://wrong-backend:5000/api/;