reveal.js

# CI/CD เบื้องต้น: GitHub Actions

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

**CI (Continuous Integration)** คือการรันตรวจคุณภาพ เช่น install, lint, test และ build ทุกครั้งที่ push หรือเปิด Pull Request ส่วน **CD** คือการส่งมอบหรือ deploy อัตโนมัติเมื่อเงื่อนไขผ่าน

---

## 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["ยุค Build ในเครื่อง / Local Build"]
 A["รัน test เอง ลืมได้ง่าย"]
 end
 subgraph Era2["ยุค CI Server / Automated Check"]
 B["Push triggers CI ตรวจทุกครั้ง"]
 C["Test + Build กัน regression"]
 end
 subgraph Era3["ยุค CD / Automated Delivery"]
 D["Deploy after pass ส่งมอบอัตโนมัติ"]
 E["Secrets + Protection ปลอดภัยขึ้น"]
 end
 A --> B --> C --> D --> E
</pre>

---

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

- **CI** รัน test ทุกครั้งที่ push โค้ด
- **CD** deploy อัตโนมัติเมื่อ test ผ่าน
- **`.github/workflows/ci.yml`** คือไฟล์กำหนด Workflow
- **Jobs** มักเรียงเป็น install → lint → test → build → deploy
- **Secrets** ใช้เก็บ API Key หรือ token ใน GitHub Secrets
- **Branch Protection Rule** บังคับให้ CI ผ่านก่อน merge
- **actions/cache** ช่วย cache dependencies เพื่อให้ workflow เร็วขึ้น

---

## ตาราง Workflow Concepts

| คำ | ความหมาย | ตัวอย่าง |
|---|---|---|
| Workflow | ชุด automation | `ci.yml` |
| Trigger | เหตุการณ์เริ่มงาน | `push`, `pull_request` |
| Job | งานหนึ่งชุด | test, build |
| Step | คำสั่งย่อยใน job | `npm ci` |
| Secret | ค่าลับ | deploy token |

---

## Mermaid Diagram: CI/CD Pipeline

---

## Code Example

```yaml
# .github/workflows/ci.yml
# GitHub Actions สำหรับ Angular project
name: CI

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

jobs:
  build:
    runs-on: ubuntu-latest

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

- name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

- name: Install dependencies
        run: npm ci

- name: Run tests
        run: npm test -- --watch=false --browsers=ChromeHeadless

- name: Build
        run: npm run build -- --configuration production

# ตัวอย่างการใช้งาน:
      # เพิ่ม deploy step หลัง build ผ่าน และเก็บ token ใน GitHub Secrets
```

---

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

- [YouTube: GitHub Actions CI CD Angular](https://www.youtube.com/results?search_query=GitHub+Actions+CI+CD+Angular)

---

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

- สร้าง workflow `ci.yml`
- ตั้งให้รันเมื่อ pull request เข้า `main`
- เพิ่ม step `npm ci`, test และ build
- อธิบายการใช้ GitHub Secrets สำหรับ deploy token

---

## 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>