ทบทวน: สิ่งที่เรียนไปเมื่อสัปดาห์ที่แล้ว

วันนี้เราจะนำองค์ประกอบเหล่านี้มารวมร่างกัน!

สถานการณ์จริง: Modern Applications

แอปพลิเคชันสมัยใหม่ ไม่ได้มีแค่โปรแกรมเดียวโดดๆ มักประกอบด้วย:

ปัญหาของการรันด้วยมือ (The Pain of Manual Run)

ถ้าต้องรันแอปฯ ข้างต้น คุณต้องพิมพ์คำสั่งแบบนี้ทุกครั้ง:

ทำไมวิธี Manual ถึงไม่เวิร์ค?

ทางออก: Infrastructure as Code

จะดีกว่าไหม? ถ้าเราเขียน "Configuration" ของการรัน Container ทั้งหมดลงในไฟล์เดียว

นี่คือหน้าที่ของ Docker Compose

Docker Compose คืออะไร?

โครงสร้างไฟล์ docker-compose.yml

ประกอบด้วย 3 ส่วนหลัก (Top-level elements)

เจาะลึก: Services

Service คือคำนิยามของ Container ใน Compose

💡 Tip: ชื่อ Service (frontend, database) จะกลายเป็น Hostname ใน Network อัตโนมัติ

แหล่งที่มา: Build vs Image

การจัดการตัวแปรสภาพแวดล้อม (Environment Variables)

สามารถทำได้ 2 วิธีหลักใน Compose

environment:
  - DEBUG=True
  - DB_HOST=postgres

env_file:
  - .env

Networking ใน Docker Compose

Volumes ใน Docker Compose

กำหนดพื้นที่เก็บข้อมูลได้ 2 รูปแบบหลัก

*ถ้าใช้ Named Volume ต้องประกาศที่ top-level volumes key ด้วย

การประกาศ Volumes (Top-Level)

ถ้าใช้ Named Volume ต้องประกาศบอก Compose เสมอ

ลำดับการทำงาน (Dependencies)

ใช้ depends_on เพื่อบอกว่า Service ไหนต้องเริ่มก่อน

Port Mapping ใน Compose

การเปิดประตูสู่โลกภายนอก (Host Machine)

Restart Policies

จะทำอย่างไรถ้า Container พัง (Crash) หรือเครื่อง Reboot?

ตัวอย่างไฟล์ที่สมบูรณ์

services:
  django_app:
    build: .
    command: uv run python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/app
    ports:
      - "8000:8000"
    depends_on:
      - db
    environment:
      - DB_HOST=db
      - DB_NAME=app_db
      - DB_USER=user
      - DB_PASS=pass

  db:
    image: postgres:13
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=app_db
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=pass

volumes:
  postgres_data:

The Magic Command: UP

สร้าง, เริ่ม, และเชื่อมต่อทุกอย่างในคำสั่งเดียว

Command: DOWN

หยุดและล้างบาง (Cleanup)

• หยุด Container
• ลบ Container
• ลบ Default Network ที่สร้างขึ้น

Monitoring Commands

Executing Commands

การเข้าไปสั่งงานภายใน Container

Lifecycle Control

Scaling Services

เพิ่มจำนวน Container ของ Service ได้ง่ายๆ (แต่ต้องระวังเรื่อง Port Choc!)

Lab: Docker Compose in Action

โครงสร้างโปรเจกต์ (Project Structure)

จัดระเบียบไฟล์ให้ถูกต้องก่อนเริ่มงาน

สรุปประโยชน์ของ Docker Compose

Compose vs Orchestrators (K8s/Swarm)

Compose ดีมาก แต่ไม่ใช่คำตอบของทุกสิ่ง

เอกสารอ้างอิงและศึกษาต่อ

Q & A

มีคำถามสงสัยตรงไหนก่อนเริ่ม Lab ไหมครับ?

Lab Project: Resume Hub (Full Stack)

เปลี่ยนจาก Monolith เป็น Modern Architecture แยก Frontend และ Backend ออกจากกัน

System Architecture

Step 1: Backend Setup (Django API)

ใช้ Code เดิมจาก djrepo แต่ปรับให้เป็น API Mode

Step 2: สร้าง API Views (REST Framework)

from rest_framework import serializers
from .models import *

class SkillSerializer(serializers.ModelSerializer):
    class Meta:
        model = Skill
        fields = ['name', 'level']

class ResumeSerializer(serializers.ModelSerializer):
    skills = SkillSerializer(many=True, read_only=True)
    avg_rating = serializers.ReadOnlyField() 
    
    class Meta:
        model = Resume
        fields = '__all__'
        

from rest_framework import viewsets
from .models import *
from .serializers import *

class ResumeViewSet(viewsets.ModelViewSet):
    queryset = Resume.objects.all()
    serializer_class = ResumeSerializer
    
    # Example Redis Caching logic could go here
    # def list(self, request):
    #    ... check cache ...
        

Step 4: Backend Dockerfile (with uv)

เราจะใช้ uv เพื่อความเร็วในการ Build และ gunicorn สำหรับ Production

Step 5: Frontend Initialization

สร้างโปรเจกต์ React ใหม่แยกจากโฟลเดอร์ Backend

Step 6: ตั้งค่า TailwindCSS

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})
        

@import "tailwindcss";
        

Step 7: สร้าง Component แสดง Resume

ไฟล์: src/App.jsx (เรียกข้อมูลจาก Backend)

import { useEffect, useState } from 'react'

function App() {
  const [resumes, setResumes] = useState([])

  useEffect(() => {
    // Fetch ผ่าน /api ซึ่ง Caddy จะ Route ไปหา Backend ให้
    fetch('/api/resumes/') 
      .then(res => res.json())
      .then(data => setResumes(data))
  }, [])

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6 text-center text-blue-600">Resume Hub</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {resumes.map(resume => (
          <div key={resume.id} className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition">
            <h2 className="text-xl font-bold">{resume.title}</h2>
            <p className="text-gray-600">{resume.summary}</p>
            <div className="mt-4 flex flex-wrap gap-2">
               {resume.skills.map(skill => (
                 <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">{skill.name}</span>
               ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
export default App
      

Step 8: Frontend Dockerfile (Build Only)

เราจะใช้ Docker เพื่อ Build ไฟล์ static (html, css, js) แล้วส่งให้ Caddy เสิร์ฟ

Step 9: Caddyfile Setup

Caddy จะทำหน้าที่เป็น Web Server (เสิร์ฟ Frontend) และ Reverse Proxy (ส่ง Request ไป Backend)

Step 10: Docker Compose (The Grand Assembly)

services:
  backend:
    build: ./backend
    command: gunicorn mysite.wsgi:application --bind 0.0.0.0:8000
    depends_on:
      - db
      - redis
    environment:
      - DB_HOST=db
      - DB_PASSWORD=secret
    deploy:
      replicas: 3  # Scaling Backend to 3 instances!

  frontend-build:
    build: ./frontend
    volumes:
      - frontend_dist:/app/dist
    command: sh -c "npm run build && cp -r dist/* /shared/"  # Copy build to volume
    volumes:
      - static_volume:/shared

  caddy:
    image: caddy:2-alpine
    restart: unless-stopped
    ports:
      - "80:80"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - static_volume:/srv  # Serve frontend from volume
    depends_on:
      - backend
      - frontend-build

  db:
    image: postgres:15-alpine
    environment:
      - POSTGRES_PASSWORD=secret
    volumes:
      - pgdata:/var/lib/postgresql/data

  redis:
    image: redis:alpine

volumes:
  pgdata:
  static_volume:
      

Step 11: Execute & Scale

สั่งรันระบบทั้งหมดด้วยคำสั่งเดียว

Step 12: Testing Load Balancing

พิสูจน์ว่า Caddy กระจายงานไปยัง Backend ทั้ง 3 ตัว

Step 13: ทดสอบ Redis Cache

ตรวจสอบว่าข้อมูลถูกเก็บใน Redis จริงหรือไม่

Bonus: การเติมข้อมูล (Data Seeding)

เนื่องจาก Database เริ่มต้นว่างเปล่า หน้าเว็บจะโล่ง

*หมายเหตุ: ใน Caddyfile ที่ให้ไป เรา map แค่ /api/* ถ้าจะเข้า admin ต้องเพิ่ม `handle /admin/* { reverse_proxy backend:8000 }` ด้วย

Troubleshooting Lab

การส่งงาน (Project Submission)

Mission Complete! 🚀 คุณได้สร้างระบบ Microservices-ready Architecture แล้ว