ניהול יעיל של ארכיונים של פעולות GitHub כדי לפרסם שחרורים

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

GitHub Actions Artifacts מאפשר לך להעביר נתונים ביעילות מעבודה אחת לעבודה אחרת, ובכך להפטר ממשימות חוזרות וזמן מתמיד שנדרש בתהליך ההפצה. במדריך זה, תלמד כיצד להשתמש ולנהל artifacts עבור הפצת אפליקציה של React אל Netlify.

המשך לקרוא והתחילו ליצור הפצות עקביות!

דרישות קדם

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

בניית זרימת עבודה CI/CD

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

אך לפני שמשתמשים ב- GitHub Actions artifacts להפצות האפליקציה שלך, עליך תחילה לבנות זרימת עבודה CI/CD עבור האפליקציה שלך:

1. צור תיקייה .github בתיקיית השורש של היישום שלך וצור תת-תיקייה בשם workflows.

2. לאחר מכן, צור את קובץ העבודה (קובץ .yml) בתיקיית workflows. באפשרותך לתת שם לקובץ לפי רצונך. אבל למטרת המדריך הזה, הקובץ מקבל את השם ci.yml.

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

Verifying workflow resource structure

3. הוסף את הקוד הבא לקובץ ci.yml ושמור את השינויים. הקוד מטה יוצר תהליך עבודה בשם CI עם משימת בנייה עבור היישום.

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
# התהליך יפעל באירוע push או pull בענף הראשי

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
# מערכת הפעלה להרצה עליה
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v3
# קבלת הקוד מהמאגר
    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
           node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm ci

    - name: Build app
      run: npm run build

    - name: Run tests
      run: npm run test

4. כעת, הוסף ועשה commit לשינויים, ודחוף אותם למאגר GitHub המרוחק שלך.

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

Verifying successful commit and push to the remote repository

5. לחץ על לשונית הפעולות כדי להציג את תהליך העבודה.

Viewing the workflow

6. לחץ על אחת ממשימות הבנייה בצד שמאל והרחב את משימת בניית היישום. תראה את הנתונים של משימת הבנייה (קבצים סטטיים) שנוצרו. אלה הם הקבצים שתצטרך לפרסום.

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

Viewing the builds

7. לבסוף, הוסף את הקוד הבא לאחר ביצוע הבדיקות שלך בתוך בלוק השלב בעבודת הבנייה שלך.

הקוד למטה מעלה אפשרות להעלות ארטיפקט בשם "production" מתיקיית הבנייה באמצעות הפעולה actions/upload-artifact@v3.

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

# העלאת ארטיפקט
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build

הגדרת תקופת שמירה מותאמת אישית של ארטיפקט

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

למטה מוצגים הערכים שאתה יכול להגדיר להתאמת תקופת שמירה מותאמת אישית:

  • מאגר פרטי – ערך בין 1 ל- 400 יום.
  • מאגר ציבורי – ערך בין 1 ל- 90 יום בלבד.

כדי להגדיר תקופת שמירה מותאמת אישית, עדכן את קובץ ה- YAML של הזרימה שלך כולל retention-days: 2 בשלב שלך של # העלאת ארטיפקט.

# העלאת ארטיפקט
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build
    # התאמת תקופת שמירת הארטיפקט
		retention-days: 2

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

  • נווט אל לשונית הגדרות במאגר.
  • לחץ על פעולה (לוח הצד שמאלה) כדי להרחיב את התפריט הנפתח, ובחר כללי.
  • הזן את מספר הימים שברצונך לשמור על הפריט תחת קטע השמירה על הארטיפקט והלוג המוצג למטה, ולחץ על שמירה.
click Save

ייבוא פרוייקט ממאגר Git אל Netlify

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

אבל לפני שתעדכן את תהליך העבודה שלך, תגדיר את Netlify לפרסום האפליקציה:

1. פתח את דפדפן האינטרנט המועדף עליך, נווט אל Netlify והתחבר עם החשבון שלך ב- GitHub.

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

Initiating importing project to Netlify

3. לחץ על GitHub מאחר שתשתמש במאגר הקוד שיצרת לצורך המדריך הזה ב- GitHub. חלון קופץ מופיע שבו תאשר גישה של Netlify אל זהותך ב- GitHub.

Choosing GitHub as the Git provider

4. לאחר אישור, חפש ובחר את המאגר שברצונך לייבא את הפרויקט ממנו.

Selecting the GitHub repository to import the project from

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

לחץ על "הפעל אתר" לאחר שהגדרת את הגדרות הבנייה, ותראה שהאתר מועבר. לאחר הפרסום, יווצר קישור חי לאתר.

אם השארת את שדה פקודת הבנייה ריק, המעבר לקישור יציג דף 404 מכיוון שהאפליקציה לא נבנתה.

Configuring basic build settings for the site

הבא, לחץ על "הגדרות אתר" כדי לצפות במידע האתר (שלב שישי).

Accessing the site details

לבסוף, בעמוד פרטי האתר, רשום את מזהה האתר למטה בתחתית סעיף מידע האתר לשימוש מאוחר יותר.

Noting the Site ID

יצירת אסימון גישה אישי

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

1. לחץ על סמל הפרופיל שלך (בחלקו העליון הימני) ובחר בהגדרות משתמש כדי לגשת להגדרות הפרופיל שלך.

Accessing the profile settings

2. בעמוד החדש, לחץ על "יישומים" (בפאנל השמאלי) → "אסימונים חדשים" (תחת סעיף אסימוני גישה אישיים) כדי להתחיל ביצירת אסימון גישה חדש.

Initiating creating a new access token

3. בעמוד החדש, הזן שם תיאורי לאסימון ולחץ על "צור אסימון".

Generating a new personal access token

4. כעת, העתק את האסימון למקום בטוח.

Copying the new personal access token

הגנת מזהה האתר והטוקן גישה על ידי יצירת סודות

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

1. נווט לתיקיית המאגר שלך ב-GitHub דרך הדפדפן שלך.

2. לאחר מכן, לחץ על לשונית "הגדרות" → "סודות" (לוח שמאלי) → "פעולות" (תחת "סודות") כדי לגשת לרשימת הפעולות הזמינות במאגר שלך.

Accessing the list of actions in the GitHub repository

3. לחץ על "סוד חדש למאגר" בעמוד סודות הפעולות כדי להתחיל בהוספת סוד.

Initiating creating a new repository secret

4. כעת, ספק שם תיאורי לסוד החדש. אך בת־ראשית המדריך זה, השם הוא NETLIFY_AUTH_TOKEN.

הוסף את אסימון הגישה שלך כערך ולחץ על "הוסף סוד" כדי ליצור את הסוד החדש.

Adding a secret for the access token

5. לבסוף, חזור על השלב הרביעי, אך הפעם הוסף סוד עבור זיהוי האתר שלך.

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

Verifying the newly-added secrets

הורדת ארטיפקט ופרסום ל-Netlify

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

1. עדכן את התהליך שלך על ידי הוספת הקוד למטה המכיל את משימת הפרסום.

הקוד הבא כולל שלבים להורדת הארטיפקט המועלה ושלב נוסף לפרסוםו ל-Netlify.

תוכל למצוא את הקוד המלא של קובץ ci.yml במאגר ה-GitHub של ATA.

deploy:
  name: Deploy שם העבודה
  needs: build # העבודה הבניה חייבת לרוץ בהצלחה כדי שהעבודה לפרסום תרוץ
  runs-on: ubuntu-latest

  steps:
  - name: Download artifact
    uses: actions/download-artifact@v3
# מוריד את הקבצים שהועלו
    with:
      name: production
      path: ./build

  - name: Deploy to Netlify
    uses: netlify/actions/cli@master
# שלב לפרסום ל־Netlify
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
# סודות לאימות
    with:
      args: deploy --dir=build --prod

2. לאחר מכן, הוסף ודחוף את השינויים למאגר מרוחק.

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

פעם שנוספו, לחץ על ההרצה האחרונה כדי לראות פרטים נוספים.

Verifying the latest commit being run

אם העבודות רצות בהצלחה, תראה סימון ירוק ליד העבודות ואת הארטיפקט לייצור בתחתית העמוד.

Verifying the jobs run successfully

3. כעת, לחץ על העבודה לפרסום (לוח שמאלי), והרחב את משימת הפרסום ל־Netlify. תראה את הפלט של השלב, שמכיל את כתובת האתר.

לחץ על כתובת האתר כדי לוודא שהאתר עובד ונגיש.

Verifying the Website URL

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

Verifying the site works correctly and is accessible via a web browser

מחיקת ארטיפקטים לא משמשים כדי לחסוך מקום

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

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

על דף העבודות שלך, לחץ על סמל המחיקה ליד האורטיפקט כדי למחוק אותו.

Deleting an artifact from the workflow on GitHub

עכשיו, לחץ אישור על ההודעה (העליונה) כדי לאשר את מחיקת האורטיפקט.

Confirming artifact deletion

שים לב שלמטה האורטיפקט אינו נמצא עוד בדף, מאשר שהוא נמחק בהצלחה.

Verifying the artifact is deleted

מסקנה

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

עם הידע החדש שרכשת, למה לא להשתמש בפעולות של GitHub לאוטומציה של זרימת העבודה של הפרויקט הבא שלך?

Source:
https://adamtheautomator.com/github-actions-artifacts-2/