Skip to content
CodeSook
CodeSook

04. Github Actions building blocks


Top Level: Repository และ workflows directory

flowchart TD
    A[GitHub Repository] --> B[.github/workflows/]
    B --> C[Workflow Files .yml or.yaml]

    C --> D[📋 Workflow]
    D --> E[🎯 Events]
    D --> F[💼 Jobs]

    E --> E1[push]
    E --> E2[pull_request]
    E --> E3[schedule]
    E --> E4[workflow_dispatch]
    E --> E5[release]

    F --> G[Job 1]
    F --> H[Job 2]
    F --> I[Job N...]

    G --> J[🖥️ Runner]
    G --> K[📝 Steps]

    J --> J1[ubuntu-latest]
    J --> J2[windows-latest]
    J --> J3[macos-latest]
    J --> J4[self-hosted]

    K --> L[Step 1]
    K --> M[Step 2]
    K --> N[Step N...]

    L --> O[⚡ Action]
    L --> P[🔧 Run Command]

    O --> Q[Pre-built Actions]
    O --> R[Custom Actions]

    Q --> Q1[actions/checkout v4]
    Q --> Q2[actions/setup-node v4]
    Q --> Q3[actions/upload-artifact v4]

    R --> R1[JavaScript Action]
    R --> R2[Docker Action]
    R --> R3[Composite Action]

    P --> P1[Shell Commands]
    P --> P2[Scripts]

    style A fill:#f38ba8
    style D fill:#b4befe
    style E fill:#74c7ec
    style F fill:#a6e3a1
    style J fill:#fab387
    style K fill:#cba6f7
    style O fill:#f5c2e7
    style P fill:#89b4fa

github action architecture

flowchart TD
    REPO[🏗️ Repository]
    WORKFLOWS[📁 .github/workflows/]
    WF[📋 workflow.yml]
    EVENTS[⚡ Events Triggers]
    JOBS[💼 Jobs Collection]

    JOB1[💼 Job: test]
    JOB2[💼 Job: build]
    JOB3[💼 Job: deploy]

    RUNNER[🖥️ Runner Environment]
    STRATEGY[📊 Strategy Matrix]

    STEP1[📝 Step: Checkout]
    STEP2[📝 Step: Setup]
    STEP3[📝 Step: Test]
    STEP4[📝 Step: Build]

    ACTION1[⚡ uses: actions/checkout@v4]
    ACTION2[⚡ uses: actions/setup-node@v4]
    RUN1[🏃 run: npm install]
    RUN2[🏃 run: npm test]

    REPO --> WORKFLOWS
    WORKFLOWS --> WF
    WF --> EVENTS
    WF --> JOBS

    JOBS --> JOB1
    JOBS --> JOB2
    JOBS --> JOB3

    JOB1 --> RUNNER
    JOB1 --> STRATEGY

    JOB1 --> STEP1
    JOB1 --> STEP2
    JOB2 --> STEP3
    JOB3 --> STEP4

    STEP1 --> ACTION1
    STEP2 --> ACTION2
    STEP3 --> RUN1
    STEP4 --> RUN2

    style REPO fill:#fab387
    style WF fill:#89b4fa
    style JOBS fill:#f38ba8
    style JOB1 fill:#a6e3a1
    style JOB2 fill:#a6e3a1
    style JOB3 fill:#a6e3a1
    style STEP1 fill:#f9e2af
    style STEP2 fill:#f9e2af
    style STEP3 fill:#f9e2af
    style STEP4 fill:#f9e2af
    style ACTION1 fill:#f5e0dc

workflow execution flow

graph TD
    START([🔄 Trigger Event]) --> CHECK{Event Matches?}
    CHECK -->|Yes| QUEUE[📋 Queue Workflow]
    CHECK -->|No| END1([❌ End])

    QUEUE --> RUNNER_ASSIGN[🖥️ Assign Runner]
    RUNNER_ASSIGN --> JOB_START[▶️ Start Jobs]

    JOB_START --> PARALLEL{💼 Jobs Strategy}
    PARALLEL -->|Sequential| SEQ[🔗 Job 1 → Job 2 → Job 3]
    PARALLEL -->|Parallel| PAR[⚡ Job 1 & Job 2 & Job 3]
    PARALLEL -->|Matrix| MAT[📊 Job Matrix Combinations]

    SEQ --> STEPS1[📝 Execute Steps]
    PAR --> STEPS2[📝 Execute Steps]
    MAT --> STEPS3[📝 Execute Steps]

    STEPS1 --> STEP_SEQ[🔄 Step 1 → Step 2 → Step N]
    STEPS2 --> STEP_SEQ
    STEPS3 --> STEP_SEQ

    STEP_SEQ --> ACTION_TYPE{🎯 Step Type}
    ACTION_TYPE -->|uses| PRE_ACTION[📦 Pre-built Action]
    ACTION_TYPE -->|run| SHELL_CMD[💻 Shell Command]

    PRE_ACTION --> EXECUTE[⚡ Execute]
    SHELL_CMD --> EXECUTE

    EXECUTE --> SUCCESS{✅ Success?}
    SUCCESS -->|Yes| NEXT_STEP[➡️ Next Step/Job]
    SUCCESS -->|No| FAIL[❌ Mark as Failed]

    NEXT_STEP --> MORE{🔄 More Steps/Jobs?}
    MORE -->|Yes| STEP_SEQ
    MORE -->|No| COMPLETE([✅ Workflow Complete])

    FAIL --> CLEANUP[🧹 Cleanup]
    CLEANUP --> END2([❌ End with Failure])

    style START fill:#a6e3a1,color:#11111b
    style COMPLETE fill:#a6e3a1,color:#11111b
    style FAIL fill:#f38ba8,color:#11111b
    style END2 fill:#f38ba8,color:#11111b
    style QUEUE fill:#89b4fa,color:#11111b
    style EXECUTE fill:#f9e2af,color:#11111b
    style PARALLEL fill:#cba6f7,color:#11111b
    style ACTION_TYPE fill:#fab387,color:#11111b
    style SUCCESS fill:#94e2d5,color:#11111b
    style CHECK fill:#f5c2e7,color:#11111b

Mind map of Github Actions Building Blocks

---
config:
  theme: 'base'
  themeVariables:
    primaryTextColor: '#fff'
    lineColor: '#fff'
---
mindmap
  root)🏗️ GitHub Actions Building Blocks(
    )📋 Workflow(
      📄 YAML File
      🎯 Events
        push
        pull_request
        schedule
        manual
      ⚙️ Configuration
        name
        permissions
        env variables

    )💼 Jobs(
      🖥️ Runner
        GitHub-hosted
        Self-hosted
        OS Selection
      🔄 Strategy
        Matrix
        Parallel
        Sequential
      📋 Dependencies
        needs
        if conditions

    )📝 Steps(
      ⚡ Actions
        Pre-built
        Custom
        Marketplace
      🔧 Commands
        Shell scripts
        Run commands
      🔄 Flow Control
        Conditions
        Continue on error

    )🔧 Components(
      🔐 Secrets
        Repository secrets
        Environment secrets
        Organization secrets
      📦 Artifacts
        Upload
        Download
        Share between jobs
      🌍 Environments
        Protection rules
        Approvals
        Variables