Pertemuan 28

GitHub Actions CI/CD + Quiz 3.3

Tujuan Pembelajaran

Memahami konsep CI/CD pipeline dengan GitHub Actions
Mampu membuat workflow CI/CD lengkap
Memahami job dependencies dan conditional execution
Mengevaluasi pemahaman modul 3.3

Materi Inti

A. CI/CD dengan GitHub Actions

CI (Continuous Integration) adalah praktik menjalankan test dan validasi secara otomatis setiap kali ada perubahan kode. CD (Continuous Deployment) melanjutkan dengan deploy otomatis setelah semua pengecekan lulus.

Konsep dasar GitHub Actions:

Istilah	Penjelasan
Workflow	File YAML yang mendefinisikan pipeline (.github/workflows/)
Trigger	Event yang memicu workflow (push, PR, schedule)
Job	Sekelompok langkah yang berjalan di satu runner
Step	Satu perintah atau action dalam job
Runner	Virtual machine yang menjalankan job (ubuntu-latest, windows-latest)
Action	Komponen reusable (actions/checkout, actions/setup-node)

B. Struktur Workflow YAML

name: Nama Workflow

# Trigger: kapan workflow berjalan
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

# Jobs: apa yang dijalankan
jobs:
  nama-job:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4      # Clone repo
      - name: Langkah kustom
        run: echo "Hello CI/CD!"

C. Job Dependencies

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Jalankan linter
        run: echo "Linting..."

  test:
    runs-on: ubuntu-latest
    needs: lint                    # Berjalan SETELAH lint selesai
    steps:
      - uses: actions/checkout@v4
      - name: Jalankan test
        run: echo "Testing..."

  deploy:
    runs-on: ubuntu-latest
    needs: test                    # Berjalan SETELAH test selesai
    if: github.ref == 'refs/heads/main'  # Hanya di branch main
    steps:
      - uses: actions/checkout@v4
      - name: Deploy
        run: echo "Deploying..."

Alur eksekusi:

lint --> test --> deploy (hanya di main)

D. Conditional Execution

# Hanya berjalan di branch main
if: github.ref == 'refs/heads/main'

# Hanya berjalan untuk Pull Request
if: github.event_name == 'pull_request'

# Hanya berjalan jika job sebelumnya sukses (default)
if: success()

# Berjalan bahkan jika job sebelumnya gagal
if: always()

Demonstrasi: CI/CD Pipeline Lengkap

mkdir proyek-cicd && cd proyek-cicd && git init

# Buat project sederhana
echo "<!DOCTYPE html><html><body><h1>Hello</h1></body></html>" > index.html
echo "body { font-family: sans-serif; }" > style.css
echo ".env" > .gitignore
git add . && git commit -m "feat: init project"

# Buat CI/CD pipeline
mkdir -p .github/workflows
cat > .github/workflows/ci.yml << 'EOF'
name: CI/CD Pipeline

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

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Cek file .env tidak ter-commit
        run: |
          if find . -name ".env" -not -path "./.git/*" | grep -q .; then
            echo "ERROR: File .env ditemukan!"
            exit 1
          fi
          echo "OK: Tidak ada file .env"

  test:
    runs-on: ubuntu-latest
    needs: lint
    steps:
      - uses: actions/checkout@v4
      - name: Validasi HTML
        run: |
          for f in *.html; do
            if grep -q "<html" "$f"; then
              echo "OK: $f valid"
            else
              echo "GAGAL: $f tidak valid"
              exit 1
            fi
          done
      - name: Jalankan test sederhana
        run: echo "Semua test PASSED!"

  deploy:
    runs-on: ubuntu-latest
    needs: test
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - name: Deploy
        run: echo "Deploying ke production..."
EOF

git add . && git commit -m "ci: tambah CI/CD pipeline"

Untuk melihat hasilnya:

# Push ke GitHub
git remote add origin git@github.com:USERNAME/proyek-cicd.git
git push -u origin main

# Buka GitHub -> Tab "Actions" untuk melihat workflow berjalan

Latihan Praktik

Latihan: Buat CI/CD Pipeline

mkdir latihan-cicd && cd latihan-cicd && git init
npm init -y

# Buat file project
echo "<!DOCTYPE html><html><body><h1>Portfolio</h1></body></html>" > index.html
echo "body { margin: 0; }" > style.css
echo ".env" > .gitignore
echo "node_modules/" >> .gitignore

# Buat workflow yang mencakup:
# 1. Lint check (cek .env, validasi HTML)
# 2. Test (simulasi)
# 3. Deploy (hanya di main)
mkdir -p .github/workflows
cat > .github/workflows/ci.yml << 'EOF'
name: CI Pipeline

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

jobs:
  security-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Cek secrets
        run: |
          echo "Mengecek file sensitif..."
          if find . -name ".env" -not -path "./.git/*" | grep -q .; then
            echo "GAGAL: File .env ditemukan!"
            exit 1
          fi
          echo "LULUS: Tidak ada file sensitif"

  validate:
    runs-on: ubuntu-latest
    needs: security-check
    steps:
      - uses: actions/checkout@v4
      - name: Validasi HTML
        run: |
          echo "Validasi semua file HTML..."
          for f in *.html; do
            if [ -f "$f" ]; then
              echo "Mengecek $f..."
              if grep -q "<!DOCTYPE html>" "$f"; then
                echo "OK: $f memiliki DOCTYPE"
              else
                echo "WARNING: $f tidak memiliki DOCTYPE"
              fi
            fi
          done
          echo "Validasi selesai!"

  deploy:
    runs-on: ubuntu-latest
    needs: validate
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - name: Deploy ke production
        run: |
          echo "=== DEPLOYMENT ==="
          echo "Branch: ${{ github.ref }}"
          echo "Commit: ${{ github.sha }}"
          echo "Deploy berhasil!"
EOF

git add . && git commit -m "ci: setup CI/CD pipeline lengkap"

Push ke GitHub dan amati hasilnya di tab Actions.

Tugas Mandiri

Buat repository di GitHub, push project dengan CI/CD pipeline di atas
Buat Pull Request dan amati workflow berjalan di tab Actions
Tambahkan step baru di workflow (misalnya: cek file CSS valid)
Eksperimen dengan trigger: coba tambahkan schedule untuk workflow yang berjalan otomatis

Quiz: Review Modul 3.3

Jawab 8 pertanyaan berikut untuk menguji pemahaman kamu.

Soal 1 dari 8

Git hook pre-commit berjalan pada saat...