reveal.js

# Docker เบื้องต้น: Container, Image, docker-compose

Lesson 5 - Testing, DevOps และการ Deploy

**Docker** คือเครื่องมือ package แอปพร้อม environment ให้อยู่ในรูป **Container** ทำให้รันได้สม่ำเสมอบนเครื่องนักพัฒนา server หรือ CI/CD

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Works on My Machine"]
 A["ติดตั้ง dependency เอง environment ไม่ตรงกัน"]
 end
 subgraph Era2["ยุค Container"]
 B["Image blueprint"]
 C["Container instance ที่รันจริง"]
 end
 subgraph Era3["ยุค Compose / Multi-service"]
 D["docker-compose frontend backend db"]
 E["Volume + Network เชื่อมบริการ"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Image** คือ Blueprint ของแอป
- **Container** คือ Instance ที่รันจาก Image
- **Dockerfile** กำหนดขั้นตอน build image
- **Angular Dockerfile** มักใช้ Build Stage แล้วเสิร์ฟด้วย Nginx
- **`docker build -t my-app .`** ใช้ build image
- **`docker run -p 80:80 my-app`** ใช้ run container
- **docker-compose.yml** รัน Frontend, Backend และ DB พร้อมกัน
- **Volume** เชื่อม directory ระหว่าง host และ container
- **.dockerignore** กันไฟล์ไม่จำเป็นเข้า image

---

## ตาราง Docker Concepts

| คำ | ความหมาย | ตัวอย่าง |
|---|---|---|
| Image | แบบสำหรับรัน | `my-app:latest` |
| Container | process ที่รันจาก image | `docker run` |
| Dockerfile | recipe สร้าง image | multi-stage build |
| Compose | รันหลาย service | frontend + api + db |
| Volume | แชร์ไฟล์/ข้อมูล | database data |

---

## Mermaid Diagram: Docker Build and Run

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["Source Code โค้ดโปรเจกต์"] --> B["Dockerfile ขั้นตอน build"]
 B --> C["docker build สร้าง image"]
 C --> D["Image blueprint"]
 D --> E["docker run รัน container"]
 E --> F["Container แอปทำงาน"]
</pre>

---

## Code Example

```dockerfile
# Dockerfile
# Build Angular แล้วเสิร์ฟด้วย Nginx
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --configuration production

FROM nginx:alpine
COPY --from=build /app/dist/my-app/browser /usr/share/nginx/html
EXPOSE 80

# ตัวอย่างการใช้งาน:
# docker build -t my-app .
# docker run -p 80:80 my-app
```

```yaml
# docker-compose.yml
# รัน frontend, backend และ database พร้อมกัน
services:
  frontend:
    build: ./frontend
    ports:
      - "8080:80"

backend:
    build: ./backend
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgres://postgres:postgres@db:5432/app

db:
    image: postgres:16
    environment:
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: app
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:
```

```text
# .dockerignore
node_modules
dist
.git
.env
```

---

## วิดีโอแนะนำ

- [YouTube: Docker for Angular Node PostgreSQL](https://www.youtube.com/results?search_query=Docker+Angular+Node+PostgreSQL+docker-compose)

---

## กิจกรรมท้ายบท

- สร้าง Dockerfile สำหรับ Angular
- build image และ run container
- เพิ่ม `.dockerignore`
- อธิบาย service แต่ละตัวใน docker-compose

---

## End

<a href="/web-programming/14-testing-deploy/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>