11.6 CI CD לפרונטאנד תרגול
תרגול - CI/CD לפרונטאנד¶
תרגיל 1 - Workflow בסיסי¶
צרו GitHub Actions workflow בשם ci.yml שרץ על כל push ל-main ועל כל Pull Request:
- התקנת Node.js 20 עם cache
- התקנת תלויות עם
npm ci - הרצת ESLint
- הרצת TypeScript check
- הרצת Prettier check
- הרצת Unit tests
- בניית הפרויקט
הוסיפו concurrency שמבטל ריצות קודמות של אותו branch.
תרגיל 2 - Pipeline מרובה שלבים¶
צרו pipeline עם הפרדה ברורה בין Jobs:
- quality - lint, type-check, format check (רץ ראשון)
- test - unit tests עם coverage (רץ אחרי quality)
- build - בניית הפרויקט (רץ אחרי quality, במקביל ל-test)
- e2e - בדיקות Playwright (רץ אחרי build, רק ב-PR)
- deploy - פריסה ל-Vercel (רץ אחרי test ו-build, רק ב-push ל-main)
צרו דיאגרמה טקסטואלית שמראה את סדר הריצה.
תרגיל 3 - Preview Deployment עם Lighthouse¶
צרו workflow שבכל PR:
- פורס preview ל-Vercel
- מחכה שהפריסה תסתיים
- מריץ בדיקת Lighthouse על ה-preview URL
- מגיב ב-PR עם תוצאות ה-Lighthouse (Performance, Accessibility, SEO)
- נכשל אם Performance מתחת ל-80 או Accessibility מתחת ל-90
תרגיל 4 - ניהול משתני סביבה¶
הגדירו מערכת של משתני סביבה עבור שלוש סביבות:
- development - API מקומי, debug מופעל
- staging - API של staging, analytics מופעל
- production - API של production, analytics, error tracking
צרו workflow שמשתמש ב-environment הנכון לפי ה-branch:
- develop -> staging
- main -> production
הציגו אילו secrets ואילו variables צריך להגדיר.
תרגיל 5 - בדיקת PR אוטומטית¶
צרו workflow שרץ על כל PR ומבצע:
- בדיקה שיש תיאור ב-PR (לפחות 20 תווים)
- בדיקה שגודל ה-PR לא חורג מ-400 שורות שינוי
- בדיקת bundle size ושליחת הערה ב-PR עם ההשוואה ל-main
- בדיקה שאין קבצי
.envאו secrets שנוספו לקומיט - הוספת labels אוטומטיות לפי סוג השינוי (bug, feature, docs)
תרגיל 6 - CI/CD מלא עם התראות¶
צרו מערכת CI/CD מלאה שכוללת:
- Pipeline עם כל הבדיקות (lint, test, build, e2e)
- פריסה אוטומטית ל-staging מ-develop
- פריסה אוטומטית ל-production מ-main
- התראת Slack/Discord כשהפריסה הצליחה
- התראת Slack/Discord כשהפריסה נכשלה (עם לינק ל-run)
- בדיקת אבטחה שבועית (npm audit)
- דוח coverage שנשלח כהערה ב-PR
שאלות¶
- מה ההבדל בין
npm installל-npm ci? למה משתמשים ב-npm ciב-CI? - הסבירו מה עושה
concurrencyב-GitHub Actions ולמה זה חשוב. - מה ההבדל בין Secrets ל-Variables ב-GitHub Actions? מתי משתמשים בכל אחד?
- מדוע חשוב להריץ בדיקות E2E ב-CI ולא רק בדיקות יחידה?
- מה זה Preview Deployment ומה היתרון שלו בתהליך Code Review?