הקל על צרות הייצור והפריסה שלך עם צינור CI/CD שדואג לפרטים העמלניים.

פריסת יישומי אינטרנט ל-Firebase Hosting יכולה להיות טרחה. עם זאת, על ידי שימוש בפעולות GitHub אתה יכול לפשט ולייעל את תהליך הפריסה, ולבצע קל להפליא לנהל זרימות עבודה של פריסה לאורך כל תוחלת החיים של תוכנה פּרוֹיֶקט.

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

מהו צינור CI/CD?

צינור CI/CD (Intinuous Integration/Continuous Delivery) הוא קבוצה של תהליכים אוטומטיים המיושמים כדי לאפשר לבנות, לבדוק ולפרוס יישומים באופן רציף.

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

צינור CI/CD מכסה בדרך כלל כמה שלבים, זה כולל:

  1. שלב המקור: שלב זה מכסה את הפיתוח והתחזוקה בפועל של קוד האפליקציה עם כלי בקרת גרסאות כגון Git.
    2. instagram viewer
  2. שלב הבנייה: שלב זה מרכיב את קוד המקור עם כל התלות שלו לתבנית הפעלה.
  3. שלב הבדיקה: שלב זה משלב בדיקות אוטומטיות לאימות איכות התוכנה. המטרה הסופית היא לזהות ולתקן כל באג. ניתן לבצע סוגים שונים של בדיקות בשלב זה ולאחר שהקוד עבר את הבדיקות, הוא מוכן לפריסה.
  4. פריסה: שלב זה הופך את תהליך הפריסה לאוטומטי בסביבת הייצור.

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

מהן פעולות GitHub?

GitHub Actions היא תכונה המסופקת על ידי GitHub כדי להפוך את תהליכי הפריסה של תוכנה לאוטומטית בצינורות ה-CI/CD. זה מאפשר להגדיר ולהפוך זרימות עבודה של פריסה לאוטומטיות ישירות ממאגר GitHub של הפרויקט שלך.

ל-GitHub Actions יש מספר יתרונות:

  1. קל לשימוש: GitHub Actions מספק ממשק ידידותי למשתמש ותחביר פשוט להגדרת זרימות עבודה של פריסה. אתה יכול להגדיר בקלות ובמהירות את זרימות העבודה של הפרויקט שלך באמצעות העורך המובנה ב- GitHub.
  2. אינטגרציה מקורית: GitHub Actions היא חלק מ-GitHub, מה שמקל על הגדרה, ניהול ושיתוף פעולה בתהליכי עבודה לצד קוד הפרויקט שלך.
  3. גמיש וניתן להתאמה אישית: GitHub Actions מספקת פלטפורמה גמישה וניתנת להתאמה אישית המבטיחה שתוכל לבנות זרימות עבודה המתאימים לצרכים הספציפיים שלך. בנוסף, הוא תומך במספר שפות תכנות. כלומר, אתה יכול להשתמש בו עם כל טכנולוגיה שאתה מעדיף.

הגדר פרויקט Firebase ואת לקוח React

כדי להתחיל, עבור אל Firebase והיכנס באמצעות חשבון Google שלך. בדף הסקירה הכללית של המסוף, לחץ צור פרויקט כדי להקים פרויקט חדש ולספק את שם הפרויקט.

הַבָּא, ליצור אפליקציית React והתקן את כלי שורת הפקודה של Firebase:

npm להתקין -g firebase-tools

אתה יכול למצוא את הקוד של הפרויקט הזה בו מאגר GitHub.

היכנס ל-Firebase מהמסוף שלך באמצעות האישורים של חשבון Firebase שלך.

כניסה ל-firebase: ci

זה יפעיל את זרימת האימות של Firebase שתנחה אותך להזין את פרטי ההתחברות שלך אם עדיין לא נכנסת. ברגע ש-Firebase יאמת אותך, הוא ידפיס אסימון. העתק את האסימון הזה; אתה תשתמש בו כדי להפעיל פקודות Firebase בהגדרת GitHub Actions שלך.

לבסוף, צור גרסה מוכנה לייצור של היישום שלך:

npm run build

פקודה זו מייצרת את הקבצים והנכסים הדרושים, בתוך תיקיית 'build' חדשה בספריית השורש, הדרושים לפריסת היישום.

אתחל את Firebase ביישום React שלך

הפעל את הפקודה הזו כדי לאתחל את Firebase בתיקיית הפרויקט שלך:

init של firebase

לאחר מכן, אשר שברצונך לאתחל את Firebase בפרויקט שלך ובחר אירוח: הגדר קבצים עבור Firebase Hosting ו(אופציונלי) הגדר פריסת GitHub Actionמרשימת האפשרויות.

ציין שברצונך להשתמש בפרויקט קיים ובחר את שם הפרויקט שיצרת בתחילה במסוף המפתחים של Firebase.

לאחר מכן, ציין את התיקיה 'build' בתור פּוּמְבֵּי ספרייה, בחר לא כדי לשכתב את כל כתובות האתרים לאפשרות /index.html, בחר לא לאפשרות של הגדרת בנייה ופריסה אוטומטית מ-GitHub, ולבסוף, Select כן כדי להחליף את אפשרות הקובץ build/index.html.

לאחר ביצוע השינויים לעיל, ה-CLI יצור קובץ firebase.json בספריית השורש. קובץ זה מכיל את כל תצורת האירוח שזרימת העבודה של GitHub Actions תדרוש.

לבסוף, לפני הגדרת זרימת העבודה של GitHub Actions, צור מאגר ב- GitHubודחוף אליו את קבצי הפרויקט.

הגדרת פעולות GitHub

במאגר הפרויקט שלך ב-GitHub, בחר הגדרות > סודות ומשתנים > פעולות. בדף הסודי של המאגר, הזן FIREBASE_TOKEN כשם הסוד, ומדביקים את אסימון Firebase שהעתקת ב- סודות שדות.

הגדר את זרימת העבודה של הפריסה

לחץ על הכרטיסייה פעולות במאגר הפרויקט שלך ובחר הגדר את Nodejs זרימת עבודה ב אינטגרציה מתמשכת סָעִיף.

לאחר מכן, שנה את שם הקובץ ל firebase.yml, מחק את קוד ה-boilerplate בעורך, והוסף את הקוד למטה:

# זרימת עבודה זו תבצע התקנה נקייה של תלות בצמתים,
# מטמון/שחזר אותם, בנה את מָקוֹר לקוד ולהריץ בדיקות על פני שונות
# גרסאות של צומת
# למידע נוסף ראה:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
שם: Firebase CI


עַל:
 לִדחוֹף:
 סניפים: [ראשי]
 pull_request:
 סניפים: [ראשי]


מקומות תעסוקה:
 לִבנוֹת:


 פועל: ubuntu-latest


 אִסטרָטֶגִיָה:
 מַטרִיצָה:
 גירסת צומת: [14.x]

 שלבים:
 - שימושים: actions/checkout@v2
 - שם: השתמש ב-Node.js ${{ matrix.node-version }}
 משתמש: actions/setup-node@v1
 עם:
 node-version: ${{ matrix.node-version }}
 - הפעלה: npm התקנת -g npm
 - שם: npm להתקין, לבנות ולבדוק
 לרוץ: |
 npm להתקין
 npm run build
 - שם: Archive Build
 משתמש: actions/upload-artifact@v2
 עם:
 שם: לבנות
 נתיב: לבנות

 לפרוס:
 שם: פריסה
 צרכים: לבנות
 פועל: ubuntu-latest
 שלבים:
 - שימושים: actions/checkout@v2
 - שם: הורד Build
 שימושים: actions/download-artifact@v2
 עם:
 שם: לבנות
 נתיב: לבנות
 - שם: פרוס ל-Firebase
 משתמש: w9jds/firebase-action@master
 עם:
 args: deploy --only hosting
 env:
 FIREBASE_TOKEN: ${{ סודות. FIREBASE_TOKEN }}

הנה כמה מהמאפיינים המרכזיים שהוסברו:

  1. עַל: אירועים שמפעילים את הפעולות בזרימת עבודה זו.
  2. מקומות תעסוקה: מציין את המשימות שפעולה מסוימת צריכה להפעיל. במקרה זה, ישנן שתי עבודות: לבנות ולפרוס.
  3. ריצה על: המכונה שבה פעולה זו צריכה לפעול.
  4. צעדים: מגדיר רצף של שלבים לביצוע הפעולה עבור עבודה מסוימת.
  5. עם:מציין את כל הארגומנטים הנדרשים על-ידי הפעולות להפעלה.
  6. שֵׁם: שם של שלב מסוים עבור עבודה.

לבסוף, בצע את השינויים שנעשו בקובץ זה. GitHub יפעיל אוטומטית את זרימת העבודה הזו, יבנה ופריסה של אפליקציית React בשירות האחסון של Firebase. אתה יכול לבדוק את כתובת האתר הפעילה של היישום ביומני הפריסה.

פריסת אפליקציות באמצעות פעולות GitHub

GitHub Actions מספק גישת פריסה יעילה. זה מבטיח שאתה יכול לפרוס יישומים באופן עקבי ומהימן, ללא קשר לטכנולוגיה שבה אתה בונה אותם.

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