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

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

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

%%{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

แนวคิดสำคัญ

ตาราง 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

%%{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
  A["Push/PR
ส่งโค้ด"] --> B["Install
npm ci"]
  B --> C["Lint
ตรวจ style"]
  C --> D["Test
unit/e2e"]
  D --> E["Build
production build"]
  E --> F["Deploy
ส่งขึ้น hosting"]

Code Example

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

วิดีโอแนะนำ

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

กลับสัปดาห์ที่ 14