Vibecoding · 15-dars · 9-sinf

Fan: DevOps & CI/CD Avtomatlashtirish Kohorta: Senior Web 9 Hafta: 3 (Avtomatlashtirish)

CI/CD va GitHub Actions: Avtomatlashtirilgan Testlar va Uzluksiz Deploy

Katta IT kompaniyalarda (Google, Meta, Target IT) dasturchilar hech qachon kodni serverga qo'lda yuklamaydi. Har bir `git push` va Pull Request ortidan bulutli robotlar ishga tushadi: kod uslubini tekshiradi, minglab avtomatlashtirilgan testlarni yurgizadi va faqat barcha sinovlardan o'tgan kodni production serverga chiqaradi.

Klassik Muammo

"Mening Kompyuterimda Ishlayotgan Edi!" Nega Qo'lda Deploy Xavfli?

Insoniy Xatolar

1. Dasturchi kodni jo'natishdan oldin testlarni qo'lda ishga tushirishni unutdi.
2. Uning kompyuteridagi sozlamalar serverdagidan farq qiladi.
3. Juma kuni kechqurun bitta nuqta xatosi tufayli butun sayt qulaydi va foydalanuvchilar `500 Server Error` xatosini ko'radi.

Yechim: CI/CD Konveyeri

Kompyuter charchamaydi, ovqatga shoshilmaydi va birorta testni o'tkazib yubormaydi.

CI/CD Konveyeri — bu qat'iy nazoratchi: toza Linux konteynerida barcha testlar 100% yashil bo'lmaguncha, kod serverga qo'yilmaydi!

CI va CD

Ikki Ustun: Continuous Integration (CI) va Continuous Delivery (CD)

1. Continuous Integration (Uzluksiz Birlashtirish)

Har bir commit yoki Pull Request paytida kodni avtomatik tekshirish.

• Linting: kod tozaligi va uslubini tekshirish (ESLint).
• Unit Tests: barcha matematik va mantiqiy funksiyalarni sinovdan o'tkazish.
• Build: dasturni yig'ish va xatolar yo'qligiga ishonch hosil qilish.

2. Continuous Deployment (Uzluksiz Yetkazib Berish)

Tekshiruvdan muvaffaqiyatli o'tgan kodni inson aralashuvisiz jonli serverga joylash.

• Agar barcha CI testlar yashil bo'lsa — dastur Vercel yoki Cloud serverga avtomatik yuklanadi.
• Agar bitta test yiqilsa — deploy zudlik bilan to'xtatiladi!

GitHub Actions Tizimi

GitHub Actions Tuzilishi: 5 Asosiy Komponent

1. Workflow (Oqim)

Loyiha ildizidagi `.github/workflows/*.yml` konfiguratsiya fayli.

2. Triggers (Hodisalar)

Robotni uyg'otuvchi hodisa: `push`, `pull_request` yoki vaqt taymeri.

3. Runners (Mashinalar)

GitHub tomonidan ajratiladigan toza virtual Linux (Ubuntu) serverlari.

4. Jobs (Vazifalar)

Bitta runnerda bajariladigan qadamlar to'plami (masalan: `lint`, `test`, `deploy`).

5. Steps (Qadamlar)

Terminal buyruqlari (`npm test`) yoki tayyor GitHub modullari (`actions/checkout@v4`).

YAML Qoidalari

YAML Tili: Bo'sh Joylar Qoidasi (Tab Mutlaqo Taqiqlanadi!)

Nega YAML O'ziga Xos?

YAML jingalak qavslar `{}` o'rniga faqat bo'sh joylar (indentation) orqali ierarxiyani belgilaydi.

Bosh qoida: YAML da `Tab` tugmasi mutlaqo taqiqlangan! Har bir ichki qadam roppa-rosa 2 ta probel bilan ajratiladi. Bitta xato probel butun pipeline'ni buzadi.

To'g'ri YAML Namunasi

name: CI Pipeline
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm test

Hodisalar

`on:` Direktovasi: Robotlar Qachon Ishga Tushadi?

Eng Ko'p Uchraydigan Triggerlar

• `on: [push]` — har qanday branchga yangi commit push qilinganda.
• `on: pull_request` — kimdir `main` branchga PR ochganda.
• `schedule: - cron: '0 0 * * *'` — har kecha soat 00:00 da avtomatik yurgizish.

Branch Bo'yicha Filtrlash

on:
  push:
    branches: [ main ] # Faqat main'ga push bo'lsa!
  pull_request:
    branches: [ main ]

Bu virtual serverlar vaqtini tejaydi: faqat asosiy kod tekshiriladi.

1-Bosqich: Linter

1-Bosqich: Linting (ESLint) — Kod Uslubini Avtomatik Nazorat Qilish

Linter Nima Uchun Kerak?

PR ko'rigida "Nega bu yerda bo'sh joy qolib ketgan?", "Nega ishlatilmagan o'zgaruvchi e'lon qilingan?" deb bahslashish shart emas.

ESLint kodni ishga tushirmasdan, bir necha millisekundda grammatik xatolarni topadi!

Linter Nimalarni Ushlaydi?

let score = 100; // ❌ ESLint: 'score' is defined but never used
const pi = 3.14 // ❌ ESLint: Missing semicolon
console.log(x); // ❌ ESLint: 'x' is not defined

Linter xato topsa, `exit code 1` qaytaradi va pipeline darhol to'xtaydi.

2-Bosqich: Avtomat Testlar

2-Bosqich: Avtomatlashtirilgan Unit Testlar (Jest)

Regressiya Nima?

Regressiya — dasturchi yangi funksiya qo'shganda, kecha ishlab turgan eski kod tasodifan buzilib qolishi!

Avtomat testlar yuzlab stsenariylarni bir zumda tekshirib chiqadi. Agar o'yin bali xato hisoblansa — robot qizil signal chaladi!

Namunaviy Test Kodi

test('Hisob kombo bilan to\'g\'ri ko\'payadi', () => {
const result = calculateScore(100, 2);
expect(result).toBe(200); // 100 * 2 = 200
});

CI terminalida barcha testlar yashil qushcha bilan tasdiqlanadi.

3-Bosqich: Avto-Deploy

3-Bosqich: Continuous Deployment — Kod Vercel Serveriga Uchadi

Bog'liqlik: `needs: [test]`

Deploy jobi hech qachon o'zboshimchalik bilan ishga tushmasligi kerak:

`deploy: needs: [lint, test]`

Linter yiqilsa — deploy boshlanmaydi. Test yiqilsa — deploy bekor qilinadi. Faqat ikkalasi ham yashil bo'lsagina sayt internetda yangilanadi!

Virtual Runnerdagi Buyruq

- name: Deploy to Vercel
run: npx vercel --prod --token ${{ secrets.VERCEL_TOKEN }}

`git push` bosilganidan 3 daqiqa o'tib, yangilangan o'yin butun dunyoga tarqaladi!

Secrets Xavfsizligi

GitHub Secrets: Maxfiy Kalitlarni Ochiq Kodga Chiqarmaslik

Dasturchining Eng Katta Xatosi

Hech qachon shaxsiy parollarni, server tokenlarini `.yml` fayli ichida ochiq yozib qo'ymang!

Xakerlik botlari ochiq GitHub omborlarini kecha-yu kunduz kuzatib boradi va 2 soniyada kalitlaringizni o'g'irlaydi.

GitHub Secrets Qanday Ishlaydi?

1. Repository da Settings → Secrets and variables → Actions ga kiring.
2. Yangi sir yarating: masalan, `VERCEL_TOKEN`.
3. YAML ichida shunday chaqiring: `${{ secrets.VERCEL_TOKEN }}`.
GitHub qiymatni hatto konsol chiqishida ham yashirib, `***` qilib ko'rsatadi!

Amaliy Mashg'ulot

Amaliy Laboratoriya: CI/CD Pipeline Arena Sinovi!

1. Linter Xatosi

Linter xatosi stsenariysini yurgizib, dastur to'xtashini kuzating.

ESLint Failure

2. Test Xatosi

Jest test xatosini ishga tushiring: deploy bekor qilinishini ko'ring.

Jest Test Crash

3. Yashil Deploy

Barcha testlarni yashil qilib, o'yinni Vercel ga chiqaring!

All Checks Passed

    ⚙️ Faylni oching: classes/9-sinf/3-hafta/15-dars-ci-cd-va-avtomatlashtirish/lab/index.html
  

Baholash va Yakun

10 Ballik Baholash Mezoni va Git & DevOps Bloki Yakuni

10 Ballik Mezon

Ball	Talab
1–3 ball	CI/CD nazariyasi va YAML strukturasi to'g'ri izohlandi
4–7 ball	Laboratoriyada linter va test xatoliklari tahlil qilindi
8–10 ball	Barcha bosqichlar yashil o'tdi, varaqadagi barcha topshiriqlar bajarildi

3-Hafta Natijasi:

Siz haqiqiy muhandislik yo'lini bosib o'tdingiz: ilk `git commit` va branchlardan tortib, Pull Request, Kod Ko'rigi va to'liq avtomatlashtirilgan CI/CD konveyerigacha!

        Uyga vazifa: Varaqadagi YAML sintaksis topshirig'ini yakunlash.
      