Job Artifacts

GitHub Job Artifact คืออะไร

Artifact คือไฟล์หรือโฟลเดอร์ที่เกิดขึ้นจากการรัน GitHub Actions workflow ที่เราต้องการเก็บไว้ใช้งานต่อ เช่น ไฟล์ที่ build เสร็จแล้ว, dist folder จากการ build react csr, testing report, หรือ log files

ตัวอย่างการใช้งาน เราจะใช้ action actions/upload-artifact@v4 ช่วยทำงานส่วนนี้

ยกตัวอย่างเช่น เรา build React csr จาก Vite จะได้ folder dist มาใช่มะ เราก็จะต้องเอา folder dist upload ไปเก็บไว้ที่ Artifacts Storage ก่อน ถ้า Jobs อื่นอยากใช้งานก็ให้ใช้ action actions/download-artifact@v4 เพื่อ download มาใช้งาน

Artifacts Storage เป็นเหมือนพื้นที่ตรงกลางที่เก็บไฟล์ให้เราอะนะ

flowchart TD
    subgraph "React Vite Pipeline"
        direction TB

        subgraph "Job 1: Test"
            A[🧪 Run Tests] --> B[📊 Generate Coverage]
            B --> C[📤 Upload test-results.zip]
        end

        subgraph "Job 2: Build"
            D[🏗️ npm run build] --> E[📦 Create dist/ folder]
            E --> F[📤 Upload vite-build.zip]
        end

        subgraph "Artifacts Storage"
            G[(📁 GitHub Storage)]
            H[test-results.zip]
            I[vite-build.zip]
        end

        subgraph "Job 3: Deploy"
            J[📥 Download vite-build.zip] --> K[🚀 Deploy to Vercel]
            K --> L[✅ Deployment Success]
        end
    end

    %% Connections
    C --> G
    F --> G
    G --> H
    G --> I
    I --> J

    %% Catppuccin Mocha Colors
    classDef testJob fill:#f38ba8,stroke:#eba0ac,stroke-width:2px,color:#11111b
    classDef buildJob fill:#89b4fa,stroke:#74c7ec,stroke-width:2px,color:#11111b
    classDef deployJob fill:#a6e3a1,stroke:#94e2d5,stroke-width:2px,color:#11111b
    classDef storage fill:#cba6f7,stroke:#b4befe,stroke-width:2px,color:#11111b
    classDef artifacts fill:#f9e2af,stroke:#fab387,stroke-width:2px,color:#11111b

    %% Apply Classes
    class A,B,C testJob
    class D,E,F buildJob
    class J,K,L deployJob
    class G storage
    class H,I artifacts

ที่ต้องทำแบบนี้ก็เพราะว่าแต่ละ Jobs มันทำงานอยู่กันคนละที่เลย

1. เก็บไฟล์ Build

1
- name: Build app
2
  run: npm run build
3

4
- name: Upload build files
5
  uses: actions/upload-artifact@v3
6
  with:
7
    name: build-files
8
    path: dist/

2. เก็บ Test report

1
- name: Run tests
2
  run: npm test
3

4
- name: Upload test report
5
  uses: actions/upload-artifact@v3
6
  with:
7
    name: test-report
8
    path: coverage/

3. ใช้ Artifact ใน Job อื่น

1
job2:
2
needs: job1
3
steps:
4
  - name: Download build files
5
    uses: actions/download-artifact@v3
6
    with:
7
  - name: build-files
8
    path: ./build

Artifact จะถูกเก็บไว้ 90 วัน (default) และสามารถดาวน์โหลดได้จากหน้า Actions ของ repository

Hands-on

มาลงมือทำกัน

ยังอยู่ที่โปรเจคเดิม

เราสั่ง build จะได้แบบนี้

bun run build

$ tsc -b && vite build
vite v7.1.5 building for production...
✓ 32 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.05 kB
dist/assets/index-D8b4DHJx.css    1.39 kB │ gzip:  0.71 kB
dist/assets/index-hT4HLifg.js   188.03 kB │ gzip: 59.20 kB
✓ built in 458ms

เราจะได้ folder dist มา

Flow ที่เราจะทำคือ มี 2 jobs

1. Build job
2. Deploy job

Build job เราจะเอา folder dist upload ไปเก็บที่ Artifact storage แล้วให้ Deploy job ดาวน์โหลดมาใช้ เพื่อ deploy ต่อไป

workflows/deploy.yaml

1
name: Deploy Project
2
on:
3
  push:
4
  workflow_dispatch:
5
  pull_request:
6
jobs:
7
  build:
8
    runs-on: ubuntu-latest
9
    steps:
10
      - name: Get Code
11
        uses: actions/checkout@v4
12
      - name: Install Bun
13
        uses: oven-sh/setup-bun@v2
14
        with:
15
          bun-version: 1.2.18
16
      - name: Install Dependencies
17
        run: bun i
18
      - name: Build
19
        run: bun run build
20
      - name: upload dist folder
21
        uses: actions/upload-artifact@v4
22
        with:
23
          name: dist-folder
24
          path: |
25
            dist
26
            public
27

28
  deploy:
29
    needs:
30
      - build
31
    runs-on: ubuntu-latest
32
    steps:
33
      - name: download dist folder
34
        uses: actions/download-artifact@v4
35
        with:
36
          name: dist-folder
37
      - name: List all files
38
        run: ls -R
39
      - name: Deploy
40
        run: echo "Deploying..."

ลองเปิดดูที่หน้าเว็ป