מה זה CI/CD?

אינטגרציה רציפה (CI) היא הנוהג של שילוב אוטומטי שינויים בקוד מתורמים מרובים לתוך מאגר משותף מספר פעמים ביום.כל שילוב מאומת על ידי בנייה אוטומטית וחבילת מבחן, לתפוס שגיאות מוקדם. רצף (CD) בונה על CI על ידי אוטומטי תהליך השחרור כולו כך שכל שינוי שעובר את כל הבדיקות יכול להיות פרוס לייצור עם דחיפה של כפתור.

CI /CD הפך אבן הפינה של הנדסה תוכנה מודרנית. בהקשר של React Native, שבו יישומים חייבים לרוץ על iOS ואנדרואיד, אוטומטים כל צעד של הצינור להפחית את ידני מעל הראש וממזער חוסר עקביות ספציפית פלטפורמה.ללא CI / קבוצותCD, לעתים קרובות להסתמך על מפתח יחיד לבנות באופן ידני, לחתום, מעלה הודעות - תהליך נוטה לעיכובים אנושיים ו.

למה CI /CD Matters for React Native

React Native מציג אתגרים ייחודיים שהופכים את CI /CD יקר במיוחד.בסיס הקוד נכתב ב- JavaScript, אבל המוצר הסופי הוא אפליקציה Native.זה אומר שאתה צריך לנהל שתי מערכות בנייה שונות (קוד עבור iOS, Gradle עבור אנדרואיד), להתמודד עם תלות Native שעשויה לדרוש הגדרות ספציפיות פלטפורמה, לנווט תהליכי ביקורת בחנות יישומים.

  • (FLT:0) לולאות משוב של FLT:1 - מפתחים מקבלים תוצאות מיידיות ממבחנים, linting, וניתוח סטטי, לעתים קרובות בתוך דקות של דחיפה.
  • (ב) ,0) אינטגרציה גיהנום גיהנום 1:1 - מתמזגים עם אימות אוטומטי למנוע התנגשויות גדולות, סודיות.
  • (ב) ⁇ :0) ,00 (ההרחבה) ,(הסביבות CI נקיות ומפוגדרות מאפס, ביטול "עבודה על המחשב שלי" בעיות.
  • (FLT:0) הודעות סטרמנד 1 (FLT:1), הגשת חנות יישומים אוטומטית (צילומי מסך, metadata, חתימה) חותך מחזורים מיום ליום עד שעות.
  • (FLT:0) ,Higher Code QualityFLT:1 - בדיקות אוטומטיות לאכוף סטנדרטים קידוד, סף כיסוי מבחן ותקציבי ביצועים.

למרות היתרונות האלה, קבוצות React Native להתחיל ללא CI /CD כי הגדרתו דורש הבנה של כלי רכב יליד, מהיר, וחתימה ספציפית פלטפורמה.ההשקעה משלמת במהירות, במיוחד ככל שהצוות גדל.

המונחים: a CI /CD Pipeline for React Native

כל צינור צריך לכלול את השלבים הבאים, הורה מהר ביותר להאט.כישלונות מוקדם הצינור צריך להפסיק את ביצוע כדי לשמר משאבים.

בקרת גרסאות ואסטרטגיה

מודל סניף ברור הוא הבסיס. GitFlow (feature, לפתח, לשחרר, ענפי תיקון חם) עובד טוב עבור קבוצות גדולות יותר עם פרסום מתוכנן. Trunk מבוסס פיתוח (ענפים קצרי ימים מתמזגים לתוך הראשי מספר פעמים ביום) צוותים מכוונים פריסה מתמשכת.

רוב מערכות CI מאפשרות לך להגדיר כללים לענפים - למשל, הפעלת רק בדיקות יחידות על ענפים תכונה, אבל בדיקות אינטגרציה מלאות ופריסה בטא על הענף הראשי.

בדיקה אוטומטית

בדיקה היא הלב של CI. for React Native, מומלץ גישה שכבתית:

  • (FLT:0) בדיקות בלתי-דיות (Unit TestingveFLT:1) - השתמש ב-Jest (הנקרא עם React Native) כדי לבחון את ההיגיון העסקי, את הפחתתם ואת פונקציות השירות.
  • (FLT:0) בדיקות אינטגרציה 1FLT - אינטראקציות מבחן בין רכיבים ושירותים.Re Native Testing Library מסייעות להפוך רכיבים ולקבוע התנהגות.
  • (FLT:0) End-to-end (E2E) בדיקות sentiFLT 1 - השתמש Detox (עבור נייד) או מסטרו כדי לדמות תרחישים של משתמשים אמיתיים על סימולטורים / ממורמרים. E2E בדיקות הוא איטי יותר אבל תופס רגרסציות כי בדיקות יחידה מתגעגעות.
  • (ב) ,0) בדיקות napshoteur בדיקות FLT:1 - Detect מכוונת שינויים UI על ידי השוואת תפוקה מאוחסן תמונות.שימוש בזהירות כמו תמונות יכול להפוך לתחזוקה.

הגדר את CI שלך כדי להיכשל את הבנייה אם כל בדיקה לא לעבור.חשב הגדרת סף כיסוי לאכיפת שערי איכות.

בניית אוטומציה

בניית אפליקציה Native עבור ייצור דורשת חתימה ומכינה את יכולת המשלוח הספציפיים של פלטפורמה (IPA עבור iOS, API /AAB עבור אנדרואיד) ; FLT:0fastlaneFLT:1 הוא תקן דה- Facto עבור אוטומטי שלבים אלה.זה מטפל חתימה קוד, צילומי מסך ואפילו מעלה לחנויות אפליקציה.

  • (ב) .0 (מתאים) כדי ליצור .ipa
  • (ב) , (ב) , ⁇ ⁇ ⁇

עבור iOS, עליך לנהל תעודות ומתן פרופילים. השתמש במשחק של Quicklane לאחסון מאובטח וסינון נכסים בחתימה על פני חברי צוות ומכשירי CI.

איכות קוד ו Linting

לכפות סגנון קוד עקבי באמצעות ESLint ו-Prettier. Run אלה ב- CI מוקדם ככל האפשר - הם נכשלים מהר וצורכים כמה משאבים.עבור ניתוח עמוק יותר, שילוב SonarQube או CodeClimate כדי לעקוב אחר ריחות קוד, שכפול, ופגיעות אבטחה.קבוצות רבות גם להפעיל את סוג ה- TypeScript הקלדה (FIRLT:2) כדי לתפוס שגיאות מסוג.

ניהול וקוד של Artifact

לבנות פריטים (החתימה IPAs ו- APIs) צריך להיות מאוחסן באופן מאובטח עבור הפצה. השתמש דלי אחסון בענן (S3, GCS) או שירות ייעודי כמו מרכז App (למרות שהוא כבר deprecated עבור תכונות חדשות) עבור iOS, חתימה דורשת תעודות והוראות פרופילים כי יפוג ויש לסובב.

פלטפורמות CI /CD עבור React Native

מספר פלטפורמות מספקות תמיכה ברמה הראשונה עבור React Native.בחירה שלך תלויה בגודל של צוות, תקציב, מערכת אקולוגית קיימת.

  • (FLT:0)GitHub ActionsFLT:1 - משולב חזק עם GitHub. Free tier כולל 2,000 דקות / חודש עבור מאגרי ציבור. אקסטנסיבית שוק של פעולות עבור React Native, Fastlane ו- Code חתימה.
  • (FLT:0)GitLab CI/CDFLT:1 - נבנה ישירות לתוך GitLab. מציעה דקות בלתי מוגבלות לפרויקטים ציבוריים ומקבילות חזקות.
  • (FLT:0)CircleCIFLT:1 - מותאם אישית גבוהה עם caching ומקבילה. iOS בונה דורש הרצים MacOS (תוספת מחיר) פופולרי בקרב קבוצות ניידים בשל תמיכה דוקר חזק ו- MacOS.
  • (FLT:0)BitriseFLT:1 - מיועד במיוחד עבור Mobile CI /CD. מספק צעדים מראש עבור React Native, מהיר, ופריסת חנות יישומים.
  • (FLT:0) CodemagicFLT:1 - התמקד ב- Flutter ו- React Native. מציעה מכונות macOS ושילוב עם ניהול החתימה של קודמאגי עצמו.

מרכז App (Microsoft) היה פעם בחירה פופולרית, אבל עכשיו הוא במצב תחזוקה; לשקול נודד לפלטפורמות חלופיות.

שלב-בי-Step: הקמת CI/CD עם GitHub Actions

פרויקט תגובה סטנדרטי (בשיתוף עם FLT 3: 3) מאוחסן על GitHub.הדוגמה הבאה מציגה צינור לבדיקה, בנייה, ופריסה של TestFlight ו-Google Play.

תגית: Workflow File

צור קשר בין הגורמים ל-FLT:4: לדחוף לענפים מרכזיים או לשחרר, ומושך בקשות.

name: CI/CD Pipeline
on:
 push:
 branches: [main, release/*]
 pull_request:
 branches: [main]

בדיקות ריצה

השתמש בסביבה Node.js. Cache תלויות כדי להאיץ את הריצה הבאות.

jobs:
 test:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with:
 node-version: '20'
 cache: 'npm'
 - run: npm ci
 - run: npm test -- --coverage
 - run: npx eslint .
 - run: npx tsc --noEmit

אם לא יצליח, העבודה עוצרת והצנרת מזהירה את המפתח.

בניית iOS ו- Android

iOS בונה דורש macOS רצים (GitHub מציע 7 או FLT:8 או (FLT:8) אנדרואיד בונה יכול לרוץ על Ubuntu אבל דורש את ה- Android SDK בנפרד משרות עבור כל פלטפורמה כדי במקביל ביצוע.

(ב) 0 Android Build JobveFLT 1

 build-android:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with: { node-version: '20' }
 - run: npm ci
 - run: |
 cd android && ./gradlew assembleRelease
 env:
 SIGNING_KEYSTORE: ${{ secrets.ANDROID_KEYSTORE }}
 SIGNING_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
 SIGNING_STORE_PASSWORD: ${{ secrets.ANDROID_STORE_PASSWORD }}
 SIGNING_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
 - uses: actions/upload-artifact@v4
 with:
 name: app-release.aab
 path: android/app/build/outputs/bundle/release/app-release.aab

(ב) ויקרא י"ד:

 build-ios:
 runs-on: macos-13
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with: { node-version: '20' }
 - run: npm ci
 - run: bundle install
 - run: bundle exec fastlane ios build
 env:
 MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
 FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.APP_SPECIFIC_PASSWORD }}
 - uses: actions/upload-artifact@v4
 with:
 name: app.ipa
 path: build/ios/App.ipa

הערה: iOS דורש Xcode Command Line Tools, אשר מותקנים מראש על ג'טייב macOS. macOS. יש להגדיר את ה-FLT:11 אשר מטפל בחתימה באמצעות התאמה ונבנה עם חדר כושר.

עקבו אחרי App Stores

לאחר בנייתם של עבודות פריסה תלויות בעבודות הבנייה, השתמש ב-FLT:0 (הטייס המהיר) 1 עבור TestFlight ו-FLT:2fastlane SupplyFLT 3 עבור Google Play.

 deploy-testflight:
 needs: [build-ios, test]
 runs-on: macos-13
 steps:
 - uses: actions/checkout@v4
 - run: bundle install
 - run: bundle exec fastlane ios upload_to_testflight
 env:
 FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.APP_SPECIFIC }}

 deploy-playstore:
 needs: [build-android, test]
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - run: bundle install
 - run: bundle exec fastlane android deploy_to_playstore
 env:
 PLAY_STORE_JSON_KEY: ${{ secrets.PLAY_STORE_JSON_KEY }}

עבור פרסום ההפקה, להוסיף שלב אישור ידני או רק לעורר תגים.

Best Practices for React Native CI/CD

  • (ב) ⁇ :0) ⁇ ⁇ (בצדק) , ק"מ (Cache node modules), CocoaPods, Gradle caches, ו-Homebrewחבילות.
  • (FLT:0) משתנה הסביבה משתנה וסודות FLT:1) לעולם לא מקשקוד מקשי API, חתימה על אישורים או אסימונים. לאחסן אותם בסודות הפלטפורמה של CI.
  • (FLT:0)Parameterize בונה 1FLT - השתמש במשתנה הסביבה כדי להבדיל בין סטיגינג וייצור בונה (למשל, נקודות קצה API, מזהה החבילה).
  • (ב) ,0) מבחנים במקבילה (ב"ג) , קובצי מבחן מפוצלים על פני מספר מקומות עבודה או שימוש בבדיקת sharding (התמיכה ב-Jest עם JestFLT:13 ו-FLT:14).
  • (ב) [ה]הולדות תלויה בקפידה ב-FLT:1] - אם אתה משתמש בספריות עם קוד Native (למשל, תגובה-native-Moderal-Moderra), ודא כי CI שלך יש את התלויות המערכת הנדרשת (למשל, OpenCV) שהותקנו מראש.
  • (ב) [ה]:0] שיקולים שלMonorepove (FLT:1 - אם משתמשים במונופול (Nx, Turborepo), מגדירים את CI כדי לזהות חבילות משתנות ורק לבנות / עדות.
  • (FLT:0) Record and alertFLT:1 - Monitor לבנות את משך, שיעורי כישלון ומגמות כיסוי מבחן. הגדרת הודעות (Slack, mail) עבור צינורות כושלים.

מלכודות נפוצות וכיצד להימנע מהם

  • (FLT:0) LongBuilding TimesFLT:1) - אופטימיזציה על ידי צ'נג ומקבילה של משרות. השתמש macOS רק עבור iOS בונה; מינוף לינוקס עבור אנדרואיד ובדיקה.
  • (FLT:0) בדיקות FlakyeurFLT:1 - במיוחד בדיקות E2E על CI. השתמש מנגנונים retry או לסמן אותם כ un-blocking.Prefer Detox של מובנה.
  • (ב) .0.Certificate and Giving פרופיל expiryph1: השתמש במשחק מהיר עם ג'ט repo או אחסון בענן. Set תזכורות ל לסובב תעודות לפני התחדשות אוטומטית באמצעות דגל תואמים של קונסול 15:15 בעבודה חודשית.
  • (FLT:0)iOS חתימה על נושאים ב- CIFLT:1, מלכודות נפוצות: פרופיל מסירה לא נכון, התאמה לא נכונה בין מזהה החבילה ופרופיל, יפוג את המפתח הפרטי.
  • (FLT:0 Android) אובדן חנות המפתח של 1LT - שמור גיבויים של חנות המפתח לשחרור שלך.אם איבד, אתה לא יכול לעדכן את האפליקציה. השתמש בסודות CI כדי לאחסן אותו, אבל גם לשמור על גיבוי מקומי במיקום מאובטח.
  • (ב) ,0) , [15] , מהדורות של [[המאה ה-1]] ו[[1924]] ו[[1924]]]], [[1924]]]] ו[[1924]]]]]], [[1924]]]]]], [[1924]]]]]]

הצלחה מרגיעה

עקבו אחרי מדדים כדי להעריך את הצינור שלך:

  • (ב) ,0) בניית זמן (FLT:1) - זמן מלא מהתחייבות ל-Aim למשך 30 דקות עבור צינור מלא.
  • (FLT:0) תדירות התדירות של ההרחבה (Deployment FrepLT:1) – באיזו תדירות אתה משחרר? צינור CI/CD טוב צריך לאפשר לפחות הודעות שבועיות עבור יישומים ניידים.
  • (ב) [15] שיעור ה-FLT:1 - אחוז הבונים אשר נכשלים.
  • (ב) [ה]מראיין: [ה], כמה זמן לוקח למפתח לראות תוצאות CI? מתחת ל-10 דקות לבדיקות יחידה הוא מצוין.
  • (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

השתמש בממדדים אלה כדי לזהות צווארי בקבוק ומכשירים על הצינור שלך.לדוגמה, אם iOS בונה לקחת 45 דקות, לשקול caching CocoaPods ולהשתמש macOS M1 רצים עבור איסוף מהיר יותר.

מסקנה

יישום CI /CD עבור יישומי React Native אינו רק על אוטומציה - זה על יצירת תהליך אספקה אמין, חידוש כי בקנה מידה עם הצוות שלך. על ידי שילוב בדיקות, בנייה, חתימה, פריסה לתוך צינור אחד, אתה להפחית את הסיכון, להאיץ את השחרור, ואת מפתחי חינם להתמקד תכונות.התחל קטן: לאפשר linting ו- Units בדיקות ראשונות, ולאחר מכן להוסיף, לבנות ולבסוף פריסות אוטומטי.

הכלים והתבניות המתוארים כאן - GitHub Actions, Fastlane, Detox ו-Cching נאותה - נבדקים בקרב על ידי צוותים ששולחים מיליוני הורדות.אימוץ אותם ישנה את זרימת העבודה לפיתוח שלך מהודעות ידניות, שגיאות-prone לזרם חלק ומתמשך של עדכונים איכותיים.

לקריאה נוספת, ייעוץ (FLT:0) הרשמי של CI /CD DocumentFLT:1 ומדריך ההרחבה:2CircleCI עבור React NativeveFLT 3, שניהם מספקים פרטים ספציפיים פלטפורמה ופתרון בעיות.